Hero Banner
Create a stunning first impression with a full-width hero featuring high-quality images or video, overlay text, and compelling call-to-action buttons.
Overview
The Hero Banner is typically the first thing visitors see when they land on your store. It sets the tone for your brand and encourages visitors to explore further. Brave's Hero Banner supports both static images and autoplaying video backgrounds with sophisticated animation effects.
🖼️
Image or Video
Use high-quality images or looping background videos
📱
Mobile Optimized
Separate mobile images for perfect display on all devices
✨
Animation Effects
Reveal, zoom, and parallax effects on scroll
🎯
Flexible Positioning
9-point grid for precise content placement
When to Use
- Homepage — Make a bold first impression with your brand
- Collection landing pages — Introduce a collection with lifestyle imagery
- Campaign pages — Promote seasonal sales or new launches
- About page — Tell your brand story with visual impact
Quick Setup
1
Add the Hero Banner
In the Theme Editor, click Add section → Hero banner. Position it at the top of your page.
2
Upload your hero image
Click Select image and upload a high-quality image. Recommended size: 2400×1200px or larger for crisp display on all screens.
3
Add your content
Enter your Heading text and optional Subheading. Add a Button with text and link for your call-to-action.
4
Adjust the overlay
Enable Show overlay and adjust the opacity to ensure text is readable against your image.
💡
For the sharpest results, use images at least 2x the display size. A 2400px wide image displays perfectly on 1200px screens.
Section Settings
Media
| Setting | Type | Default | Description |
|---|---|---|---|
| Type | select | Image | Choose between Image or Video mode. Video requires MP4 format. |
| Desktop image | image | - | The main image for desktop and tablet. Recommended: 2400×1200px minimum. |
| Fit | select | Cover | 'Cover' fills the entire area (may crop edges). 'Contain' shows the full image (may show background). |
| Different mobile image | checkbox | false | Enable to upload a separate portrait-oriented image for mobile devices. |
| Mobile image | image | - | Optional portrait image for mobile. Recommended: 1080×1920px (9:16 ratio). |
| Video | video | - | Background video file (MP4 format). Keep under 10MB for performance. Videos autoplay muted. |
ℹ️
Video Tips: Background videos should be short loops (5-15 seconds), muted, and compressed. Use tools like HandBrake to reduce file size.
Content
| Setting | Type | Default | Description |
|---|---|---|---|
| Heading | richtext | Hero banner heading | The main title text. Supports bold, italic, and line breaks for styling. |
| Subheading | richtext | - | Optional supporting text below the heading. |
| Button text | text | - | Call-to-action button label. Leave empty to hide the button. |
| Button link | url | - | Where the button links to. Use collection, product, or page URLs. |
| Secondary button text | text | - | Optional second button for alternative actions. |
| Secondary button link | url | - | Link for the secondary button. |
Layout
| Setting | Type | Default | Description |
|---|---|---|---|
| Position | select | Center | Position content using a 9-point grid: Top Left, Top Center, Top Right, Center Left, Center, Center Right, Bottom Left, Bottom Center, Bottom Right. |
| Text alignment | select | Center | Align text within its container: Left, Center, or Right. |
| Account for header height | checkbox | false | Subtract the header height from the banner so content fits perfectly in the viewport. Enable when using with a transparent header. |
| Full viewport height | checkbox | true | Make the banner fill the entire screen height. Disable for a shorter banner. |
| Custom height | range | 70vh | Set a specific height when full viewport is disabled. Range: 40–90vh. |
Animation & Visuals
| Setting | Type | Default | Description |
|---|---|---|---|
| Image effect | select | Reveal | Animation effect for the background image as the page loads or scrolls. |
| Text effect | select | None | Animate text with a fade-up effect on page load. |
| Show overlay | checkbox | true | Add a dark overlay to improve text readability on busy images. |
| Overlay color | color | #000000 | Color of the overlay. Black works for most images. |
| Overlay opacity | range | 30% | Control the darkness of the overlay. 30-40% is usually ideal. Range: 0–80%. |
Image Effect Options
None
No animation, image displays immediately
RevealRecommended
Image slides in with a clipping effect on load
Zoom
Slow, subtle zoom effect as the page scrolls
Parallax
Image moves slower than scroll for depth effect
Performance
| Setting | Type | Default | Description |
|---|---|---|---|
| Primary hero (eager load) | checkbox | true | Enable if this is the first section on the page. Improves LCP score by prioritizing image loading. |
⚠️
Only enable Primary hero for the topmost section. Enabling it for below-fold sections actually hurts performance.
Use Case Examples
Brand Statement Hero
- Heading: "Crafted for Modern Living"
- Subheading: "Sustainable luxury, designed to last"
- Button: "Shop Collection" →
/collections/all - Position: Center
- Overlay: 35% opacity
- Effect: Reveal
Sale Announcement
- Heading: "Summer Sale"
- Subheading: "Up to 50% off everything"
- Button: "Shop Sale" →
/collections/sale - Position: Bottom Left
- Overlay: 40% opacity (for bold text visibility)
Video Background
- Type: Video
- Video: Looping lifestyle clip (10 seconds, under 8MB)
- Heading: Minimal text
- Position: Bottom Center
- Overlay: 20% opacity
Best Practices
Image Selection
- Use high-resolution images — At least 2400px wide for sharp display on retina screens
- Consider the focal point — Key subjects should be centered since edges may be cropped
- Leave space for text — Avoid busy areas where your heading will appear
- Match your brand — Lifestyle imagery creates emotional connection
Content Strategy
- One clear message — Don't overload with multiple ideas
- Strong CTA — Tell visitors exactly what to do next
- Keep text minimal — Let the image do the heavy lifting
- Create urgency — Time-limited offers drive action
Mobile Optimization
- Always test on mobile — Portrait orientation changes the composition
- Use separate mobile images — Reframe key subjects for vertical display
- Shorten headlines — Long text wraps awkwardly on small screens
- Increase overlay — Smaller screens need better contrast
💡
Pro tip: Take a screenshot of your hero on mobile and ask someone unfamiliar with your brand if they understand the message in 3 seconds.
Troubleshooting
Image looks blurry
- Upload a higher resolution image (2400×1200px minimum)
- Check that the original file isn't compressed too heavily
- Ensure the aspect ratio matches your banner dimensions
Text is hard to read
- Enable Show overlay if disabled
- Increase Overlay opacity to 35-45%
- Choose a position where the image is less busy
- Use contrasting text colors
Image crops incorrectly
- Set the Focal point in Shopify's media editor (when uploading)
- Use Fit: Contain instead of Cover
- Try a different Position for your content
- Upload a separate mobile image with correct framing
Video not playing
- Ensure the file is MP4 format with H.264 encoding
- Check file size (under 10MB recommended)
- Videos autoplay muted—they cannot have sound
- Some browsers block autoplay on slow connections
Hero appears behind the header
- Enable Account for header height
- Check that your header is set to Overlay on hero
- Verify header z-index isn't conflicting
Animation not playing
- Check if Image effect is set to "None"
- Animations may be disabled if user has Reduced motion enabled
- Verify JavaScript is enabled in the browser