Product page Free

Savings and percent-off badge

Displays the exact amount and percentage saved whenever a variant has a compare-at price above its price.

{%- assign variant = product.selected_or_first_available_variant -%}
{%- if variant.compare_at_price and variant.compare_at_price > variant.price -%}
  {%- assign saved = variant.compare_at_price | minus: variant.price -%}
  {%- assign pct = saved | times: 100.0 | divided_by: variant.compare_at_price | round -%}
  <span class="save-badge">
    Save {{ saved | money }} ({{ pct }}% off)
  </span>
{%- endif -%}
<style>
  .save-badge{display:inline-block;padding:4px 10px;border-radius:4px;
    background:#e8f6ec;color:#1a7f37;font-size:13px;font-weight:600}
</style>

Quantifies the deal so the markdown feels concrete instead of a vague “on sale” tag. Paste near the price in main-product.liquid (or a price.liquid snippet).

Notes

Only renders when a real compare_at_price is set and higher than the price, so it never shows a fake discount.
times: 100.0 forces float math so the percentage rounds correctly.
Update the badge text/color to match your theme; the money filter respects your store currency format.