Product Badges
Sale, Sold out, New and your own custom labels on every product card and the product page gallery — computed from real shop data, styled from one settings group, with nothing to install and nothing invented.
Where badges appear
Badges render on product cards wherever cards appear — collection pages and the homepage featured collection today, and any surface built on the product card in future — and on the product page gallery, so the badge that earned the click is still there after it. There's nothing to wire up per section: one engine decides which badges a product has earned and every surface shows them.
On the product page
The gallery shows the same badges as the card, in the same style and colours, but with its own placement controls — a product page has room a phone-width card doesn't. In the Product information section's gallery settings:
| Setting | Options |
|---|---|
| Show badges on the gallery | On by default; turn off to keep product pages badge-free while cards keep theirs |
| Badge position | Top left or top right, per device. Top corners only — in the layouts that show every image at once, a bottom corner would sit below the images rather than on them |
| Maximum badges | 1–6, set separately for desktop and mobile, independent of the card maximums |
Badges keep to their corner while the mobile gallery is swiped, and they never cover the zoom button or the arrows — those always stay on top and clickable. One deliberate difference from cards: the product page shows only whole-product badges. Stock messages for the selected variant ("Only 3 left") belong to the Inventory status block in the product information column, which updates as the shopper picks a variant — a gallery badge can't, so the theme never puts one there to go stale.
The built-in badges
| Badge | When it shows | Default |
|---|---|---|
| Sold out | Every variant of the product is unavailable | On |
| Sale | Any variant is priced below its compare-at price | On |
| New | The product was published within your chosen window (5–90 days) | Off |
Each built-in badge has its own enable switch and its own background and text colour pickers. Leave a colour unset and it inherits from your theme palette — Sale uses your Sale colour, Sold out your Light text colour, New your Accent colour — so badges automatically follow a palette change.
Why New starts off: on a freshly imported catalogue every product counts as newly published, so the badge would appear on everything at once. Turn it on once your catalogue has some age, and pick the window that matches your release rhythm.
The Sale badge label
The Sale badge can state the saving instead of just announcing one. Sale badge label, under the Sale badge's settings, has three formats:
| Format | Renders |
|---|---|
| Sale (default) | The word "Sale" — or whatever you've set it to in Edit default theme content |
| Percentage saved | "Save 30%", worked out from the compare-at price |
| Amount saved | "Save £5", in your store's currency format |
The figure is a claim about your prices, so the theme is careful with it:
- It never overstates. The saving is worked out per variant, and when variants differ the badge takes the biggest saving any single variant offers and says so: "Up to 30% off". It never combines the highest compare-at price with the lowest selling price — those can be two different variants, which would advertise a discount no shopper can get.
- The percentage rounds down. A 29.6% saving reads "Save 29%", never "Save 30%".
- It falls back cleanly. If no genuine saving can be computed, the badge simply reads "Sale".
The wording of all four forms ("Save {percent}%", "Up to {percent}% off", "Save {amount}", "Up to {amount} off") lives in Edit default theme content like every built-in label, so each language gets its own phrasing and word order.
Custom badges — the badge1: to badge4: tags
Tag a product badge1: Bestseller and the card shows a Bestseller badge. No app, no setup — the theme reads the tag and prints the label, styled by the matching colour set.
- In Shopify admin open the product, and in the Tags field type
badge1: Bestseller— the number, a colon, then the words you want shown. Save. - To label several products at once, select them in the products list and choose Actions → Add tags. The same tag on twenty products gives twenty badges.
- Set the colours in the theme editor under Theme settings → Product badges → Badge 1. Whatever you choose applies to every
badge1:label in the store. - View a tagged product on your storefront to check it. If the badge is missing, work through the three causes in the note below.
The number does two jobs:
- It picks the colours. Theme settings → Product badges has four colour pairs — Badge 1 to Badge 4, each with background and text.
badge3: Handmaderenders in Badge 3's colours. A product can use any set on its own — you don't have to start at 1. - It sets the order. Badges display in number order, so
badge1:always appears beforebadge2:. When a product has more badges than the per-card maximum, the lowest numbers survive — the order is yours to control.
A product can carry as many badge tags as you like; the display cap decides how many show. Built-in badges take their places first (Sold out, then Sale, then New), and your custom badges fill the rest.
Each number has its own switch. Turn off Show badge 2 and every badge2: label disappears storefront-wide in one click — the tags stay on your products, so switching it back on restores them exactly. Useful when a seasonal label ("Gift idea", say) lives on hundreds of products: no bulk tag editing, just a toggle.
Keep labels to 16 characters. Longer labels are shortened automatically — badges sit on a product card, and on a phone that card is about half the screen wide. "Limited Edition" (15 characters) is a realistic ceiling.
One language only. A tag is a single value on the product, so a custom label reads the same in every language your store publishes. The built-in badges translate properly (see wording below); custom labels are your own words, as typed.
Appearance
All appearance settings live in Theme settings → Product badges and ship as desktop/mobile pairs, so phones get their own values:
| Setting | Options |
|---|---|
| Badge style | Square, Pill, Outline or Tag — every style works with every other setting |
| Multiple badges | Stacked or side by side (desktop and mobile separately — side by side suits wide desktop cards, stacked never runs out of width on phones) |
| Badge size | Small, Medium or Large, per device |
| Position | Any corner of the product image, per device |
| Maximum badges per card | 1–6, set separately for desktop and mobile — cap mobile lower so badges never crowd a small card |
| Badge opacity | 20–100% per device — fades the badge background so the product image shows through, while the text stays solid so labels remain readable |
Changing the wording
The built-in badge labels have no text box in the customiser — deliberately. Go to Online Store → Themes → ⋯ → Edit default theme content and search for "Sale", "Sold out" or "New". Editing there keeps each language separate, so changing your English wording can never overwrite your French. Custom badge wording is simply whatever you typed in the tag.
Using a badge app instead?
Turn off Enable product badges at the top of the settings group and the theme outputs no badge markup at all — no hidden elements, no empty containers, nothing for an app to fight with. The same clean-handover switch exists for the theme's SEO output and filtering.
Nothing is invented
Every badge is worked out from data your store actually holds: prices, availability, publish dates and your own tags. Peregrine has no "23 sold today" or "14 people viewing" badges — a theme cannot know those numbers, and themes that show them are making them up. That protects you under consumer-protection law (fake urgency is a named offence under the UK's DMCCA 2024) and it keeps every claim on your storefront one you can stand behind.