Hero Banner
The Hero Banner section enables merchants to create immersive, high-impact visual experiences using fully customizable slides. With support for responsive images, advanced content controls, flexible button configurations, multiple navigation styles, auto-rotation, and per-slide design customization, it helps drive engagement and highlight key products, collections, and promotions.
Auto-Rotate Slides
Automatically cycles through banner slides without requiring user interaction. This helps highlight multiple promotions, collections, or announcements within a single banner area.
Change Slides Every
Controls the delay between slide transitions when auto-rotation is enabled. A shorter duration creates a more dynamic experience, while a longer duration allows users more time to read content.
Desktop Height
Defines the overall height of the Hero Banner on desktop devices. Different height options allow merchants to prioritize either visual impact or content visibility.
Mobile Height
Controls the banner height specifically on mobile devices. This helps optimize the viewing experience while preserving valuable screen space.
Color Scheme
Applies one of the predefined theme color schemes to the Hero Banner. This ensures visual consistency with the rest of the storefront.
Pagination Style
Controls how slide navigation indicators are displayed. Merchants can choose the style that best matches their store design and user experience goals.
Minimal
Hides all navigation controls for a clean and distraction-free appearance. Slides can still change automatically if auto-rotation is enabled.
Arrows
Displays only previous and next navigation arrows, allowing users to manually browse between slides.
Bars
Displays a thin progress-style bar beneath the banner. The active slide is visually indicated within the bar sequence.
Dots
Displays circular dot indicators beneath the banner, allowing users to identify and navigate between slides.
Combine Both
Displays both navigation arrows and dot indicators simultaneously, providing maximum visibility and navigation control.
Pagination Color
Allows customization of the navigation control color. This helps improve visibility and maintain branding consistency.
Reduce Motion
Disables autoplay and limits animation effects for accessibility purposes. This setting helps create a more comfortable browsing experience for motion-sensitive users.
Slide Animation
Controls the transition effect used when moving between slides. Different animation styles can create either a subtle or more dynamic visual experience.
Top & Bottom Padding
Adds spacing above and below the Hero Banner section. These settings help create proper visual separation between sections.
Slide Block
Each Hero Banner can contain up to five individual slides. Every slide can be customized independently with its own content, images, styling, and buttons.
Hide Content Box
Removes all text and button content from the selected slide. This is useful when showcasing imagery without any content overlay.
Heading
Displays the primary message or title for the slide. Headings are typically used to highlight collections, promotions, or seasonal campaigns.
Description
Provides supporting information below the heading. This area can be used to add context, promotional messaging, or product highlights.
Text Alignment
Controls the horizontal alignment of slide content. This allows merchants to position text in a way that best complements the selected imagery.
Text Transformation
Applies formatting such as capitalization or uppercase styling. This helps maintain consistent typography throughout the storefront.
Desktop Image
The primary banner image displayed on desktop devices. High-quality images are recommended for the best visual impact.
Mobile Image
A dedicated image optimized for mobile screens. This ensures important visual elements remain visible on smaller devices.
Image Alt Text
Provides alternative text for accessibility and SEO purposes. Search engines and screen readers use this information to better understand the image content.
Image Background Position
Controls which portion of the image remains visible when cropping occurs. This helps keep important content within the visible area.
Heading Text Size
Adjusts the size of the slide heading independently for each slide. Larger headings create stronger visual emphasis.
Text Box Background Color
Sets the background color of the content container. This can improve readability when text appears over busy images.
Text Color
Controls the color of all slide text content. Proper contrast helps improve readability and accessibility.
Text Protection
Applies a dark overlay to the image behind the content area. Increasing this value improves text visibility on bright or detailed images.
Desktop Content Position
Determines where the content box appears on desktop devices. This allows merchants to balance text placement with image composition.
Mobile Content Position
Controls content placement specifically on mobile devices. Different positioning options help optimize the experience across screen sizes.
Show Content Under Banner
Moves the content area below the image instead of displaying it as an overlay. This option provides a cleaner layout and maximizes image visibility.
Primary Button
The primary button is used to direct visitors toward the most important action on the slide.
Show Primary Button
Displays or hides the primary call-to-action button.
Button Label
Defines the text shown on the button.
Button Link
Specifies the destination URL when the button is clicked.
Button Target
Determines whether the link opens in the current tab or a new browser tab.
Button Text Color
Controls the color of the button label.
Button Background Color
Sets the background color of the button.
Button Style
Choose between Solid, Outline, or Text styles to match the store design.
Button Size
Controls the overall size of the button.
Show Arrow Icon
Displays an arrow icon to provide additional visual emphasis.
Secondary Button
The secondary button provides an additional call-to-action and supports the same configuration options as the primary button. It can be used to promote a secondary destination, collection, or campaign without competing with the primary action.
Section Settings
Configuration
| Setting | Type | Description |
|---|---|---|
| Auto-rotate slides | checkbox | Automatically cycles through banner slides. |
| Change slides every | range | Controls the delay between slide transitions in seconds. |
| Desktop height | select | Sets the banner height on desktop devices. |
| Mobile height | select | Sets the banner height on mobile devices. |
Design
| Setting | Type | Description |
|---|---|---|
| Color scheme | select | Applies a predefined color scheme to the hero banner. |
| Pagination style | select | Controls how slide navigation elements appear. |
| Pagination color | color | Sets the color used for pagination controls. |
| Reduce motion | checkbox | Disables autoplay and reduces animation effects for accessibility. |
| Slide animation | select | Controls the transition effect between slides. |
| Top padding | range | Adds spacing above the section. |
| Bottom padding | range | Adds spacing below the section. |
Blocks
Slide
The Hero Banner supports up to 5 slides per section.
Each slide can contain its own content, images, design settings, and buttons.
General
| Setting | Type | Description |
|---|---|---|
| Hide content box | checkbox | Hides all text and button content for the selected slide. |
Content
| Setting | Type | Description |
|---|---|---|
| Heading | richtext |
|
| Main heading displayed on the slide. |
|
|
| Description | richtext |
|
| Supporting text shown below the heading. |
|
|
| Text align | select |
|
| Controls horizontal alignment of slide content. |
|
|
| Text transform | select |
|
| Applies text formatting such as capitalize, uppercase, or lowercase. |
|
|
Images
| Setting | Type | Description |
|---|---|---|
| Desktop image | image_picker |
|
| Banner image displayed on desktop devices. |
|
|
| Mobile image | image_picker |
|
| Banner image displayed on mobile devices. |
|
|
| Image alt text | text |
|
| Alternative text used for accessibility and SEO purposes. |
|
|
| Image background position | select |
|
| Controls how the image is positioned within the banner area. |
|
|
Design
| Setting | Type | Description |
|---|---|---|
| Heading text size | range |
|
| Controls the size of the slide heading. |
|
|
| Text box background color | color |
|
| Sets the background color of the content container. |
|
|
| Text color | color |
|
| Sets the text color for slide content. |
|
|
| Text protection | range |
|
| Adds a dark overlay to improve text readability over images. |
|
|
| Desktop content position | select |
|
| Controls content placement on desktop devices. |
|
|
| Mobile content position | select |
|
| Controls content placement on mobile devices. |
|
|
| Show content under banner | checkbox |
|
| Moves the content area below the banner image instead of overlaying it. |
|
|
Primary Button
| Setting | Type | Description |
|---|---|---|
| Show primary button | checkbox |
|
| Displays the primary call-to-action button. |
|
|
| Button label | text |
|
| Text displayed on the primary button. |
|
|
| Button link | url |
|
| Destination URL for the primary button. |
|
|
| Button target | select |
|
| Choose whether the link opens in the same tab or a new tab. |
|
|
| Button text color | color |
|
| Sets the text color of the button. |
|
|
| Button background color | color |
|
| Sets the button background color. |
|
|
| Button style | select |
|
| Choose between Solid, Outline, or Text button styles. |
|
|
| Button size | select |
|
| Controls the button size. |
|
|
| Show arrow icon | checkbox |
|
| Displays an arrow icon inside the button. |
|
|
Secondary Button
The secondary button contains the same settings as the primary button and can be used to provide an additional call-to-action.
| Setting | Type | Description |
|---|---|---|
| Show secondary button | checkbox |
|
| Displays a secondary call-to-action button. |
|
|
| Button label | text |
|
| Text displayed on the secondary button. |
|
|
| Button link | url |
|
| Destination URL for the secondary button. |
|
|
| Button target | select |
|
| Choose whether the link opens in the same tab or a new tab. |
|
|
| Button text color | color |
|
| Sets the text color of the button. |
|
|
| Button background color | color |
|
| Sets the button background color. |
|
|
| Button style | select |
|
| Choose between Solid, Outline, or Text button styles. |
|
|
| Button size | select |
|
| Controls the button size. |
|
|
| Show arrow icon | checkbox |
|
| Displays an arrow icon inside the button. |
|
Limits
| Item | Value |
|---|---|
| Maximum slides per section | 5 |
| Desktop image support | Yes |
| Mobile image support | Yes |
| Primary button support | Yes |
| Secondary button support | Yes |
| Independent slide styling | Yes |
| Auto-play support | Yes |
| Multiple pagination styles | Yes |
Feature Highlights
| Feature | Description |
|---|---|
| Multi-Slide Support | Display up to 5 fully customizable promotional slides. |
| Responsive Images | Use dedicated desktop and mobile images for optimal presentation. |
| Advanced Positioning | Control content placement independently across devices. |
| Flexible Navigation | Choose from multiple pagination and navigation styles. |
| Call-to-Action Buttons | Configure primary and secondary buttons with custom styling. |
| Accessibility Controls | Reduce motion and autoplay effects for accessibility compliance. |
| Custom Styling | Customize typography, colors, overlays, and button appearance. |