1. What is a video hero?
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.
This section is perfect for creating visual effects and emphasizing key messages. In contrast, the video section is best when you want visitors to focus solely on the content of the video.
2. How to set up the video hero?
To effectively set up the Video Hero section and make it a visually appealing centerpiece on your site, follow these steps:
- Subheading: Enter the subheading to display above the main heading in a smaller size.
- Heading: Enter the main heading text for the promotion banner. Put some texts inside a bracket [] to highlight it.
- Marker: Choose the highlight style between Underline or Font highlight.
- Heading size: Adjust the heading size, ranging from 50% to 200%.
- Heading tag: Select the heading tag for this section to enhance the SEO of the page.
- Overlay opacity: Adjust the bar to make the text easier to see on the video.
- Desktop position: Change the position of the text & button block on desktop.
- Alignment: Make the text to be align left, right, or center.
Video Upload/Link
- Click the "Select video" button to choose a video from your store's data.
- Embed Video From URL: Enter the URL of the video. Only YouTube and Vimeo videos are supported. If both a hosted video and URL are provided, the URL will be prioritized.
- Locate the “Show sound control” checkbox. Check the box to enable the sound control feature. By default, this checkbox is set to false. Once enabled, an icon will appear on the storefront, allowing customers to toggle sound on or off as needed.
- Enter alt text for the video to improve accessibility and SEO.
Button Configuration
- Enter the text for the button that appears on the banner.
- Enter the URL where users will be directed when they click the button.
- Adjust the alignment of the button (e.g., Left, Center, Right).
-
Choose your preferred Button style: Primary, Secondary, or Text link.
By configuring these settings, you can create a compelling Video Hero section that not only captures attention with visual effects but also directs visitors to key areas of your store.
3. 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, click the “+ Add Product” button.
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” when done.
