Video hero

The Video hero section was added in v1.2.0 — Update your theme to access new features.

The Video hero section displays a full-width autoplaying video (without sound) with overlaid headings, text, and buttons.

Set up section


In the editor side panel, click (+) Add section and select Video hero. Click and hold the drag handles ⋮⋮ to re-order sections.

Section styles


Click the section to edit general section styles for colors and spacing, available in all sections:

Set up autoplay video


In the section settings, upload a .mp4 or .mov for a background video that autoplays (without sound).

You can upload an alternate mobile video, set a focal point, and customize the overlay colors to make your video look great on all devices.

Cover

Using color overlays

Learn how to change overlay colors and use gradients.

For autoplay videos, make sure your video files meet the following requirements:

Video file type

.mp4 or .mov Embedded YouTube or Vimeo videos are not supported.

Video length

< 20 seconds (Recommended)

Video size

< 10MB (Recommended)

Click Video hero section to find settings

Setting
Description
Options

Shopify video

Select or upload a video that autoplays (without sound).

Mobile Shopify video

Select or upload an alternate video to show on mobile devices.

Focal point

For desktop and mobile, specify the main focus of the video. The focal point will remain centered and within frame to avoid unwanted cropping.

Center Default Top Bottom Left Right

Background link

Select a page or URL to make the entire video a clickable link.

Image animation

Change the animation style of how the video loads. The image can gradually fade into view or be revealed by an iris swipe, which appears as a growing circle. Set to None to disable animations.

None Fade Iris wipe

Change video height


You can adjust the height to make the video tall or compact. Choose to display the video with a Fixed or Relative height.

  • Fixed heights maintain the same pixel height on all screens.

  • Relative heights adapt the image height as a percentage of the screen height.

Click Video hero section to find settings

Setting
Description
Options

Desktop height

Set the section height to a fixed height (in pixels) or relative height (as a percentage of the screen height).

Fixed height 250 - 750px Relative height 50 - 100% Default: 650px

Mobile height

Change the maximum height of the video on mobile. Choose a fixed height (in pixels) or relative height (as a percentage of the screen height).

Fixed height 150 - 750px Relative height 50 - 100% Default: 450px

Add content blocks


Click (+) Add block to add text and image content to the section. Use the drag handles ⋮⋮ to re-order blocks, and add Spacer and Divider blocks to further customize the layout.

Change content layout


Adjust the alignment and width of the content blocks.

Click Video hero section to find settings

Setting
Description
Options

Content width

Use the sliders to set the maximum width (in pixels) of the section content.

200-1000 px Default: 500

Text position

Set the position of the text content for desktop screens.

Top / Middle / Bottom Left / Center / Right

Mobile text position

Set the position of the text content for mobile screens.

Top / Middle / Bottom Left / Center / Right

Section colors


The section uses two color schemes. The first color scheme applies a section background color, and the overlay color scheme applies text, button, and overlay tint colors.

Change background color


The section background is visible when the section has top and bottom padding or when the section width is page width or full width padded.

In the section settings, select a color scheme (at the top of the settings panel) to apply its background color. You can edit the color scheme in your theme settings.

Last updated

Was this helpful?