Video banner

The Video banner section displays a full-width autoplaying video without sound, providing an immersive visual experience that captures attention immediately.

You can add informational content blocks and guide customers with customizable buttons, making this section ideal for highlighting brand stories, product demonstrations, or seasonal promotions.

Note: If you’d like to add a video with sound, please refer to the Video section article for instructions.

1, How to add section in theme editor:

1

In your theme editor (Customize), scroll to the bottom of the template and select Add section.

2

In the list, locate and select Video banner section. The section will now be added to your page, ready for customization.

2, Section settings:

The Section settings allow you to choose the video source, adjust height, and configure the mobile display options.

• Shopify-hosted video: Upload a video directly to your Shopify store, where it will be hosted and autoplay in the banner.

• External video: Add a link from YouTube or Vimeo to embed an external video.

Note: If both Shopify-hosted and external videos are set, the Shopify-hosted video will take priority.

• Video overlay opacity: Use the slider to adjust the transparency of the overlay color. Set the opacity to 0% to turn off the overlay color. If set to 100%, the overlay will be opaque.

• Overlay style: Select an overlay effect to style the video banner: Gradient from bottom, Gradient from top or Full video darken.

• Video description: Add a short text description of your video. This description is important for accessibility—it helps screen readers describe the video content to visually impaired users.

• Desktop section height: Set the height of the video banner on desktop: Small, Medium, Large, Full screen. Selecting Full screen expands the video banner to the full height of the screen.

• Adapt section height to video size: this setting ensures the section height automatically adjusts to fit the full height of the video—preventing the video from being cut off.

  • None: The section height stays fixed based on your choices in the Desktop section height & Mobile section height setting.

  • On desktop: Adjusts the section height to fit the video only on desktop devices.

  • On mobile: Adjusts the section height to fit the video only on mobile devices.

  • On all devices: Automatically resizes the section height to match the video across all screen sizes.

• Text settings: Customize the layout of your text content on desktop:

  • Desktop content position: Controls where the overlay text appears on the video: Top left, Top center, Top right, Middle left, Middle center, Middle right, Bottom left, Bottom center, Bottom right.

  • Desktop content width: Adjusts the width of the text container: Small, Medium, Large.

• Mobile layout settings:

  • Mobile section height: Choose the height of the video on mobile devices, with options ranging from Small to Full screen.

  • Mobile content alignment: Adjust the alignment of text content on mobile.

3, Block settings

The Video banner section supports several blocks to add customized content such as headings, descriptions, captions, and buttons.

• Heading block: Add a heading for the Video banner section. Choose from the default font or select another from the Shopify font library for heading font. Adjust the heading size from Small to Extra extra large. Highlight specific keywords in the heading with: Color: Change the highlight color or Underline: Add an underline to highlighted text.

• Text block: Add a description or supporting text to provide additional information under the heading.

• Caption block: Add a caption for more detailed content. Customize the caption style to either Uppercase or Subtitle.

• Buttons block: Add buttons to guide customers to other parts of the store.

  • Enter a label and assign a link to each button. If left blank, the button won’t display.

  • Button style: Choose from styles such as Solid, Outline, or Text.

  • Customize button color based on available options.