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
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
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")
Last updated
Was this helpful?