Video with text

Theme section

The Video with text section combines a feature video with a marketing call to action block. With a flexible layout and optional button, it's a great way to introduce a product collection or something new and exciting.

Set up section

Add this section to any template (except Checkout) and use the drag-and-drop handles to re-order its position. You can add this section multiple times with different content and settings.

Editing a template changes all pages that use that template. To edit specific pages, you can create new templates or insert dynamic content with metafields

STEPS

In your theme editor (Customize):

  1. Select a Template to edit from the dropdown menu in the top bar.

    Learn how to use templates in our Templates guide.

  2. Under Template, click (+) Add section and select Video with text.

  3. Click and hold the drag-and-drop handles ⋮⋮ to re-order your sections.

Add autoplay video

Upload an autoplay video (without audio) to next to the section headings and button. You can adjust the video position, shape, and focal point.

Note | The autoplay video does not play audio. For videos with audio, you can add a Video player block within the section or use the Video section instead.

STEPS

In your theme editor (Customize):

  1. Click on the Video with text section to open the settings.

  2. Select the Video position to display the image on the Left or Right side of the section.

  3. Under Shopify video, click Select video.

    Use a .mp4 video. We strongly recommend using a 5 to 10 second video under 10MB.

  4. (Optional) Under Mobile Shopify video, click Select video for a background video that appears only on mobile devices.

    You may want to upload a video file that has been cropped to a different shape (aspect ratio) to better fit a vertical screen.

  5. Select a Video aspect ratio to crop your video to Square, Landscape, or Portrait.

    The Natural setting displays the original shape of your video.

  6. Use Video focal points to specify the main focus of your images. The focal point of your image will remain centered and within frame when your site adapts to different screen sizes.

  7. Click Save.

Add video player

Add a video (with audio) that visitors can can click to view within a popup video player. You can either use an uploaded .mp4 video in your Shopify files or embed a video from YouTube or Vimeo.

Click (+) Add block and select Video player to add your video.

Add Shopify-hosted video

To use a Shopify-hosted video, upload a .mp4 file to your Shopify admin and select the video in the block settings.

STEPS

In your Shopify admin:

  1. In the side panel, click Content > Files.

  2. Click Upload files to add a .mp4 file from your computer.

    Once your file has been processed, you can go to the next step.

In the theme editor (Customize):

  1. Click the Video player block under the Video with text section.

  2. Under Shopify video, click Select video to select your video and click Done.

  3. Click Save.

Embed video from URL

To embed a video from YouTube or Vimeo, paste the video link in the block settings.

STEPS

In the theme editor (Customize):

  1. Click the Video player block to open the settings.

  2. Under Youtube or Vimeo URL, paste the link of your hosted video.

  3. Click Save.

Section content

Add section headings

Add a section title and promotional text display next to the video. The section headings are included as blocks nested within the section.

STEPS

In your theme editor (Customize):

  1. Click the Heading block to change section title.

    we recommend a short title of just a few words.

  2. Click the Subheading block to add a few words or short sentence below the heading.

  3. Click the Text block for longer content in a more compact size.

  4. Click (+) Add block to add an Accent block, ideal for a one word label or category.

  5. Click on the Video with text section to change the Text alignment of the content blocks. Choose Left, Center, Right.

  6. Click Save.

Add buttons

Add multiple Button blocks to link to your collections or products or any other page with a custom label.

STEPS

In your theme editor (Customize):

  1. Click on a Button block to open the settings.

    Click (+) Add block and select Button to add more.

    Click Remove block or the eye icon to remove or hide blocks.

  2. Select or paste a URL for the Button link.

  3. Enter text for the Button label.

    The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, read "What is a Call to Action?"

  4. (Optional.) Use the drag and drop handles ⋮⋮ to change the position of the Button:

  5. Select a Button style: either Solid, Outline, or Text.

    Click on the Video with text section to find the color options for buttons.

  6. Click Save.

Section style

Fine-tune the colors, text position, and padding of the section.

You can also add design blocks like the Spacer and Border to refine the look. Click (+) Add block and use the drag handles to move the blocks where you need them.

STEPS

In your theme editor (Customize):

  1. Click on the Video with text section to open the settings.

  2. Select a Padding option to add space around the section to either the Top and bottom, Top only, Bottom only, or set it to None.

  3. Choose to Enable full width to make the section and video span to the edges of the page.

  4. Click Save.

Settings reference

The Video with text has three default content blocks: Heading, Subheading, and Button.

You can edit or remove these blocks and add 7 other types of blocks to customize the section’s content and layout.

Available blocks

Click the Video with text section to find the following settings.

Layout

Video

Color

Section style

\


Related links

Vide hero Image with text Image with text split

Last updated