Video hero
Last updated
Was this helpful?
Last updated
Was this helpful?
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. for different page layouts, or in the same template.
In the editor side panel, click (+) Add section and select Video hero. Click and hold the drag handles ⋮⋮ to re-order sections.
Sections include general styles. Click the section to find options for spacing, and animations.
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.
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.
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%
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.
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.
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
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
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. .
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.
Section spacing
Section animations
Using color overlays
Learn how to change overlay colors and use gradients.
