Coupon design
Style the discount code chip shown inside the bar.
The Coupon Code card on the Design tab styles the code chip. It appears once you've enabled a coupon code on the Content tab.
Don't see the card? Turn on Coupon / Discount code on the Content tab first. See Coupon code bar.
Style the coupon chip
Open the announcement and go to the Design tab.
Find the Coupon Code card.
Set Coupon background color. Leave it blank for a transparent background.
Set Coupon text & border color. Leave it blank and it inherits the bar's color.
Set Border radius to round the chip's corners.
Click Save.
Two looks that work
Outlined — leave the background transparent and set only the text & border color. The code reads as a dashed-ticket style chip that sits lightly on the bar.
Filled — set a background color that contrasts with the bar, and a text color that contrasts with the chip. Higher impact, more visual weight.
Tip
The coupon chip and the CTA button both compete for attention. Make one of them the loud element and keep the other quiet — usually the button, since the chip's job is to be readable rather than clickable.
Check the code is legible at a glance. Customers often retype these by hand at checkout, and a low-contrast code means mistyped codes and abandoned carts.