Skip to content

Video with text

This guide describes setting the Video with text section.

Use the section to display a video side-by-side with corresponding text on a store page.

A Video with text section on a store's home page.

The previous image shows a Video with text section on a store's home page. In the upper right, part of Theme editor's section menu is display. To position of the section's video on the right side of the section, the menu's Video position on desktop option is set to Right.

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:

  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 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. Refer to Shopify help: Add a section.

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

    A Video with text section selected in Theme editor.

  3. Select a setting described in the following table.

Setting nameDescription
ModeUse the Mode options 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 URLIn the Video URL box, enter a URL for the section's video. YouTube and .mp4 links are accepted.
Cover imageUse the Cover image selector options to set up an image inside the section. The image is displayed when the video is not playing. Refer to Add, replace or remove an image or video inside a section or block.
Cover image > Connect dynamic sourceTo display a cover image from a dynamic source, select the Connect dynamic source icon beside the Cover image selector, and then choose a metafield to add. Refer to Shopify help: Metafields.
Video position on desktopUse the Video position on desktop options to position the section's video to the Left or Right. This setting applies to desktop display devices.
Aspect ratioSelect 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 desktopUse the Video width on desktop options 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.
HeadingIn the Heading box, enter text to display as a title inside the section's text area.
TextIn the Text box, enter (body) text to display inside the section's text area. Format the text and add links using the editor pane.
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.
Text alignmentUse the Text alignment options to align the text to the Left, Center or Right, inside the section's text area.
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.
Call to action > Button styleUse the Button style options 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 schemeUse the Color scheme options to select a color scheme for the section. Refer to Colors.
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.