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.

STEPS

In your theme editor (Customize):

1. Select a Template to edit from the dropdown menu in the top bar.

   Learn how to use templates in our Templates guide.

2. Under Template, click (+) Add section and select Video hero.

3. Click and hold the drag-and-drop handles ⋮⋮ to re-order your sections.

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)

STEPS

In your Shopify admin:

1. Go to Content > Files to open your Shopify files ↗.

   
2. Click the Upload files button to add your .mp4 file from your computer.

3. Once your file has been processed, click the Link icon next to the file to copy the URL.

   You may need to refresh the page for your file to appear.

   

In the theme editor (Customize):

1. Click the Video hero section to open the settings.

2. Paste the link into the Video link field. Click on the the link that appears in the results above.

   
3. Click Save.

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.

STEPS

In your theme editor (Customize):

1. Click the Title block (”Rich text”) to open the settings.

2. Change the Heading text to display as a section title.

   Increase or decrease the Heading size using the slider.

   Use the Max width of text slider to control the maximum width of the heading.

3. Click the Subheading block to open the settings.

   Use the formatting buttons to add text styles, links, or lists. To learn more, see Shopify's Rich text editor guide ↗.

   Use the Max width of text slider to control the maximum width of the rich text. Use this setting to create a clean visual shape for your text and avoid unwanted line breaks.

4. Click Save.

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.

STEPS

In your theme editor (Customize):

1. Click the Video hero section to open the settings.

2. Adjust the overall Height and Mobile height of the video using the slider.

   Choose between 50% and 100% of the maximum height of your video.

3. Select an Image fallback to display in case the video does not load.

   We recommend using a still image from the video.

4. Use the Text alignment dropdown to change the position of your headings and button on top of your video.

   
5. Adjust the Text shadow amount using the slider.

   Text shadow can add contrast to make your headings readable.

6. Change the Color for the Text, Button background, and Button text.

7. (Optional.) Select an Overlay color to display overtop of the video and adjust the Overlay opacity using the slider.

   The Overlay lets you control the brightness and tone of images. Use this setting to balance it with other images and to increase contrast with headings so they're readable.

   Set the opacity to 0% to turn off the overlay color; set it to 100% to create a solid color block with no image.

8. (Optional.) Click the Overlay gradient option to add a color overlay that fades across a range of hues.

   You can choose the style, angle, position, and opacity of the gradient. See Shopify's color gradient guide ↗ to learn more

9. Click Save.

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

Video section