Hero banner
This section offers high flexibility to create visually engaging hero areas with layered content, motion elements, and strong branding.
The Hero banner is a high-impact section used to showcase key visuals, promotions, or brand messaging at the top of a page. It supports images, videos, and flexible content positioning for maximum visual appeal.
1. Our guide to set up a Hero banner section:
Steps:
In the theme editor, click Add section.
Locate Hero banner.
Click Save.

2. Section settings

Media:
Image / Mobile image: Upload banner images for desktop and mobile.
Video: Upload a video. Video overrides image if both are set.
Image link: Make the banner clickable.
Media overlay opacity: Adjust overlay darkness for better text readability.
Desktop banner height: Small, Medium, Large or Custom.
Custom height: Adjust from 250px to 850px. Applies only when Custom is selected.
Adapt to image size: Keeps original image ratio (overrides height settings, not applied to video).
Content settings:
Description: Add supporting text.
Content width: Control content container width.
Button label & Button link: Add label and assign link for CTA button.
Use outline button style: Switch between solid and outline styles.
Content position: Place content anywhere on the banner (top/middle/bottom + left/center/right).
Colors: Customize colors specifically for this section (overrides theme defaults if set):
Text color
Button label color
Button background color
Button outline color
Mobile layout
Mobile banner height: Adjust height specifically for mobile devices from 150px to 750px.
Mobile content alignment: Controls how content is aligned on mobile screens.
3. Heading block settings

Heading: Main title displayed on the banner.
Font size scale: Scales the heading relative to the base font size for stronger visual impact.
Heading position: Allows independent positioning from other content elements.
Block spacing:
Top padding: Adds spacing from the top edge. Only applies when position is set to Top.
4. Scrolling text block settings

First / Second / Third text: Add looping scrolling messages.
Text size: Adjust the size of the scrolling text.
Text position: Choose the position of scrolling text on the banner.
Direction: Defines the scrolling direction of content across the banner.
Speed: Controls how fast the announcements move: Slow, Normal or Fast.
Block spacing:
Top padding: Adds spacing from the top edge. Only applies when position is set to Top.
5. Logo image block settings

Image: Upload logo for desktop.
Mobile image: Upload a separate logo for mobile display.
Last updated
Was this helpful?