Price Discount

A badge showing the savings between price and compare-at, as a percentage or amount.

Last updated

August 14, 2026

How to use

Place the component near the price and connect ⛁ Butter Data to the product's Butter Data CMS field.
Choose Type — Percentage or Amount.
Set Text Format (e.g. "{{value}} OFF") and the Varying Prefix ("Up to") for products with discounts that differ by variant.
For Amount type, set Format for the money value.
Style Font, Color, BG, Padding, and Radius for a badge look.

Percentage or amount

`Type`	What it shows
Percentage	The percentage saved off the compare-at price, e.g. "20% OFF".
Amount	The money amount saved, formatted with `Format`, e.g. "$15 OFF".

Both are calculated from the same underlying gap between the current price and the compare-at price — Type only changes how that gap is expressed.

Templating the badge copy

Text Format takes a copy template — {{value}} inserts the calculated discount; leave it empty to show the value alone. When a product's variants have different discount amounts, the Varying Prefix (default "Up to") is added in front, e.g. "Up to 30% OFF".

When the badge disappears

The badge requires a compare-at price to calculate against — with no compare-at price on the selected variant, it renders nothing.