Video hero
Last updated
Last updated
The Video hero section was added in v1.2.0 — Learn how to update your theme to access the latest features.
Add the Video hero section to show a full-width autoplaying video (without sound), uploaded as a .mp4 file to your Shopify files.
In the editor side panel, click (+) Add section and select Video hero. Click and hold the drag handles ⋮⋮ to re-order sections.
Editing a template will change all pages that use that template.
Create and assign new templates to design different page layouts.
Add dynamic content to show page-specific content in the same template.
Click the section to customize the general section styles for colors and spacing, available in all sections:
The Video hero section displays an autoplay video (without sound) as the background. 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 hero 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.
Focal point
For desktop and mobile, 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.
Image animation
Change the animation style of how the video loads. The image can gradually fade into view or be revealed by an iris swipe, which appears as a growing circle. Set to None to disable animations.
None Fade Iris wipe
Choose a fixed height to make the video the exact same height on all screen sizes. Choose a relative height to have the video height adapt to a certain percentage of the screen height.
Click Video hero section to find settings
Desktop height
Set the section height to a fixed height (in pixels) or relative height (as a percentage of the screen height).
Fixed height 250 - 750px Relative height 50 - 100% Default: 650px
Mobile height
Change the maximum height of the video on mobile. Choose a fixed height (in pixels) or relative height (as a percentage of the screen height).
Fixed height 150 - 750px Relative height 50 - 100% Default: 450px
The overlay adds a layer of color to your video. Overlays help balance image and text for clarity and readability.
Choose a Color scheme for the overlay and overlay text
Change the Opacity to make the overlay more or less transparent
Click Video hero section to find settings
Overlay opacity
Use the slider to change the transparency of the overlay. Set the opacity to 0% to turn off the overlay.
0 - 100 % Default: 20
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.
Adjust the alignment and width of the content blocks.
Click Video hero section to find settings
Content width
Use the sliders to set the maximum width (in pixels) of the section content.
200-1000 px Default: 500
Text position
Set the position of the text content for desktop screens.
Top / Middle / Bottom Left / Center / Right
Mobile text position
Set the position of the text content for mobile screens.
Top / Middle / Bottom Left / Center / Right
Heading
Text
Overline text
Button
Image
Spacer
Divider
Custom Liquid
