Automatic sale badge with the discount percentage on Shopify

Updated October 16, 2026

A badge with the exact discount (-30%) sells better than a generic Sale label. Writing it by hand on every product is not realistic, and it goes wrong as soon as a price changes. This guide sets up a sale badge that computes the percentage itself and disappears when the sale ends.

RuleOn sale (compare-at price): yes→-30%

Why compute the discount automatically

Shoppers compare percentages, not prices. A badge showing -40% on a collection page tells them at a glance which products are worth a click.

Prices move during a sale: new markdowns, extended offers, products back to full price. A badge that reads the real price stays correct without any update on your side.

Set up the Sale badge

In MDBadgePilot, click Create badge and pick Sale. The template contains:

  • Text: -{discount}%. The variable is replaced by each product's discount.
  • Condition: On sale (compare-at price) is yes. A product is on sale when its compare-at price is higher than its price.
  • Design: red pill in the top-left corner. Change the colors or the position if your theme already uses that corner.

Target the deep discounts (Pro)

With the Pro plan, replace or complete the condition with Discount (%) at least 30. Combine it with Product type or Vendor to badge one brand only, with the logic All conditions (AND) or Any condition (OR).

When the badge updates

The rule is evaluated when you save the badge, and again each time a product is updated in Shopify, such as a new compare-at price. A full pass also runs every hour on the Pro plan and once a day on the Free plan.

On collection, search and product pages, the percentage is computed by the theme from the live price, so it matches what the shopper pays.

Frequently asked questions

How is the discount percentage computed?

From the first variant: (compare-at price - price) / compare-at price, rounded down to a whole percent. A product at $70 with a compare-at price of $100 shows -30%.

What happens when the sale ends?

When you remove the compare-at price, the product no longer matches the rule and the badge is removed. A badge using {discount} is also hidden on any product without a discount.

Can I only badge big discounts?

Yes, on the Pro plan: use the Discount (%) condition, for example Discount (%) at least 30, to show a badge on deep discounts only.

Does it work on the Free plan?

Yes. The Sale template uses one condition, On sale, which is available on the Free plan.

Related guides