Video with text
Theme section
The Video with text section combines a feature auto-playing video with marketing content and optional button.
Display an auto-playing video (without sound)
Add content blocks for text, buttons, images, and more.
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
Add auto-play video
Upload an auto-play 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.
Add content blocks
In the Video with text section, add content blocks to display next to the auto-play video. There are 3 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.
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. |
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.
Add buttons
Add multiple Button blocks to link to your collections or products or any other page with a custom label.
Add video player
(Optional) If you want to include a video with audio, you can add a video player block that opens in a popup player.
Click (+) Add block and select Video player to add your video. You can either use an uploaded .mp4
video in your Shopify files or embed a video from YouTube or Vimeo.
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.
Embed video from URL
To embed a video from YouTube or Vimeo, paste the video link in the block settings.
Section padding and width
Choose the amount of padding around the section and make the section full width.
Settings reference
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
Last updated