How to add sale badges to Shopify collection pages

Updated November 5, 2026

First: Shopify only knows a product is on sale from its compare-at price

Every method below starts from the same thing. Open the product in your Shopify admin and set a Compare-at price higher than the Price (on each variant if prices differ). That's what tells your theme, and any badge app, that the product is discounted.

Option 1: your theme's own Sale badge (free, no app)

Most Online Store 2.0 themes, including Shopify's free Dawn, already show a “Sale” badge on product cards when the compare-at price is higher than the price. In the theme editor, look under Theme settings for a Badges section to change its position or colours.

It's the right choice if a plain “Sale” is all you need. What built-in badges usually can't do: show the discount percentage, show low stock or “New”, or appear only on some collections.

Option 2: a label app (percentages, rules, no code)

A label app adds badges on top of your product images using a theme app extension, so your theme files stay untouched. With Clearlabel, for example:

1. Install the app and click “Turn on”, then Save in the theme editor. A Sale label with the discount % is created for you.
2. Open the Sale label and choose which products get it: all products on sale, only those discounted by at least 20%, or one collection.
3. Check the live preview on your own products, then save. The badge shows on collection pages, search results, home page sections and product pages.
4. Optional: tick “Hide my theme's own Sale and Sold out badges” in the app embed so shoppers don't see your theme's Sale badge as well.

The percentage is worked out from each product's compare-at price, so it stays right when you change prices. On products with several variants, the badge uses the biggest discount among them.

Option 3: edit your theme code (last resort)

You can edit the product card snippet in your theme's Liquid code to print a percentage. It works, but the change is lost or conflicts when you update or switch themes, and a mistake can break every collection page. Duplicate your theme first if you go this way.

Why isn't my sale badge showing?

• The compare-at price is empty, or not higher than the price.
• The badge was switched off in your theme settings, or your theme doesn't show badges on cards.
• You're looking at a cached page: reload, or check in a private window.
• With an app: its app embed isn't switched on in your live theme (Online Store → Themes → Customize → App embeds).