# 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
#### Image recommendations
Banner images automatically scale to fill the full width of a user’s browser, regardless of screen size. Because of this flexibility, there are no fixed dimensions. Banner images may often be cropped based on the user’s screen width and height.
Use the guidelines below to choose image dimensions that work well across common devices and vertical height settings:
| Vertical height | Desktop (Macbook Air 13) | Mobile (iPhone 14 Pro Max ) |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------ | --------------------------- |
| Extra small | 3000 x 700 | 860 x 500 |
| Small | 3072 x 900 | 860 x 700 |
| Medium | 3072 x 1100 | 860 x 900 |
| Large
The banner height will expand to 90% of the user's screen height, minus 100px.
| 3072 x 2774 | 860 x 1476 |
| Extra large
The banner height will expand to 100% of the user's screen height, minus 100px.
| 5120 x 3108 | 860 x 1664 |
| Image height
If you select the Image height option, the banner will display the full height of the image you upload—no cropping will occur. This setting is useful when you want to preserve the entire image layout.
| | |
### 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