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. Includes settings for video content, text content, CTA button, desktop/mobile layout (including Product layout and Video height), colors, and section width. |
|---|---|---|
| Available block | Product | Used to show featured products alongside the video โ either overlaid on top of it (Overlay mode) or displayed beside it (Side rail mode), depending on the Product layout setting. Up to 20 featured products supported. |
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 with two layout modes: Display up to 20 products with ratings, quick view, and "Add all to cart". Choose between Overlay (product list displayed on top of the video) or Side rail (product list docked beside the video) to match your design.
- Flexible video height: Choose Natural (preserves the video's real aspect ratio), Fullscreen (crops the video to fill the container), or a fixed container-based size.
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: Natural (keeps the video's real aspect ratio), Fullscreen (crops the video to fill the container), or a fixed container-based size.
- Set padding and video corner radius as needed.
โ ๏ธ If you were using the "70% of screen" Video height option: This option was removed in v10.1.0. If your section was set to this value, please re-select Natural or Fullscreen (or a fixed container size) to restore the intended appearance.
STEP 6: Click "Save" to apply changes.
๐ค How to add Products to the Video hero section?
You can showcase up to 20 products directly in the Video hero section โ either overlaid on top of the video or displayed beside it as a side rail โ 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.
STEP 1: Add the Product block
Under the Video hero section in the theme editor, add the Product block.
STEP 2: Choose products
In the Product block's settings panel, click Select on the Product setting and choose up to 20 products from the list.
STEP 3: Choose a product layout
Go back to the Video hero section settings and scroll to the Desktop layout group. Set Product layout to:
- Overlay โ the product list appears on top of the video. Set Product area overlay opacity to control how much the background behind the product list is dimmed (default: 0%, fully transparent).
- Side rail โ the product list docks beside the video instead of on top of it, leaving the full video visible.
STEP 4: 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 5: Click "Save" to apply changes.
๐ Information: On mobile, product cards in Overlay mode are sized at 80% width automatically. In Side rail mode, the layout adjusts at 1024px and 768px screen widths. The combined video + product list + Add all button container fills 100% of the viewport height on mobile.
7. Support Information
Need help? Contact support@omnithemes.com or visit omnithemes.com.
