Skip to main content

PDP Badges

Badges on the product page are controlled by the tags you set on the product in Shopify, with a few exceptions noted below that come from the product's own settings rather than a tag.

The product page has three badge areas.

Badges above the product titleโ€‹

Rounded badges with a colored background. A product shows a maximum of two โ€” the two highest-ranked it qualifies for, from this order:

RankBadgeWhat triggers it
1Extra 30% off with code CHEERStag badge:eoy25clearance
2Waived Rush Feethe product's rush fee is set to zero
3Whatever you type after the colontag custom-badge:your text here
4Limited Time Offertag badge:limited time offer
5Free Personalizationtag badge:free personalization
6Personalizationpersonalization is enabled on the product
7Discontinuedthe product's Discontinuation Date has passed
8Newtag New Arrival
9Best Sellertag Best Seller

Ranks 2, 6 and 7 have no tag โ€” they come from the product's own settings. They still take a slot, and they outrank New Arrival and Best Seller.

A discontinued product tagged Best Seller shows Discontinued and nothing else, because Discontinued is rank 7 and Best Seller is rank 9 with only one slot left. If a tag you added is not showing, check whether two higher-ranked badges already qualify.

Writing your own badge textโ€‹

custom-badge: is the one badge where you choose the wording. Everything after the colon becomes the badge, so the tag custom-badge:Only 3 Left produces a badge reading "Only 3 Left".

Keep it short โ€” it sits on one line next to other badges. It is ignored on gift cards, swatches and swatch books.

Messages under the subtitleโ€‹

Up to four things can appear here at once โ€” they do not compete for a single slot:

MessageWhen it shows
Out of Stockthe product is unavailable and tagged No Waitlist
This style will be discontinued on <date>the Discontinuation Date is in the future and the Discontinuation Level includes STYLE
Your first 10 swatches are freeswatch products, unless tagged badge:free swatch bundle or badge:BUNDLEUP
A promo badgesee the ranked list below

Promo badgeโ€‹

Only the promo line is ranked. One shows โ€” the highest-ranked the product qualifies for:

RankTag to add in ShopifyBadge
1badge:lightningdealExtra 30% off with VIRALDEAL
2BMSMWP20% off 4+ with TIEONEON
3BMSMGR10% off 4+ with SUITELOOKS
4badge:limited time colorLimited Time Color
5badge:free swatch bundleYour First Swatch Bundle is Free
6badge:BUNDLEUPFirst Bundle Free with Code BUNDLEUP

Badge beside the priceโ€‹

One badge only, so there is nothing to rank: Final Sale, on final sale products.

The Discontinuation Date drives two different badgesโ€‹

The Discontinuation Date field on the product produces a different message depending on whether the date has passed:

DateWhat showsWhere
In the future"This style will be discontinued on <date>"under the subtitle โ€” and only if Discontinuation Level includes STYLE
In the past"Discontinued"above the title, at rank 7

So setting a future date shows the warning, and the same field flips to the Discontinued badge on its own once the date arrives. Nothing needs changing on the day.

Getting the tag rightโ€‹

Spelling and capitalization must match exactly. best seller will not work; it has to be Best Seller. Copy the tags from the tables above rather than typing them.

The exception is custom-badge:, where only the prefix has to match โ€” the text after the colon is yours, capitalized however you write it.

Product page badges update as soon as the product saves in Shopify. Collection page badges take longer, so the same tag can show on the product page before it shows on a collection page.

What you can change yourselfโ€‹

ChangeWho
Which products show a badgeYou โ€” add or remove the tag in Shopify
The wording of a custom-badge: badgeYou โ€” it is part of the tag
The wording of any other badgeEngineering
The color of a badgeEngineering
Which badges win when a product qualifies for more than twoEngineering
Adding a brand-new badgeEngineering

The first two rows are tag changes. The rest need a code release, so raise a ticket with a few days' notice ahead of a launch.