Video with text
Last updated
Was this helpful?
Last updated
Was this helpful?
Use the Video with text section to combine an autoplay video (without sound) side-by-side with promotional text and button. With a flexible layout and optional content blocks, you can achieve a wide variety of looks.
Add a featured video and content blocks.
Customize the layout and change the container color for alternate looks.
Check out the related .
Editing templates will change all pages that use the same template. for different page layouts, or in the same template.
In the editor side panel, click (+) Add section and select Video with text. Click and hold the drag handles ⋮⋮ to re-order sections.
Click the section to edit general section styles for colors and spacing, available in all sections:
The Video with text section displays an autoplay video (without sound). After uploading your video, you can select the focal point of your video and add a color overlay.
For autoplay videos, make sure your video files meet the following requirements:
Video file type
.mp4 or .mov
Embedded YouTube or Vimeo videos are not supported.
Video length
< 20 seconds (Recommended)
Video size
< 10MB (Recommended)
Click Video with text section to find settings
Shopify video
Select or upload a video that autoplays (without sound).
Mobile Shopify video
Select or upload an alternate video to show on mobile devices.
Video focal point
Specify the main focus of the video. The focal point will remain centered and within frame to avoid unwanted cropping.
Center Default Top Bottom Left Right
Background link
Select a page or URL to make the entire video a clickable link.
Click Video with text section to find settings
Desktop video width
Set the maximum width of the video on desktop.
35-70 Default: 50
Desktop video position
Position the video to the left or right of the text content.
Left of content Right of content Default
Mobile video position
On mobile, show the video before or after the text.
Video first Default Video second
Video breathing room
Use the slider to add spacing around the video. Set the slider to 0 to display the video at the full width and height of the video area.
0-60 Default: 0
Click (+) Add block to add text and image content to the section. Use the drag handles ⋮⋮ to re-order blocks, and add Spacer and Divider blocks to further customize the layout.
Change the width and alignment of all content blocks.
Click section to find settings
Content width
Display the section at full width of the screen or set a custom width. Under Section, you can also set the section width.
Full width Custom width
Custom width
Use the sliders to set the maximum width (in pixels) of the section content.
200 - 1000 px
Content position
For both desktop and mobile, choose the placement of the headings within the grid item. Select one of nine positions. The horizontal and vertical placement applies when there's enough room in the content area.
Text alignment
Set the position of the text content for desktop screens.
Left Default Center Right
Change the Container color scheme to show a background color for the content area.
You can add and define different color schemes in Theme settings > Colors.
Section colors
Section width
Section padding
Heading
Text
Overline text
Button
Image
Spacer
Divider
Custom Liquid
Using color overlays
Learn how to change overlay colors and use gradients.
