Appearance
Video with text
This guide describes setting your store's Video with text section. The section displays a video side-by-side with corresponding text on a store page.
The following video shows a video with text section on a store's homepage. In the video, to swap the position of the text and video, the setting Video position on desktop is changed from Right to Left.
For general guidance with modifying sections, refer to Sections overview.
Set up a video with text section
To set up a video with text section:
Go to Customize theme. At the top of the page, use the dropdown to select a template that contains a video with text section.
Note
The video with text section can be added into any page, except Checkout and Giftcard pages. To add a video with text section into the current page, select Add section > Video with text. Refer to Shopify help: Add a section.
From the side menu, select Video with text.
Select a setting described in the following table.
| Section setting name | Description |
|---|---|
| Mode | Select the Mode dropdown to set how the video plays inside the section. Select Autoplay to set the video to play automatically, when a visitor opens the store page. Autoplay loops the video without sound. With Click to play, visitors must select the video to begin playing. |
| Video URL | In the Video URL box, enter a URL for the section's video. YouTube and .mp4 links are accepted. |
| Cover image | Use the Image menu options to set up an image inside the section. The image is displayed when the video is not playing.
|
| Video position on desktop | Select the dropdown Video position on desktop to position the section's video to the Left or Right. This setting applies to desktop display devices. |
| Aspect ratio | Select the Aspect ratio dropdown to set a size for the video inside the section. The options are Standard - 16:9, Standard - 4:3, Cinema, Square, and Portrait. |
| Video width on desktop | Select the Video width on desktop dropdown to set a width for the video inside the section. The options are One third, One half, and Two thirds. This setting applies to desktop display devices. |
| Heading | In the Heading box, enter text to display as a title inside the section's text area. |
| Text | In the Text box, enter text to display inside the section's text area. Format the text using the editor pane. |
| Text alignment | Select the Text alignment dropdown to align the text to the Left, Center or Right, inside the section's text area. |
| 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. |
| Call to action > Button style | Select the Button style dropdown to set the style for the section's button to Outline or Solid. The button is displayed inside the section's text area. |
| Color > Color scheme | Use the Color scheme dropdown to set the section's color scheme to Primary, Secondary or Tertiary. Refer to Colors. |
| Remove section | Select Remove section to delete the section from the current page template. |