How can I display sale percentage in Dawn theme's sale badge?

[IMYOURGIRL]

Hi guys,

When using Dawn theme, is it possible to change the ‘Sale’ badge to the percentage % sale: -10% for example in stead of the word Sale?

Any recommendations on how to do this are welcome. Thanks!

[SpeedyDev]

@IMYOURGIRL

1. Go to product-template.liquid under Sections and open the file

Search the code

{% if product.compare_at_price_max > product.price %}
            <span class="badge badge--sale"><span>{{ 'products.product.on_sale' | t }}</span></span>
          {% endif %}

Replace the above code with below code

{% if product.compare_at_price_max > product.price %}
<span class="badge badge--sale"><span>{{ product.compare_at_price_max | minus: product.price | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}%</span></span>
{% endif %}

[DavidEKim]

Hi,

Please follow the steps below to show the percentage off sale badge.

1. Go to Online Store > Edit code > Snippets > card-product.liquid

2. find the code below (line 98)

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

3. Replace the above code with the code below.

{{ card_product.compare_at_price_max | minus: card_product.price | times: 100.0 | divided_by: card_product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}% OFF

4. Save the file.

If you want to show the percentage sale on quick add modal, please replace the line 212 too.

If you like to show the percentage off badge on product page, you need to modify another liquid file. Please go to Online Store > Edit code > Snippets > price.liquid and find the code below. (line 86)

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

and then, replace with the code below.

{{ product.compare_at_price_max | minus: product.price | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}% OFF

Don’t forget to save the file.

If you need any further assistance, please let me know.

Hope it helps.

[IMYOURGIRL]

Thank you, I tried the code but it didn’t work. The badge colour changes and the % is 0. See screenshot:

[IMYOURGIRL]

Thank you David, I also tried your code and the colour of the badge remains. I would like to display “-x%” like “-30%” in stead of the word OFF, but also the percentage is 0 when I use the code:

[DavidEKim]

@IMYOURGIRL

The codes for card-product.liquid & price.liquid are different.

You might not entered the correct code.

Please read my answer again carefully.

If you still need an assistance, please send me a private message.

I’ll help you for free.

Thanks.

Thanks.

[DavidEKim]

I included the span to let you find the code easily.

You can replace the liquid code only as below.

For this code

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

Replace with below

{{ card_product.compare_at_price_max | minus: card_product.price | times: 100.0 | divided_by: card_product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}% OFF

If you can’t fix it, send me a private message.

Thanks.

[DavidEKim]

For the card-product.liquid

-{{ card_product.compare_at_price_max | minus: card_product.price | times: 100.0 | divided_by: card_product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}%

For the price.liquid

-{{ product.compare_at_price_max | minus: product.price | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}%

Need further assistance, please let me know.

Thanks.

[IMYOURGIRL]

Thank you David, I checked and it stays 0% so I send you a message

[NEMDIGITAL]

How did you get it fixed? I am dealing with same problem where it says 0%.

[DavidEKim]

@NEMDIGITAL

Hi,

For the Dawn Theme, please follow the steps below to show the sale in % (percent).

1. Go to Edit code > Snippets > price.liquid file.

2. Find (ctrl+F) {%- if show_badges -%} (line 84)

3. Replace the code below

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
	{% else %}
    
      {{ 'products.product.on_sale' | t }}
    
    {%- endif -%}

It should be as below.

The result will be as below.

Hope it helps.

Thanks.

[NEMDIGITAL]

Hi David, thank you for your reply. However this doesn’t replace the collection badge. Please refer to my image.

[DavidEKim]

For the collection page, please follow the steps below.

1. Go to Edit code > Snippets > card-product.liquid file.

2. Change the line 98

From

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

To

{%- 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

The badge with % will show up on collection page as below.

If you want to change any other place, please find {{ ‘products.product.on_sale’ | t }} and replace as I instructed before.

Hope it helps.

Thanks.

[NEMDIGITAL]

Hi David, card-product.liquid doesn’t exist. I have product-card.liquid but also none of the code you provide.

[Ayeshali1]

Great. It’s working.

[NEMDIGITAL]

How’d you get it working if I may ask? Did you follow the instructions up above? I can’t seem to get it working..

[Elod]

hey @DavidEKim , is there any way to also display the sales percentage on the cart page?

[zsquiggles]

Hi David, thank you for the code, it works! however i realise the % reflected is not right. as I have variants of different price, and I am setting a 15% off sale. but it isnt showing 15% on the badge. I have variant option for sizing XS, S, M, L,XL and XXL at different price range. currently the badge is reflecting 43% off even though I calculated 15% off each variant. please help

[ZaheedaT]

Thanks a lot, even worked for Refresh Theme

[EnvisionWeb1]

Hi David, I’ve chosen to display Dollars Off instead of Percentage Off. I’ve got it working, but it’s not updating when I select a different variant? It just shows the Dollars Off amount for the initial variant that was selected. Thanks!