Skip to content
Banner
Section overview
The Banner section is a versatile component that displays a background image or video with overlaid content. It provides a highly customizable hero area that can be used to highlight promotions, welcome messages, or important announcements.
Common use cases
- Homepage hero banners to showcase new collections or products
- Promotional announcements with countdown timers or discount codes
- Newsletter signup areas with a compelling background image
- Category or collection introduction banners
Usage tips
- Use high-quality images that contrast well with your text overlay for better readability
- Keep text content concise and focused on a single call-to-action
- For mobile, consider using a dedicated mobile image with different proportions
- When using video backgrounds, keep them short and ensure they don't distract from the main message
- Use the color scheme settings to ensure text remains readable against your background image
Section settings
| Setting | Description |
|---|---|
| Url | The link for the entire banner when clicked |
| Image background desktop | The background image shown on desktop devices |
| Image background mobile | The background image shown on mobile devices |
| Video background | Optional video to display in the banner background |
| Show image | Controls whether to display the background image |
| Show entire image | Shows the full image rather than cropping to fill available space |
| Show video background mobile | Controls whether video background displays on mobile devices |
| Y spacing | Sets the vertical height of the banner |
| Color scheme | The color palette applied to the background |
| Color text | Controls the text color throughout the banner |
| Color border | Sets the color of any borders used |
| Enable gradient | Adds a gradient overlay to improve text visibility |
| Enable background overlay | Adds a background to text content for better readability |
| Border position | Controls where border styling appears |
| Y alignment | Sets vertical alignment of content within the banner |
| X alignment | Sets horizontal alignment of content within the banner |
| Enable margin | Adds horizontal margin to the banner content |
| Enable border margin | Adds margin around borders |
| Enable max width | Limits the width of text content for better readability |
| Visibility | Controls whether banner appears on desktop, mobile, or both |
| Account visibility | Controls when the banner is displayed based on customer login status (always, logged out, logged in but not approved, logged in and approved). Available in theme version 2.0.1 or later. |
Block settings
Heading
Displays a prominent headline within the banner.
- Block limit: 1
| Setting | Description |
|---|---|
| Content | The heading text to display |
Image
Adds an image element within the banner content area.
- Block limit: 3
| Setting | Description |
|---|---|
| Image | The image to display |
| Image height | Controls the height of the image in pixels |
Content
Adds rich text content to the banner.
- Block limit: 3
| Setting | Description |
|---|---|
| Content | Rich text content to display |
Buttons
Adds up to two call-to-action buttons.
- Block limit: 1
| Setting | Description |
|---|---|
| Button label | Text for the primary button |
| Button url | Link for the primary button |
| Color button | Style for the primary button |
| Secondary button label | Text for the secondary button |
| Secondary button url | Link for the secondary button |
| Secondary color button | Style for the secondary button |
Newsletter
Adds an email signup form within the banner.
- Block limit: 1
| Setting | Description |
|---|---|
| Content | Descriptive text above the signup form |
| Button label | Text for the subscribe button |
| Disclaimer | Optional legal text or privacy information |
| Success | Message shown after successful signup |
Countdown
Displays a countdown timer to a specific date.
- Block limit: 1
| Setting | Description |
|---|---|
| Countdown date | The target date for the countdown |
| Content | Text content to accompany the countdown |
Discount
Displays a discount code that customers can copy.
- Block limit: 1
| Setting | Description |
|---|---|
| Code | The discount code to display |
Search
Adds a search input field within the banner.
- Block limit: 1