Appearance
Video
This guide describes setting up the Video section.
Use the section to add a video to a store page. With videos, you can share information about your brand with customers, describe products, or welcome customers to your store, etc.
In the previous video, a Video section is displayed on a store's home page. The section's video is linked from YouTube. The section's Cover image option is set to display a static image until the video is played. To reduce the height of the video, the Aspect ratio dropdown is set to Cinema.
For general guidance with modifying sections, refer to Sections overview.
Set up a Video section
To set up a Video section:
Go to Customize theme.
In Theme editor, at the top of the page, use the dropdown to select a page that contains a Video section.
Note
The section can be added into any page, except Checkout and Giftcard pages. To add the section into the current page, select Add section > Video. Refer to Shopify help: Add a section.
From the side menu, select Video.
Select a setting described in the following table.
| Section setting name | Description |
|---|---|
| Heading | In the Heading box, enter text to display as the section's title text. |
| Overlay heading | Select the Overlay heading checkbox to turn on/off overlaying the section's video with the section's heading text. |
| Cover image | Use the Cover image selector options to set up an image inside the section. The image is displayed when the video is not playing. Refer to Add, replace or remove an image or video inside a section or block. |
| Cover image > Connect dynamic source | To display a cover image from a dynamic source, select the Connect dynamic source icon beside the Cover image selector, and then choose a metafield to add. Refer to Shopify help: Metafields. |
| Video URL | In the Video URL box, enter a URL for the video. URLs from YouTube or Vimeo are accepted. |
| Aspect ratio | Use the Aspect ratio dropdown to set a size for the video inside the section. The options are Standard - 16:9, Standard - 4:3, and Cinema. |
| Full width | Select the Full width checkbox to turn on/off displaying a "whitespace" border around the section. |
| Alt text | In the Alt text box, enter text that describes the cover image for accessibility purposes. Refer to Shopify help: Adding alt text to media. |
| Text color | Use the Text color options to specify a color for text inside the section. Set the text color to use the section's color scheme color for Primary, Secondary or Tertiary text. Alternatively, set the text color to White or Black. Refer to Colors. |
| Color > Color scheme | Use the Color scheme options to select a color scheme for the section. Refer to Colors. |
| Theme settings | If available, select Theme settings to access additional settings for the section. Refer to Section theme settings menu. |
| Custom CSS | Select Custom CSS. In the box, enter custom CSS styles to apply only to the current section. Refer to Shopify help: Add custom CSS. To apply custom styles to your entire online store, refer to Theme settings > Custom CSS. |
| Remove section | Select Remove section to delete the section from the current page. |