Banner

Section overview

The Banner section is a versatile full-width component that displays a background image or video with overlaying text content, providing a visually impactful way to highlight information or promotions.

Common use cases

• Hero sections for homepages with prominent messaging and call-to-action buttons

• Promotional banners for sales, special offers, or announcements

• Collection introductions with descriptive text and navigation options

• Full-width imagery with brand statements

Usage tips

• Choose images with good contrast for text overlay visibility

• Keep text content concise and focused for maximum impact

• Consider mobile display - text that appears well-spaced on desktop may look crowded on mobile

• When using video backgrounds, ensure they aren't distracting from your main message

• If enabling header overlap, test thoroughly to ensure text remains visible against your header

Section settings

Setting	Description
Url	Links the entire banner section to a page or product when clicked
Image background desktop	Background image that appears on desktop screens
Image background mobile	Background image that appears on mobile screens
Video background	Background video for the banner
Show image	Toggle to display or hide the background image
Show video on mobile	Toggle to display video background on mobile devices
Y spacing	Controls the vertical height of the banner
Color scheme	Sets the color scheme for the banner
Text color	Forces light or dark text, or uses the default from color scheme
Border color	Sets the color of the border
Enable gradient	Adds a gradient overlay to help text visibility
Enable background overlay	Adds a background behind text content
Border position	Sets where borders appear (top, bottom, or both)
Y alignment	Controls vertical alignment of content (top, middle, bottom)
X alignment	Controls horizontal alignment of content (left, center, right)
Enable header overlap	Allows the banner to extend under the header
Enable margin	Adds horizontal margin to the content
Enable border margin	Adds padding inside the border
Enable max width	Limits the width of text content
Visibility	Controls on which devices the banner appears

Block settings

Heading

Adds a large heading text to the banner.

• Block limit: 1

Setting	Description
Content	The heading text
Font size mobile	Font size in pixels on mobile devices
Font size desktop	Font size in pixels on desktop devices

Image

Adds an image to the banner content area.

• Block limit: 3

Setting	Description
Image	The image to display
Image height	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 primary, secondary, and optional floating buttons to the banner.

• Block limit: 1

Setting	Description
Button label	Text for the primary button
Button url	Link target for the primary button
Color button	Style for the primary button
Secondary button label	Text for the secondary button
Secondary button url	Link target for the secondary button
Secondary color button	Style for the secondary button
Floating button label	Text for the cursor-following floating button
Floating button url	Link target for the floating button
Floating color button	Style for the floating button

Newsletter

Adds an email signup form to the banner.

• Block limit: 1

Setting	Description
Content	Text explaining the newsletter
Button label	Text for the subscribe button
Disclaimer	Additional information about the signup
Success message	Text shown after successful subscription

Countdown

Adds a countdown timer to the banner.

• Block limit: 1

Setting	Description
Countdown date	Target date for the countdown (MM/DD/YYYY)
Content	Text explaining the countdown

Discount

Adds a discount code display with copy functionality to the banner.

• Block limit: 1

Setting	Description
Discount code	The promotional code to display

Search

Adds a search form to the banner.

• Block limit: 1