Change Sale Badge to percentage saved on Dawn 11.0

Store Design
, , ,
1

I’m having issues trying to change the SALE badge on products to “save $xxx” which is the amount you save from the compare and real price instead of it just saying “SALE” and it can’t just be in language because I have multiple products so it must be coded inside the code

I use Dawn theme 11.0

2

Hi @NichlasBach

  1. Open ‘product-price.liquid’ and find {{ ‘products.product.on_sale’ | t }}, replace this with the code below:
{% assign percentage = 0 %}
{% for variant in product.variants %}
  {% assign saving = variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price | round %}
  {% assign percentage = saving | at_least: percentage %}
{% endfor %} 
Save up to {{ percentage }}%
  1. Click Save.

If this solution is worked, then please Like this and Mark this as accepted solution!

Laddi

3

Hi @laddisahsi ! It worked great for the pdp price but how can i use this same badge for the product card sale badge? I tried to do the same following your instructions but it only appears “Save 0%” instead of the real percentage. I would be very grateful y you can help me with this!

4

Hi @cbswco

This can be done using {{ product }} variable, for this have to check the code.

In product listing page have run this code using product varibale.

If this solution is worked, then please Like this and Mark this as accepted solution!

Laddi

5

@laddisahsi thank you so much for your time answering. Could you be a little more specific with the instructions regarding code please :folded_hands: as i´m no programmer or so.

Thank you very much!

6

Hi @NichlasBach ,

Please refer the below code to implement the same on product card.

{%- assign difference = card_product.compare_at_price | minus: card_product.price -%}
{%- assign float_difference = difference | times: 1.0 -%}
{%- assign discount_fraction = float_difference | divided_by: card_product.compare_at_price -%}
{%- assign discount_percentage = discount_fraction | times: 100 | round -%}
{{- discount_percentage }} OFF

To implement the same on product page in detail, kindly refer the video