Appearance
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:
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.
From the side menu, select Video with text overlay.
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.
|
| 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. |