Video hero
Theme section
Last updated
Theme section
Last updated
This feature was added in v5.0.0 on April 12, 2022. See our changelog and theme update guide to learn more.
Add the Video hero section to show a full-width autoplaying video (without sound), uploaded as a .mp4 file to your Shopify files.
If you want to add a Vimeo or YouTube video (with sound), you can use the Video 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 use metafields and dynamic sources.
The Video hero section requires an .mp4
that's been uploaded to Content > Files in your Shopify admin. For the best experience, we strongly recommend using a 5 to 10 second video under 10MB.
Note | The autoplay video does not play audio. To embed a video from YouTube or Vimeo with audio, see the Video section.
File size
Maximum 10MB (recommended)
Duration
5 - 10 seconds (recommended)
Add a section title and promotional text to overlay your Video hero. The section headings are included as blocks nested within the section.
You can link to you collections or products or any other page with a custom call-to-action button.
The Video hero section settings apply to the entire section. You can adjust the overall height of the video for both desktop and mobile, change the section colors, and choose where to position the headings and button.
Click on the section to find the following settings:
Height
Use the slider to set the height of the video as a percentage of the maximum height.
Mobile height
Use the slider to set the height of the video on mobile as a percentage of the maximum height.
Video link
Add the direct link to your .mp4 file uploaded to your Shopify Files. Click the Link icon next to your video file to copy the URL.
Image fallback
Select or upload an image to display in case the video does not load. We recommend using a still image from the video.
Text alignment
Choose which section of the video you want to display your headings and button.
Text shadow amount
Change the shadow to all heading text to add more of a contrast with the video.
Text color
Choose the text color for the video headings.
Button background color
Choose the button background color of the button.
Button text color
Choose the button text color.
Overlay color
Choose the color that overlays the entire video.
Overlay opacity
Use the slider to adjust the transparency of the overlay color. Set the opacity to 0% to turn off the overlay color.
Click on the Heading block to find the following settings:
Heading
Enter heading text to display as the section title.
Heading size
Use the slider to adjust the font size of the main heading between 48px to 72px. Make sure the heading is large enough so it's distinctive and easy to read.
Subheading
Max width of text
Use the slider to control the maximum width and line breaks of the headings.
Related links
Enter subheading text to display below the heading. Use the formatting buttons to add text styles, links, or lists. To learn more, see Shopify's .