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.

How to edit a Video hero section

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. Vertical content padding: Top and bottom padding between the content and video.

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

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

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

Block settings

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.

Text block

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

Button block

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