Skip to main content
The Hero banner section creates prominent visual displays at the top of pages with support for images, videos, and slideshows. It features advanced layout options including 50/50 split, separate desktop and mobile media, and transparent header integration when positioned as the first section. Hero banner section overview

​
What this section controls

This section manages large banner areas with the following capabilities:
  • Multiple banner slides with carousel rotation
  • Transparent header overlay when placed first on a page
  • Desktop and mobile-specific media for optimized display
  • Flexible content layouts from full-width to 50/50 split
  • Video backgrounds with Shopify-hosted or external sources

​
How the Hero banner works

The Hero banner uses a block-based slide system where each slide represents one complete banner. With multiple slides, an automatic carousel is created. When positioned as the first section on a page, the hero can enable a transparent header that overlays the banner media.

​
Getting started

1

Open Theme Customizer

From Shopify admin, access the Theme Customizer.
2

Add Hero banner section

Add the Hero banner section to your page, preferably as the first section.
3

Add slides

Click “Add block” and select “Slide” to create banner content.
4

Configure media

Upload images or videos for both desktop and mobile displays.
Hero banner section in Theme Customizer

​
Section settings

Section settings control the overall behavior of the hero banner and apply to all slides within the section.

​
Enable transparent header

When activated, the header becomes transparent and overlays the hero banner content.
The transparent header only works when the Hero banner is the first section on the page. This allows navigation to sit directly over the banner media.When to use:
  • Homepage hero sections for maximum visual impact
  • Landing pages with strong visual media
  • Campaign pages with branded imagery
When to avoid:
  • When header navigation needs strong visibility
  • With busy background images lacking clear areas for text
Adds a semi-transparent overlay behind the header navigation when transparent header is enabled.This improves text readability over varied background images. Enabled by default when transparent header is active.
Ensure sufficient contrast between header navigation and banner media. Use the Header menu color setting in slide settings to adjust text color.
Transparent header integration

​
Block settings

Each slide block represents one complete banner with its own layout, content, and media settings.
Controls how content and media are arranged within the slide.
Content and media occupy the entire banner area with text overlaid on the media.Best for: Image-focused designs with centered text overlays
Content takes 70% of the width, media takes 30%.Best for: Text-heavy announcements with supporting imagery
Content and media each occupy exactly half the banner width.Best for: Balanced presentation of product and description
Content takes 30% of the width, media takes 70%.Best for: Image-focused designs with minimal text
Content and media are divided vertically with clear visual separation.Best for: Contrasting sections or distinct content areas
Banner layout options comparison

​
Color scheme

Select the background and text color scheme for the slide content area.

​
Header menu color

When transparent header is enabled, this setting controls the color of header navigation text for visibility over the banner media.

​
Best practices

Position strategically

Place the Hero banner as the first section to enable transparent header integration for maximum visual impact.

Optimize media

Always provide mobile-specific images. Use vertical orientation for mobile and horizontal for desktop.

Test contrast

When using transparent headers, ensure header navigation is readable against all banner media. Adjust header menu color as needed.

Limit slides

Keep slideshow to 2-4 slides maximum. More slides reduce effectiveness and increase cognitive load.

Timing matters

Set autoplay interval to at least 5-6 seconds for slides with text content to ensure readability.

Layout selection

Use 50/50 or 70/30 layouts when content needs equal emphasis. Use full-width for image-focused designs.

Video performance

Prefer Shopify-hosted videos over external embeds for better performance and reliability.

Mobile-first design

Design slides with mobile in mind. Use larger text, simplified layouts, and vertical media orientation.

​
Common use cases

Use 100svh height with full-width layout. Enable transparent header with overlay. Add a prominent title, subtitle, and filled button. Use high-quality lifestyle imagery with good contrast.
Create 2-3 slides showcasing different products. Use 75svh height and 50/50 layout for balanced content and imagery. Set autoplay to 6 seconds with navigation arrows enabled.
Single slide with full-width layout at 100svh. Use video background showing product in use. Add countdown timer in subtitle area, bold title, and outlined button.
Use 70/30 layout with category description on left and product imagery on right. Set height to auto to accommodate text. Add category-specific button linking to collection page.
Provide separate vertical images for mobile. Use centered, bottom-aligned content. Keep title short (4-6 words) and use filled button for clear call-to-action.

Header section

Configure header settings and transparent header behavior