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