How to change the on sale badge to show amount saved

[doorstepdrip]

Hey, how can I change the on sale badge to say the amount saved instead please?

my website is: doorstepdrip.com

It currently looks like this:

im hoping to get it to look like this

any help would be much appreciated 

thanks 🙂

[websensepro]

Hi, @doorstepdrip 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find Price.liquid File:

press ctrl+f past this {{ 'products.product.on_sale' | t }}

Replace {{ 'products.product.on_sale' | t }} with the following code:

-{{ compare_at_price | minus: price | times: 100 | divided_by: compare_at_price | round }}% OFF

[Dan-From-Ryviu]

Hi @doorstepdrip 

Go to your Online store > Themes > Edit code > open card-product.liquid file, and find this line of code.

{{- 'products.product.on_sale' | t -}}

Replace with this code. 

{%- assign savings = card_product.compare_at_price | minus: card_product.price  -%}
Save £{{ savings | money_without_trailing_zeros }}

[mivvael]

The code you provided will say 0 (local currency) saved. With the following code it does show the amount saved with local currency:

{%- assign savings = product.compare_at_price | minus: product.price -%}
{% if savings > 0 %}
  Save {{ savings | money_without_trailing_zeros }}
{% endif %}