# 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                                                                                                                               |
| Account visibility           | Controls when the banner is displayed based on customer login status (always, logged out, logged in but not approved, logged in and approved). Available in theme version 2.0.1 or later. |

### 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