Appearance
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:
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.
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 | Use 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 | Use 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 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 source | To 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 > 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 and add links using the text editor pane. |
| Content > Text > Connect dynamic source | To 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 position | Select 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 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 | 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. |
| Call to action > Link | In 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 source | To 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 > 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. |
| 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. |