Discount badges
Show a discount badge on product pages and in product cards
A discount badge is a small pill that tells shoppers about an offer before they read the details, for example "UP TO 20% OFF" or "BUY 2 GET 1". It comes from the offer itself, so it always matches what the checkout gives.
Badges on product cards: the Product card badges embed
To show the badge on every product card in collections, search results and the home page, use the Product card badges app embed. It works on any theme, and you do not place anything by hand.
- In the setup guide, click the button next to the badge embed. It opens your theme editor with Product card badges switched on under App embeds.
- Press Save.
- In the embed's settings, choose the position (top left, top right or below the price), the text colour and the badge text.
Each card shows the highest-priority offer for that product. Scheduled, ended and draft offers show no badge. If your theme already has its own Sale badge in that corner, the badge moves to the other corner so the two do not overlap.
Badge on the product page: the Discount Badge block
- In the setup guide, click Add to theme next to the badge block, or open your theme editor and add the Discount Badge app block.
- Place it near the product title or price.
- Themes whose product cards accept app blocks (such as Horizon) also let you add this block inside the card by hand. You do not need that if the embed is on.
- Block settings: Fallback colour, Alignment, Show claimed progress (a "claimed" bar for offers with a claim limit) and Vertical margin.
Choose what the badge says
Open the offer and go to Appearance:
- Badge style - Discount only (the pill), Discount + countdown (adds a timer to the end date) or Hide badge.
- Badge - an optional phrase next to the pill, such as "Limited Time Deal", or Custom text.
- Badge colour - the pill colour for this offer.
The pill states the best discount the offer gives. On a tiered offer it reads "UP TO", so shoppers are not promised the top tier at the first quantity.
Things to know
- A countdown needs an end date. Set one under Schedule, or the countdown option is not offered.
- Phrases that promise a deadline ("Ends Soon") show a warning on offers without an end date.