Video Hero is a Shopify theme section in the Section Star library. Make a powerful first impression — a fully configurable video hero that draws visitors in from the moment they land on your page.
About the Video Hero section
The Video Hero section provides a dynamic and visually appealing way to showcase your products, promotions, or any other content. Combining video backgrounds with customizable text and call-to-action elements, this section captures visitor attention instantly. You can set up background videos with various control options, and overlay text and buttons with customizable fonts, colors, and alignments.
Live demo
Use cases
- New Product Launch: Feature a video of your newest product being used or demonstrated, with a bold call-to-action button urging visitors to shop now.
- Seasonal Promotions: Use holiday-themed or seasonal videos to announce special sales or limited-time offers, enhancing the festive atmosphere of your store.
- Brand Storytelling: Tell your brand's story through a compelling video, overlayed with key messages and a link to learn more or shop your collection.
- Customer Testimonials: Display videos of customer testimonials or reviews, building social proof and encouraging potential buyers to trust your products.
Settings
Every setting below appears in the Shopify theme customizer once the section is published.
Hero Design
Set the settings for your hero
| Setting | Type | Default |
|---|---|---|
| Cover Background | Color or gradient | linear-gradient(164deg, #111 0%, #555… |
| Content Width | Range | 60 |
| Box Alignment | Select (Left, Center, Right) | left |
| Show Cover over Video | Checkbox | On |
| Cover Opacity | Range | 25 |
| Show Text Shadow | Checkbox | Off |
Button Style
Set the look and feel of the button
| Setting | Type | Default |
|---|---|---|
| Primary Button Background Color | Color or gradient | linear-gradient(164deg, #111 0%, #333… |
| Primary Button Text Color | Color | #fff |
| Text Size | Range | 15 |
| Padding Top/Bottom | Number | 10 |
| Padding Left/Right | Number | 25 |
| Border Radius | Number | 5 |
| Border Size | Number | 0 |
| Border Color | Color | #111 |
Content
Set the section content.
| Setting | Type | Default |
|---|---|---|
| Text Alignment | Select (Left, Center, Right) | left |
| Headline | Inline rich text | <strong>Welcome to Video Hero!</strong> |
| Content | Inline rich text | The video hero allows you to show a r… |
| Call to Action | Text | Shop Now |
| Call to Action Link | URL | — |
| Animate Call to Action | Checkbox | On |
Video
Setup the video
| Setting | Type | Default |
|---|---|---|
| Hero Video | Video | — |
| Mobile Hero Video | Video | — |
| Play Inline | Checkbox | On |
| Autoplay | Checkbox | On |
| Loop Video | Checkbox | On |
| Show Video Controls | Checkbox | Off |
| Mute Video | Checkbox | On |
How to add this section to a Shopify store
- Install Section Star from the Shopify App Store.
- Open the app and search the library for “Video Hero”.
- Click Publish, then choose a name and the theme to publish into.
- Follow the deep link into the Shopify theme customizer.
- Add the section to any page and customize it with the native theme settings.
No code is required, and the section lives in your theme as ordinary Liquid — see the full install guide.