Skip to content

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:

  1. 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.

  2. From the side menu, select Video.

    A Video section selected in Theme editor.

  3. Select a setting described in the following table.

Section setting nameDescription
HeadingIn the Heading box, enter text to display as the section's title text.
Overlay headingSelect the Overlay heading checkbox to turn on/off overlaying the section's video with the section's heading text.
Cover imageUse 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 sourceTo 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 URLIn the Video URL box, enter a URL for the video. URLs from YouTube or Vimeo are accepted.
Aspect ratioUse 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 widthSelect the Full width checkbox to turn on/off displaying a "whitespace" border around the section.
Alt textIn the Alt text box, enter text that describes the cover image for accessibility purposes. Refer to Shopify help: Adding alt text to media.
Text colorUse 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 schemeUse the Color scheme options to select a color scheme for the section. Refer to Colors.
Theme settingsIf available, select Theme settings to access additional settings for the section. Refer to Section theme settings menu.
Custom CSSSelect 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 sectionSelect Remove section to delete the section from the current page.