Video hero
Add the Video hero section to show a full-width autoplaying video (without sound), uploaded as a .mp4 file to your Shopify files.
Editing templates will change all pages that use the same template. Create new templates for different page layouts, or show dynamic page content in the same template.
Set up section
In the editor side panel, click (+) Add section and select Video hero. Click and hold the drag handles ⋮⋮ to re-order sections.
Section styles
Sections include general styles. Click the section to find options for spacing, and animations.
Section spacing
Section animations
Set up autoplay video
In the section settings, upload a .mp4 or .mov for a background video that autoplays (without sound).
You can upload an alternate mobile video, set a focal point, and customize the overlay colors to make your video look great on all devices.
Using color overlays
Learn how to change overlay colors and use gradients.
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).
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.
Background link
Select a page or URL to make the entire video a clickable link.
Change width and height
You can adjust the height to make the video tall or compact. Choose to display the video with a Fixed or Relative height.
Fixed heights maintain the same pixel height on all screens.
Relative heights adapt the image height as a percentage of the screen height.
Click Video hero section to find settings
Enable full width
Choose to span the image across the whole window or screen, removing the margins on either side.
Banner height
Set the banner height to either Adapt to video (use your video’s height) or select a Custom height.
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 - 650px Relative height 50 - 100%
Custom 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 - 650px Relative height 50 - 100%
Add content blocks
Use blocks to customize the content area of the section. Click (+) Add block to add text, buttons, and other media. Use the drag handles ⋮⋮ to re-order blocks, and change the layout in the section settings.
Accent
Add small label heading.
Heading
Add title heading.
Text
Add multiple lines of rich text.
Button
Add buttons with custom styles.
Image
Add images with custom sizes.
Text list with icons
Add column text with icons.
Video player
Add video that plays in a popup viewer.
Divider
Add border between blocks.
Spacer
Add space between blocks.
Change content layout
In the section settings, change the width and layout of the content blocks area.
Click Video hero section to find settings
Content width
Set the maximum width of the section: between 400 and 1000 px.
Text position
Change the position of the content blocks within the section for desktop screens.
Mobile text position
Change the position of the content blocks within the section for mobile screens.
Show text box
Enable the text box to display the content blocks inside a container. Change the text and background colors, and choose to show shadows or borders around the text box.
Click Image hero section to find settings
Show text box
Display all content blocks within a container.
Text box style
Display boxes with a Soft drop shadow, Solid drop shadow, or Borders with different thicknesses.
Color scheme
Change the color scheme applied to the text box. Use the Default color scheme from your theme settings or select a variant scheme based on the default: either Inverse, Soft, Accent, or Sale. You can also select a custom color scheme. Learn more.
Override with custom colors
Use custom colors for this section to override the color scheme.
Text color
Select a custom color for text within the text box.
Background color
Select a custom color for the background of text box.
Related links
Last updated
Was this helpful?