# Discount banner

### Section overview

The Discount Banner section displays a promotional discount code that customers can easily copy to their clipboard with a single click. It provides a simple yet effective way to highlight active promotions on your store.

#### Common use cases

* Displaying limited-time promotional offers
* Featuring loyalty or referral discount codes
* Highlighting seasonal sale codes
* Promoting first-purchase discounts for new customers

#### Usage tips

* Keep the promotional text concise and clear about the offer's value
* Place this section near the top of the page for maximum visibility
* Use contrasting colors to make the coupon section stand out
* Consider using this section on specific collection pages where the discount applies
* Avoid using multiple coupon banners on the same page to prevent confusion

Mobile responsiveness considerations:

* The section automatically adjusts for mobile viewing with a stacked layout
* Input fields and buttons resize appropriately on smaller screens
* You can opt to show/hide this section on mobile using the visibility setting

### Section settings

| Setting          | Description                                                                            |
| ---------------- | -------------------------------------------------------------------------------------- |
| Spacing top      | Controls the padding space above the section (in pixels)                               |
| Spacing bottom   | Controls the padding space below the section (in pixels)                               |
| Color scheme     | Determines the background and text color combination for the section                   |
| Color border     | Sets the color intensity of the section's border                                       |
| Button color     | Defines the style and color of the "Copy code" button                                  |
| Border position  | Controls where borders appear around the section (top, bottom, both, or none)          |
| Layout alignment | Sets the horizontal alignment of content (left, center, or right)                      |
| Visibility       | Controls which device types the section appears on (all, mobile only, or desktop only) |

### Block settings

#### Code

This block defines the Discount code text and associated content that appears in the banner. It allows for a single coupon code display with customizable text and button label.

Block limit: 1

| Setting      | Description                                                     |
| ------------ | --------------------------------------------------------------- |
| Coupon text  | The actual discount code customers will copy                    |
| Content      | Descriptive text that appears before the discount code          |
| Button label | The text displayed on the copy button (defaults to "Copy code") |