How to make a "Sale" label show "Save X" instead?

[Chicha7272]

Hey guys, how can I make this label:

This:

Note: I want it to calculate the discount it shows on its own. For example, if one of my products has a $20 discount while the other has $5, I want everything to be calculated automatically and this label to show individual discount for every product.

My store URL is: https://trivlen.com/

[DitalTek]

Hi,

To do it, you need get compare price minus original price, so you can try with this code:

{% if product.compare_at_price_max > product.price %}
{{ product.compare_at_price_max | minus: product.price | ceil }}
{% endif %}

[Chicha7272]

Hey, thanks for your help. It makes sense. But where exactly do I need to paste this code? If you mean to paste it here, then it doesn’t work:

Neither it does for product pages

[Dan-From-Ryviu]

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

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

Replace it with this one

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

[Chicha7272]

The code seems logical but it for some reason doesn’t calculate numbers properly. It multiplies the number that should be there by 100

I tried fixing it this way but it didn’t work:

[Dan-From-Ryviu]

Hi @Chicha7272

Please update the code to this and check again.

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

[Chicha7272]

This one works perfectly

Thank you

[SPEKTRUM_Kft]

Hello,

We tried your code in our shop and it’s working fine but we would like to display the discount in percentages instead of round numbers.

The screenshot is in the attachment.

How can we do that?
Can you share the code that does that?

p.s. We would like to display this information on the product page as well.

Can you also share the code to do that?

The screenshot where we would like to set this up is also in the attachment.

Thank you in advance!

Sincerely,
Spektrum Division Kft.

[Dan-From-Ryviu]

Hi @SPEKTRUM_Kft

Please visit your Online store > Themes > Edit code > open price.liquid, find this line of code

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

Replace with this code

{%- if product.price < product.compare_at_price -%}
      {%- assign savings = product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price | round | append: '%' -%}
       {{ savings }} OFF
    {%- endif -%}

In card-product.liquid, find this line of code

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

Replace with this code

{%- if card_product.price < card_product.compare_at_price -%}
  {%- assign savings = card_product.compare_at_price | minus: card_product.price | times: 100.0 | divided_by: card_product.compare_at_price | round | append: '%' -%}
  {{ savings }} OFF
{%- endif -%}

[SPEKTRUM_Kft]

Hello @Dan-From-Ryviu ,

Thank you for your quick reply.

We tested this code out and the discount labels are showing in percentages right now on both the collection and product pages.

Thank you for your support.

Sincerely,

Spektrum Division Kft.

[Dan-From-Ryviu]

You are very welcome, @SPEKTRUM_Kft

[Andre011]

Subject: Issue with Displaying Savings on Product Page

Hi Dan,

Thank you for the great solution!

I’m trying to apply it to my product page by adding the code to the price.liquid file. However, it’s only showing €0 savings there, even though it correctly displays the savings on the product card. I’ve attached some images below to illustrate the issue.

Could you please share your thoughts and a possible solution to this issue?

Thanks in advance!

André

[workhere]

Hi, thanks for your help.

I have used the same for my website but the savings amount is not changing based on variants. Can you please help me out for the same?

https://koralcare.in/products/sheets-combo-pack

[Muhammad_Faraz]

Have you got the solution?..i have the same problem

[Muhammad_Faraz]

Hi Dan,

Thank you for the great solution!

I’m trying to apply it to my product page by adding the code to the price.liquid file. However, it’s only showing $0 savings there, even though it correctly displays the savings on the product card.

Could you please share your thoughts and a possible solution to this issue?

[Dan-From-Ryviu]

Hi @Muhammad_Faraz

What theme are you using and could you take screenshot where did you add the code?