liquify.

How to show a sale badge with the discount percentage in Shopify

Most themes already show a Sale badge when a product has a compare-at price higher than its price. Showing the actual percentage off, like -20%, makes the deal clearer.

1. Make sure sale prices are set up

  1. On each product (or variant) on sale, set Compare-at price to the original price and Price to the sale price.
  2. Your theme will show its default Sale badge on product cards. In Dawn, the badge position and color are in Theme settings under Badges.

2. Show the percentage instead

  1. In your Shopify admin, go to Online Store > Themes. On your theme, click the ... menu and choose Duplicate, so you have a backup. Then on the theme you're editing, open the ... menu and choose Edit code.
  2. Find where product cards render their badge (snippets/card-product.liquid in Dawn).
  3. Replace the Sale text with a calculated percentage, using the snippet below.
  4. Do the same on the product page price if you'd like it there too.
The percentage calculation in Liquid
{%- if product.compare_at_price > product.price -%}
  {%- assign saved = product.compare_at_price | minus: product.price -%}
  {%- assign percent = saved | times: 100 | divided_by: product.compare_at_price -%}
  <span class="badge">-{{ percent }}%</span>
{%- endif -%}

For products where variants have different discounts, consider showing Up to -X% using the largest discount.

3. Or ask Liquify in one sentence

Liquify is an AI theme editor for Shopify. Type the change in plain words and it edits your theme for you, on a draft copy, with a live preview. Nothing changes on your store until you publish.

“Show a Sale badge with the discount percentage on products that are on sale”

Try it free on a sample store

Free plan, no credit card. Connect a real store whenever you're ready.

Questions

Why isn't my Sale badge showing?

The badge only appears when the compare-at price is higher than the price. Check both fields on the product or variant.

More guides