The Video hero section displays a looping background video with optional text and buttons overlaid on top. Use it to introduce a product, campaign, or brand story with a full-width video banner.
Demo Usage
- Demo: Be Yours – Clothing Homepage
- Section: BABATON — located toward the lower part of the homepage, after the scrolling promotions and before Life in TnAction™.
This is an example of the standalone Video hero section, not a Video block inside Tab collage.
Steps:
1. Add the Video Hero Section
- In Shopify admin, go to Online Store > Themes and click Customize.
- Open the template where you want to display the video banner.
- Click Add section and select Video hero.
- Choose a video source, add content blocks, and click Save.
2. Select a Video Source
The section supports two video sources:
| Setting | Description |
|---|---|
| Video | Select a video uploaded to Shopify. |
| URL | Enter a YouTube or Vimeo video URL. |
- To use a Shopify-hosted video, select it in Video.
- To use YouTube or Vimeo, leave Video empty and enter a link in URL.
- If both are provided, the Shopify-hosted Video takes priority.
- Click Save.
The video is intended to play automatically, muted, and on a loop as a background. Playback may be restricted by the visitor's browser or device settings.
3. Configure the Desktop Layout
| Setting | Description |
|---|---|
| Desktop content position | Positions the overlay content at the top, middle, or bottom, aligned left, center, or right. |
| Desktop content alignment | Aligns text left, center, or right. |
| Desktop height | Sets a fixed height, Adapt to video, or Full screen. |
| Show container on desktop | Displays the text inside a container. |
| Make section full width | Extends the section across the page width. |
| Show section divider | Adds a divider above the section. |
Choose a height that keeps the important part of the video visible behind the text.
4. Configure the Mobile Layout
| Setting | Description |
|---|---|
| Mobile content alignment | Aligns text left, center, or right. |
| Mobile height | Sets Auto, Adapt to video, a fixed height, or Full screen. |
| Show text below video | Moves the content below the video on mobile instead of overlaying it. |
Use Show text below video when overlaid content is difficult to read on a smaller screen.
5. Add Content Blocks
Click Add block inside the Video hero section to add content.
| Block | Main settings |
|---|---|
| Heading | Heading, Heading size, Heading tag, Enable highlight, Highlight style. |
| Subheading | Subheading, Subheading size, Enable secondary color, highlight settings. |
| Text | Description, Description size, Enable secondary color, highlight settings. |
| Buttons | Button size, primary and secondary button labels/links, underline button style. |
| Custom Liquid | Adds custom content for advanced use. |
The section supports up to two Heading, two Subheading, two Text, and two Custom Liquid blocks, plus one Buttons block.
For the Buttons block, enter Button label and Button link. You can also configure a second button and select Use underline button style for either button.
6. Configure Colors, Highlight, and Spacing
| Setting | Description |
|---|---|
| Solid button label | Button text color. |
| Solid button background | Button background color. |
| Text | Text color over the video. |
| Overlay | Color applied over the video to improve readability. |
| Overlay opacity | Controls the strength of the overlay. |
| Highlight | Color used for highlighted text. |
| Top padding / Bottom padding | Controls spacing around the section. |
For highlighted text in a Heading, Subheading, or Text block, enable Enable highlight, select a Highlight style, then use italic formatting by selecting the text you want to highlight and clicking the italic (I) button in the editor.
7. Notes and Limitations
- Video hero is a background video banner, not the regular Video section with a conventional play interface.
- Shopify-hosted videos take priority over YouTube or Vimeo links.
- Autoplay is muted; some browsers or device modes may prevent or delay playback.
- The section does not have a separate video poster/cover image setting.
- If neither video source is provided, a placeholder appears in the Theme Editor or storefront.
- Be Yours 9.5.0 added VideoObject structured data for video sections to help search engines understand video content. Eligibility for rich results depends on the video and search engine requirements.
Troubleshooting
- Video not showing: Check the Shopify-hosted Video or the YouTube/Vimeo URL. If using an external URL, leave the Shopify-hosted Video field empty.
- Video not playing automatically: Check browser autoplay restrictions and device power-saving settings.
- Text difficult to read: Adjust Overlay, Overlay opacity, or Text color.
- Content overlaps on mobile: Enable Show text below video or adjust Mobile height.
- Buttons do not open a page: Make sure the corresponding Button link is set.
- Highlight does not appear: Enable highlight in the block and format the relevant text in italics.
If you encounter any issues or need additional help with your Be Yours theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
शेयर करना:
How to Set Up the Video Section in Be Yours
How to Set Up Pickup Availability in Be Yours