1. What is Video hero?
The 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.
2. Section Components
| Section | Video hero | Upload or embed a video at a central position on the site. |
|---|---|---|
| Available block | Product | Used to show a featured product under the video (⚠️Note: You can showcase up to 20 featured products). |
3. 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.
- Click "Add section".
- Select "Video hero".
4. Highlight Features
- Flexible video options: Upload Shopify-hosted videos or embed from YouTube/Vimeo.
- CTA button: Direct visitors with customizable button text, style, and link.
- Product showcase: Display up to 20 products with ratings, quick view, and "Add all to cart" option.
5. Common Use Cases
🤔 How to set up Video hero section?
STEP 1: Add the section
Add the Video hero section and click on it to open the settings panel.
STEP 2: Add video
At Desktop video/Mobile video settings group:
- Upload a Video to display or embed a URL that supports YouTube and Vimeo videos.
- (Optional) Enter descriptive text for accessibility and SEO at Video alt text.
STEP 3: Enter text content
- Enter a Heading for the section. Wrap the heading text in [] to highlight it.
- Choose the highlight style at Marker. Adjust the size and tag of the heading.
- Enter Text for further description.
STEP 4: Add a CTA button
Enter the Button label and paste a Button link to redirect customers.
STEP 5: Adjust section layout and appearance
- Choose the position for text content & button at Desktop position or customize it yourself.
- Choose content alignment.
- At Colors settings group, choose color for button and text elements.
Scroll down to Desktop layout/Mobile layout settings group:
- Tick the checkbox "Make section full width" to make the video's width span the full width of the user's device.
- Choose Video height, padding, and video corners.
STEP 6: Click "Save" to apply changes.
🤔 How to add Products to the Video hero section?
You can now showcase up to 20 products directly under the Video hero - perfect for highlighting featured items right on your homepage.
Plus, there's an "Add all to cart" button to let customers instantly add all featured products to their cart.
✍️ How to set it up:
STEP 1: Add the Product block
Under the Video hero section in the theme editor, add the Product block
STEP 2: Choose products
Once added, you will see the Product block's setting panel, click Select on the Product setting, and choose up to 20 products from the list.
STEP 3: Customize the look
- Show rating: Toggle on to display star ratings.
- Show Quick view button: Show a 🔍 button which allows customers to click & preview product details in a popup.
- Show add all to cart: Adds an "Add all to cart" button under the product list.
- Styling options: Customize your product list colors in both light and dark modes.
STEP 4: Click "Save" to apply changes.
6. Support Information
Need help? Contact support@omnithemes.com or visit omnithemes.com.
