Coupon code bar
Show a discount code inside the bar with a one-click copy button.
The coupon code feature displays your discount code inside the announcement bar, with a copy button next to the call to action so customers can grab it in one click.
Coupon codes are available on Simple announcement only. Switch the announcement type if you don't see the card.
Turn it on
Open the announcement and go to the Content tab.
Scroll to the Coupon / Discount code card.
Switch the toggle on. The field is pre-filled with DISCOUNT10.
Replace it with your real Shopify discount code.
Click Save.
Show the code inside your title
Use the {{code}} token anywhere in your Title and it will be replaced with the code on the storefront.
In Announcement Settings, write a title that includes {{code}}.
For example: Take 10% off with code {{code}}
Click Save and check the live preview.
On the storefront that renders as Take 10% off with code DISCOUNT10.
If you leave {{code}} out of the title, the code still appears — it renders alongside the CTA with its own copy button.
The copy button
A copy button appears beside the call to action. When a customer clicks it, the code goes to their clipboard and the button briefly shows Copied!.
Style the coupon
Colors for the coupon chip live on the Design tab under Coupon Code:
- Coupon background color — defaults to transparent
- Coupon text & border color — inherits the bar's color if you leave it blank
- Border radius
See Coupon design.
Create the discount in Shopify first
This setting only displays a code. It does not create one. Create the discount under Discounts in your Shopify admin, then type the exact same code here — including capitalization.
Tip
Test the code at checkout after publishing. A visible code that doesn't apply is worse than no code at all.