The hero section for your homepage with 4 variants and flexible blocks.
Banner (Hero)
The Banner section is the first impression of your store. It displays a full-screen image or video with overlaid content. It is typically the first section of your homepage.
The 4 variants
The Banner section offers 4 display modes. You choose the variant in the section's Layout setting.
Hero
The classic mode: a full-screen image or video with text content overlaid.
This is the most commonly used mode for homepages. The dark overlay makes the text readable on any image.
Split
The image takes up one half of the screen, the text content the other half. Perfect for storytelling.
Stacked
Content is stacked vertically: text above or below the image.
Flexible Columns
Advanced mode with 2 or 3 columns whose width you control individually. Ideal for creative layouts.
Image & Video
Background image
You can set a desktop image and a mobile image separately.
and on mobile (cropped portrait image) showing that the two images are different)
Background video
Instead of an image, you can use a video that loops silently in the background.
Height
The height determines the vertical space the banner occupies:
| Option | Approximate height | Recommended usage |
|---|---|---|
| Small | ~30vh | Interior pages, secondary banners |
| Medium | ~50vh | Versatile use |
| Large | ~70vh | Homepages, brand pages |
| Full screen | 100vh | Maximum impact, main homepage |
| Adapt | Adapts to the image ratio | When the image should be displayed without cropping |
Overlay
The overlay is a semi-transparent dark veil over the image that improves text readability.
Content position
You control where the text is positioned in the banner using a 3x3 grid system:
The position is configurable separately for desktop and mobile, allowing you to optimize each experience.
Curved edge
The Curved media edge option adds a rounded edge at the bottom of the image, creating a smooth transition to the next section.
Blocks
Blocks are the content elements you add to the banner. Drag and drop to reorder them.
Heading (title)
The main title of your banner. Choose the level (H1, H2) and the size.
Text (paragraph)
Descriptive text below the title. Keep it short: 1-2 sentences maximum.
Button (CTA)
Call-to-action button. Choose from the theme's 3 button styles and set the link.
and "Learn more" (style 3, outline))
Timer (countdown)
Displays a countdown timer directly in the banner. Uses the date from the global timer or a custom date.
Icon List
Icon list with short text. Perfect for selling points (free shipping, warranty, etc.).
Featured Product
A mini product form integrated directly into the banner. The visitor can add to cart without leaving the section.
Subheading
Small text above the main title, often in uppercase. E.g.: "NEW", "EXCLUSIVE", "LIMITED EDITION".
Configuration examples
Classic homepage
- Variant: Hero
- Height: Full screen
- Overlay: 35%
- Blocks: Subheading + Heading + Text + Button
- Result: Maximum impact, the visitor is immersed
Promo with urgency
- Variant: Hero
- Height: Medium
- Palette: Accent (vivid background)
- Blocks: Heading + Timer + Button
- Result: Creates urgency with the countdown
Product storytelling
- Variant: Split
- Blocks: Subheading + Heading + Text + Button + Icon List
- Result: The visitor understands the product and its benefits