Video hero

How to setup a Video hero
Video hero section
Video hero is a video with overlay, description, and a navigation button that leads to a product/collection page.

How to add a Video hero section

  1. 1.
    In the theme editor (Customize), click Add section
  2. 2.
    Locate Hero video
  3. 3.
    Make necessary changes
  4. 4.

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. 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. 2.
    Banner height: The height of the section with Large/Medium/Small and Auto
  3. 3.
    Desktop content position: Position of content in section
  4. 4.
    Desktop content alignment: Center/Left/Right
  5. 5.
    Text color: The color of the text in the section
  6. 6.
    Mobile - Show content below images on mobile: Location of content - Inside or outside the video
  7. 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.
The heading size of the section, there are 3 options Large/Medium/Small

2. Text block

Description: The text under heading of section, with metafield support

3. Button block

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