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.

File Format	.mp4 video (required)
File size	Maximum 10MB (recommended)
Duration	5 - 10 seconds (recommended)

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

Block	Description
Accent	Add text to display a small heading above the main heading.
Heading	Add text to display as a heading.
Text	Add multiple lines of rich text.
Text list with icons	Add a column of promotional text with icons.
Image	Add a small Video with an adjustable size.
Button	Add a button link with text.
Video player	Add a video that visitors can click to play in a popup viewer.
Border	Add a border to visually separate other blocks.
Spacer	Add a margin of space between blocks.

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

Layout

Setting	Description
Video position	Choose to display the featured video either Left of content or Right of content on desktop screens.
Text alignment	Align the headings and button to the Left, Center, or Right within the text area.

Video

Setting	Description
Video	Select an image to display as the feature image. There are no required image dimensions. We recommend a minimum width or height of 2500px.
Video aspect ratio	Choose to crop the video to a uniform shape. Select Portrait (2:3), Square (1:1), or Landscape (3:2). Select Natural to display images in their original shape (without cropping). Learn more about aspect ratios in our Image settings guide.
Video focal point	Select the most important part of the video to keep centered. Use focal points to avoid unwanted cropping across different screen sizes.

Color

Setting	Description
Background	Select the color of the section background.
Text	Enter multiple lines of text.
Button	Select the color of the button background.
Solid button text	If the Solid button style is selected in the button block settings, select the color for the button text.

Section style

Setting	Description
Enable animation	Choose whether to display visual effects when scrolling, hovering, or interacting with the section. See the Animation guide to learn more.
Enable full width	Display the section at the full width of the screen or window.
Padding	Add a margin of space around the section to either the Top and bottom, Top only, Bottom only, or set it to None.

\

---

Related links

Vide hero Image with text Image with text split