Sale price display widget
Shows the price a shopper will actually pay on the product page, with the original price struck through. It reads your live campaign, so the number always matches checkout.
The sale price display puts the deal on the price itself. Where the tier table shows a ladder and the badge shows a few words, this widget shows the actual price the shopper will be charged for the product, with the original price struck through beside it. It reads straight from your live campaign, so the price it shows is the price checkout applies.
When it shows
- The block is added to your product template in the theme editor.
- A live campaign targets the product being viewed and has the sale price display turned on.
If more than one live campaign matches the product, the widget uses the one that was created first (the oldest campaign in the app). Targeting is honoured exactly as at checkout, and an excluded product shows nothing. If no campaign matches, the widget renders nothing at all.
What it shows
The widget adapts to the kind of deal on the product, so it never invents a price it cannot stand behind:
- A clear single discount shows the sale price with the original price struck through, and optionally a "Save X%" note.
- A tiered or volume deal, where the price depends on quantity, shows a "From" price with the quantity that unlocks it, rather than a single figure that would only be true at one quantity.
- A deal that is not a straight per-item price cut, such as a spend goal, a free gift, a Buy X Get Y, or free shipping, shows a short deal line describing the offer instead of a price.
The widget never rewrites your theme’s prices. It works out the discounted price from your live campaign and displays it, so it stays correct even when a discount is combined with another, and it never leaves a stale sale price behind when a campaign ends.
Multiple currencies
Money amounts are hidden in a foreign currency
Percentage discounts convert cleanly, so a percentage-based sale price is correct in any currency. Fixed money amounts and spend thresholds are set in your store currency and Shopify does not convert them, so when a shopper is paying in a different currency the widget hides those amounts rather than show a number checkout would not match. The discount itself still applies correctly at checkout.
Styling
The block uses no scripts: it is drawn with the page, adds no weight, and reserves its space so it cannot shift your layout. The theme editor exposes a handful of settings.
| Setting | What it controls |
|---|---|
| Alignment | Start, Center, or End, to line the price up with the rest of your product page. |
| Show "Save X%" | Whether to show a saving percentage next to the sale price. |
| Sale price color | The colour of the discounted price. |
| Original price color | The colour of the struck-through original price. |
| Hint and deal color | The colour of the "From" hint and the deal line for spend, gift, and similar offers. |