User Guide

Search limit to:






Video hero #1 - #2 - #3

by Admin on Sep 18, 2025

A Video Hero section is a prominent, visually impactful part of a website that features a video as the background or central element, often with overlay text and call-to-action buttons. This section is designed to grab visitors' attention immediately upon landing on the page and to create a strong, memorable first impression.

1. Section Components

Section Video Hero Showcase video with text and button at a prominent position.
Available block Button Add a button to the section to redirect customers.

2. Location & Setup

To add & set up the Video Hero section:

  • Open the Shopify Theme Editor (Online Store > Themes > Customize)
  • Decide where you want to place the new section in Template.
  • Click "Add Section".
  • Select "OT: Video hero (#number of variant)".

3. Highlight Features

  • Video background: Use a video as the main visual to create an eye-catching first impression.
  • Call-to-action buttons: Insert button to guide customers to key pages or promotions.
  • Overlay & styling: Apply overlay color and adjust opacity for better text readability.

4. Common Use Cases

🤔 How to set up Video hero section?

STEP 1: Add the section

Add Video hero section to your desired position.

STEP 2: Set up section

Click on the section to open its settings panel:

  • Enter the Heading for the section. Adjust its size, tag, and alignment.

You can wrap some heading text into [] to highlight it. Choose the highlight style at Marker type.

  • Add some Text for further description.
  • Upload Video or embed one from URL.

Besides, if you want to add a button to the video hero, add a Button block to set it up.

STEP 3: Set up layout & styles

  • Customize the height of the video at Desktop height and Mobile height.
  • (Optional) Add an overlay layer to your video, adjust its color and opacity.
  • Change the position of the text & button on the desktop at Desktop position.
  • At Mobile/Desktop layout, choose block width, spacing, and padding...
  • Choose colors for block elements.

STEP 4: Click "Save" when done.

5. Layout Recommendations

The Video Hero section has 3 appealing layouts available. If you want support to set up the layouts, don't hesitate to chat with us!

📂 Video hero #1

Check out demo here.

📂 Video hero #2

Check out demo here.

📂 Video hero #3

Check out demo here.

6. Support Information

Need help? Contact our support team at Omni Themes Support .