Skip to content
Alternative banner
Section overview
The Banner Alternative section displays a side-by-side layout with an image on one side and content (headings, text, and buttons) on the other. On mobile, it stacks with the image on top and content below.
Common use cases
- Creating feature highlights with explanatory text and call-to-action buttons
- Showcasing product benefits with supporting imagery
- Creating promotional announcements with supporting visuals
- Building welcome sections with introductory content for store visitors
Usage tips
- Use high-contrast images that complement the text overlay for better readability
- Keep content concise and focused on a single message or call-to-action
- Consider mobile appearance when setting content alignment and spacing
- Adjust the content width setting based on your content length and image importance
Section settings
| Setting | Description |
|---|---|
| Image | The background image that appears on desktop and mobile |
| Color scheme | The color theme for the section background and text |
| Text color | Override the default text color from the color scheme |
| Border color | Choose between subtle or strong border colors |
| Border position | Position of borders around the section (top, bottom, both, or none) |
| Content width | Percentage width of the content area relative to the section (10-90%) |
| Image position | Position the image on the left or right side of the content |
| Height | Control the vertical height/spacing of the section |
| Vertical alignment | Align content to the top, middle, or bottom of the section |
| Horizontal alignment | Align content to the left, center, or right of the section |
| Visibility | Control whether the section appears on all devices, mobile only, or desktop only |
Block settings
Heading
This block adds a primary heading to the section.
- Block limit: 1
| Setting | Description |
|---|---|
| Content | The heading text to display |
| Top spacing | Amount of space (in px) to add above the heading |
| Bottom spacing | Amount of space (in px) to add below the heading |
Content
This block adds formatted text content to the section.
- Block limit: 3
| Setting | Description |
|---|---|
| Content | Rich text content to display |
| Top spacing | Amount of space (in px) to add above the content |
| Bottom spacing | Amount of space (in px) to add below the content |
Buttons
This block adds primary and secondary buttons to the section.
- Block limit: 1
| Setting | Description |
|---|---|
| Button color | Style of the primary button (primary, secondary, tertiary, neutral, or plain) |
| Button label | Text displayed on the primary button |
| Button URL | The link destination when the primary button is clicked |
| Secondary button color | Style of the secondary button (primary, secondary, tertiary, neutral, or plain) |
| Secondary button label | Text displayed on the secondary button |
| Secondary button URL | The link destination when the secondary button is clicked |
| Top spacing | Amount of space (in px) to add above the buttons |
| Bottom spacing | Amount of space (in px) to add below the buttons |