Video hero

How to setup a Video hero

The Video hero section displays an auto-playing video (without sound) to add dynamism into 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

Steps

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

2. Locate Hero video

3. Make necessary changes

4. Save.

Section settings

1. Video settings

You can use a video from an external source like Youtube or Vimeo, or use the Shopify-generated URL address that hosts your video.

2. Content settings

Adjust overlay transparent, text color, and position of content on desktop and mobile

1. Image overlay opacity: The transparent overlay on the video makes text easier to see. It is best to keep it at 20-60% so that the video does not disappear and the text is not too hard to see.

2. Banner height: The height of the section with Large/Medium/Small and Auto.

3. Desktop content position: Position of content in section.

4. Desktop content alignment: Center/Left/Right.

5. Text color: The color of the text in the section.

6. Mobile - Show content below images on mobile: Location of content - Inside or outside the video.

7. Mobile content alignment: Text alignment of the section on mobile.

Block settings

1. Heading/ Sub-heading block

This is where you customize the heading text and heading size.

For the heading size of the section, there are 3 options Large/Medium/Small.

2. Text block

Description: The text under the heading of section, with metafields supported.

3. Button block

This button can redirect to any link or page in the store.