Sale badge

show-sale-badge shows only when the selected variant has a compare-at price above its price. It renders a computed “-NN%”, the amount saved, or your own static text.

<storesynk-product handle="example-product">
  <div class="price-row">
    <show-price></show-price>
    <show-compare-price></show-compare-price>
    <show-sale-badge format="percentage" class="sale-badge"></show-sale-badge>
  </div>

  <show-sale-badge class="sale-flag">On sale</show-sale-badge>
</storesynk-product>

• Pair it with show-price and show-compare-price. The compare-at price is what makes a variant count as on sale.
• The badge tracks the selected variant, so switching options can toggle it on and off.

Options

Attribute	Default	What it does
format	""	"" or "text": keep your markup, only show or hide. "percentage": write -NN%. "amount": write the saved amount, money-formatted.

Styling

While discounted the engine sets ss-on-sale on the badge; otherwise it hides the element.

.sale-badge { display: inline-block; background: #e53e3e; color: #fff; font-weight: 700; padding: 4px 10px; border-radius: 6px; }
.price-row:has(show-sale-badge[ss-on-sale]) show-price { color: #e53e3e; }

Gotchas

• An invisible badge on a full-price product is intended. Test with a variant that has a compare-at price.
• format="amount" needs the store context to money-format the saving. See money and formatting.

Related

• Actions reference (where show-sale-badge is cataloged)
• Display product info