Video hero
Theme section
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.
Set up 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 insert dynamic content with metafields.
Add video file
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 Format | .mp4 video (required) |
---|---|
File size | Maximum 10MB (recommended) |
Duration | 5 - 10 seconds (recommended) |
Add section headings
Edit the Heading and Subheading to overlay the video before playing. The section headings are included as blocks nested within the section.
Section style
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.
The Video hero section settings apply to the entire section.
Settings reference
Click on the section to find the following settings:
Setting | Description |
---|---|
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:
Setting | Description |
---|---|
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 | 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 Rich text editor manual ↗. |
Max width of text | Use the slider to control the maximum width and line breaks of the headings. |
Related links
Last updated