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

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