Skip to content
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") |