Skip to content

Video with text overlay

This guide describes setting up the Video with text overlay section

Use the section to add a video, overlaid with text, to a store page. Inside the section, provide customers with information about your brand, describe products, or welcome customers to your store, etc.

The previous video shows a Video with text overlay section on a store's home page. In Theme editors section settings, to reduce the height of the section's (YouTube) video, the Aspect ratio – desktop option is set to Extra wide. To position the overlaid text in the center of the section, the Content position option is set to Center, and at Two thirds width. The section's Shop audio button links to a collection page.

Note

When low power mode is enabled on Apple iOS devices, the Safari browser won't play the video inside a Video with text overlay section. Instead, add a fallback image to the section. The fallback image displays whenever the video does not load or play. To add a fallback image, refer to the Section settings table in Step 3 (below).

For general guidance with modifying sections, refer to Sections overview.

Set up a Video with text overlay section

To set up a Video with text overlay 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 with text overlay 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 with text overlay. Refer to Shopify help: Add a section.

  2. From the side menu, select Video with text overlay.

    A Video with text overlay section selected in Theme editor.

  3. Select a setting described in the following table.

Section setting nameDescription
Video URLIn the Video URL box, enter a URL for the video. YouTube and .mp4 links are accepted.
Aspect ratio – mobileUse the dropdown Aspect ratio – mobile to set a size for the video inside the section. This setting applies to smaller screens, and the options are: Standard, Widescreen, Extra wide, and Full screen.
Aspect ratio – desktopUse the dropdown Aspect ratio – desktop to set a size for the video inside the section. This setting applies to desktop screens, and the options are: Same as mobile, Standard, Widescreen, Extra wide, and Full screen.
Fallback imageUse the Fallback image selector options to set up an image to display inside the section. The image is shown if the video does not load or play. Refer to Add, replace or remove an image or video inside a section or block.
Fallback image > Connect dynamic sourceTo display a Fallback image from a dynamic source, select the Connect dynamic source icon beside the Fallback image selector, and then choose a metafield to add. Refer to Shopify help: Metafields.
Content > HeadingIn the Heading box, enter text to display as the section's title text.
Content > TextIn the Text box, enter (body) text to display inside the section. Format the text and add links using the text editor pane.
Content > Text > Connect dynamic sourceTo display body text from a dynamic source, select the Connect dynamic source icon beside the *Text box, and then choose a metafield to add. Refer to Shopify help: Metafields.
Content > Content positionSelect the Content position dropdown to position text inside the section. The options are: Top left, Top center, Top right, Left, Center, Right, Bottom left, Bottom center, and Bottom right.
Content > Content width on desktopSelect the dropdown Content width on desktop to set a width for the section's text content. The options are One third, One half, Two thirds, and Full width. This setting applies to desktop screens.
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.
Call to action > LinkIn the Link box, enter a URL for the section's button to use or select a link to store page. The button is displayed inside the section's text area. To remove a link, select the X icon inside the text box.
Call to action > Link > Connect dynamic sourceTo display a link from a dynamic source, select the Connect dynamic source icon beside the Link box, and then choose a metafield to add. Refer to Shopify help: Metafields.
Call to action > TextIn the Text box, enter text to display as a label for the section's button. The button is displayed inside the section's text area.
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.