Video hero

A guide to set up an auto-playing fullwidth video

The Video hero section displays an auto-playing video (without sound) to add dynamism to your page.

If you want to add a Vimeo or YouTube video, which includes sound, you should use the Video section instead.

How to add a Video hero section to your Shopify store

Steps

1. In the theme editor (Customize), click Add section

2. Locate Hero video

3. Make necessary changes

4. Save.

How to edit a Video hero section

Section settings

Video settings

• Video type: Choose Shopify-hosted (for autoplay and mute support) or External URL (YouTube/Vimeo).

• Shopify-hosted video: Upload a .mp4 file directly from your Files.

• External video URL: Paste a YouTube or Vimeo link.

🚀 For autoplay + mute:

Use a Shopify-hosted video to ensure the video starts automatically without sound. Most modern browsers block autoplay with sound enabled.

Visual settings

• Image overlay opacity: Add a dark or light overlay to improve text contrast (0-100%).

• Banner height: Auto / Small / Medium / Large.

• Vertical content padding: Add spacing above and below the content.

• Text color: Set the color of your overlay text.

Desktop and mobile content position settings

• Desktop content alignment: Left / Center / Right.

• Desktop content alignment: Left / Center / Right.

• Mobile layout: Adjust banner height and content position for smaller screens.

Block settings

You can add the following blocks to your Video hero:

Heading	Main headline (large text)
Subheading	Optional secondary headline
Text	Supporting paragraph or message
Button	CTA button linking to a page or product

💡Pro tips:

• Compress your video before uploading to ensure faster load time.

• Keep videos short (10-15 seconds) to minimize performance impact.

• Pair video with a strong CTA to drive conversions.