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")