Product badges

Small labels in the corner of product images: Sale, New, Out of stock, and up to four custom badges that you turn on with product tags. They appear on product cards, and on the product page and quick view when badges are enabled there.

Where to find it: In the theme editor, click the gear icon (Theme settings) in the left sidebar, then open Product badges.

Good for

Showing 20% off or Save $10 on discounted products automatically
Flagging new arrivals for their first few weeks
Adding your own labels such as Best seller or Limited edition with product tags

Add a custom badge

Under one of the Custom badge groups, type a tag in Tag, for example Best seller. The badge shows this exact text, so use the capitals you want shoppers to see.
Pick its colors, icon and corner.
In Shopify admin, open each product that should show the badge and add the same tag. Upper and lower case don't matter for matching.
Save, then check a collection page. The badge appears on every product with that tag.

Settings

Sale badge

Show sale badge	Shows a badge on products that are on sale, meaning their price is lower than the compare-at price. Sold-out products don't get it. On by default.
Style	Badge is a small label in the corner of the image. Overlay also adds a colored band across the top of the image, which fades out downward, behind the label. Choose Badge (default) or Overlay. Only appears when Show sale badge* is on.*
Icon	A small icon shown before the badge text. Choose None for text only. Choose None, Discount, Tag, Coupon, Gift, Sparkle, Star (default), Diamond, Flame, Award, Error, Cross, Clock, Check circle, Truck, Leaf, Bolt, Lock, Heart, Secure or Lab. Only appears when Show sale badge* is on.*
Discount format	What the sale badge says: the word Sale, the amount saved (Save $10) or the percentage off (20% off), worked out from each product's price and compare-at price. Choose Sale (default), Saved amount or Percentage off. Only appears when Show sale badge* is on.*
Alignment	Which top corner of the product image the badge sits in. Choose Top left or Top right (default). Only appears when Show sale badge* is on.*
Background color	The badge's background color. With the Overlay style, it also colors the band when Gradient is empty. Default: #007988. Only appears when Show sale badge* is on and Style is Badge.*
Gradient	The band drawn across the top of the image when Style is Overlay. Clear it to use a fade from Background color instead. Default: linear-gradient(to top, transparent 0%, #007988 100%). Only appears when Show sale badge* is on and Style is Overlay.*
Text color	Same color will be used for icon. Default: #FFFFFF. Only appears when Show sale badge* is on.*

New badge

Show new badge	Shows a New badge on in-stock products created within the last Show period of new badge days. On by default.
Icon	A small icon shown before New. Choose None for text only. Choose None (default), Discount, Tag, Coupon, Gift, Sparkle, Star, Diamond, Flame, Award, Error, Cross, Clock, Check circle, Truck, Leaf, Bolt, Lock, Heart, Secure or Lab. Only appears when Show new badge* is on.*
Alignment	Which top corner of the product image the badge sits in. Choose Top left (default) or Top right. Only appears when Show new badge* is on.*
Background color	The background color of the New badge. Default: #007988. Only appears when Show new badge* is on.*
Text color	Same color will be used for icon. Default: #FFFFFF. Only appears when Show new badge* is on.*
Show period of new badge	The number of days is counted from the product creation date. Adjustable from 7d to 30d (default 30d). Only appears when Show new badge* is on.*

Sold out badge

Show sold out badge	Shows an Out of stock badge on products that can't be bought. On by default.
Icon	A small icon shown before the sold-out text. Choose None for text only. Choose None (default), Discount, Tag, Coupon, Gift, Sparkle, Star, Diamond, Flame, Award, Error, Cross, Clock, Check circle, Truck, Leaf, Bolt, Lock, Heart, Secure or Lab. Only appears when Show sold out badge* is on.*
Alignment	Which top corner of the product image the badge sits in. Choose Top left or Top right (default). Only appears when Show sold out badge* is on.*
Background color	The background color of the sold-out badge. A muted gray tells shoppers the product isn't available. Default: #9EA1A3. Only appears when Show sold out badge* is on.*
Text color	Same color will be used for icon. Default: #FFFFFF. Only appears when Show sold out badge* is on.*

Custom badge 1–4

Each of the 4 custom badges has the same settings, set separately for each one.

Icon	A small icon shown before this custom badge's text. Choose None for text only. Choose None (default), Discount, Tag, Coupon, Gift, Sparkle, Star, Diamond, Flame, Award, Error, Cross, Clock, Check circle, Truck, Leaf, Bolt, Lock, Heart, Secure or Lab.
Alignment	Which top corner of the product image this custom badge sits in. Choose Top left (default) or Top right.
Background color	The background color of this custom badge. Default: #007988.
Text color	Same color will be used for icon. Default: #FFFFFF.
Tag	The product tag that turns this badge on. The badge shows the tag text exactly as you type it here, so Best seller reads Best seller. Matching ignores upper and lower case. The badge shows on products carrying this tag. Leave blank to hide it.

Tips

Cards show at most two badges. When a product qualifies for more, the order is Sale, then New, then Out of stock, then custom badges 1 to 4. Keep custom badges for products that aren't also new or on sale, or they may be pushed out.
Percentage off is worked out automatically. It comes from each product's price and compare-at price, so you never have to type it.
Keep the sold-out badge muted. A gray badge tells shoppers the product isn't available without competing with your sale badges.
Put two badges in different corners. When the two badges on a card have different Alignment settings, each sits in its own corner. When they match, they stack in the same corner.

Troubleshooting

My custom badge isn't showing

Check that the product's tag matches Tag exactly (only upper and lower case are ignored), and that Tag isn't empty. If the product also has a sale and a new badge, the two-badge limit on cards leaves no room for it.

The New badge isn't appearing on a new product

The count starts from the date the product was created in Shopify, not when it was published, and the product must be in stock. Imported or duplicated products may have an older creation date than you expect.

Why is there no sale badge on a sold-out product?

Sold-out products get the Out of stock badge instead. The sale badge only shows on products that can still be bought.

Badges show on cards but not on the product page

On the product page and in quick view, badges are turned on in that section's own settings. Once they're on, every badge that applies shows in a row, with no two-badge limit.