# Video with text overlay

This guide describes setting up the Video with text overlay section to add a video, overlaid with text, to a store page. Use the section to provide customers with information about your brand, describe products, or welcome customers to your store, etc.

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

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

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. At the top of the page, use the dropdown to select a template that contains a video with text overlay section.

    Note

    The video with text overlay section can be added into any page, except Checkout and Giftcard pages. To add a video with text overlay section into the current page, select Add section > Video with text overlay. Refer to Shopify help: Add a section (opens new window).

  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 name Description
Video URL In the Video URL box, enter a URL for the video. YouTube and .mp4 links are accepted.
Aspect ratio – mobile Select 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 – desktop Select 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 image Use the Fallback image menu options to select an image to display inside the section. The image is shown if the video does not load or play.
  • To add an image, choose Select Image, and then upload an image or select an image file from your store’s file library.
  • To replace an image, choose Change > Change image, and then select or upload a new image.
  • To remove an image, select Change > Remove image.
Content > Heading In the Heading box, enter text to display as the section’s title text.
Content > Text In the Text box, enter (body) text to display inside the section. Format the text using the text editor pane.
Content > Content position Select the Content position dropdown to position text inside the section. The dropdown options are: Top left, Top center, Top right, Left, Center, Right, Bottom left, Bottom center, and Bottom right.
Content > Content width on desktop Select 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 color Select the Text color dropdown to set a color for the text inside the section. The options are: Primary, Secondary, Tertiary, Black, and White. Refer to Colors.
Call to action > Link In the Link box, enter a URL for the section’s button to use or select a store page to link to. 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 > Text In 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.