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

[IMYOURGIRL]

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

 

[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.

[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: '%' -%}
      <span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">{{ savings }} OFF</span>
	{% else %}
    <span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
      {{ 'products.product.on_sale' | t }}
    </span>
    {%- 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 

              <span id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}" class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}">{{ 'products.product.on_sale' | t }}</span>

To

              {%- assign savings = card_product.compare_at_price | minus: card_product.price | times: 100.0 | divided_by: card_product.compare_at_price | round | append: '%' -%}
              <span id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}" class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}">{{ savings }} OFF</span>

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. 

[Elöd]

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

[Marcielgm]

Muito obrigado pela elaboração, segui e deu certo! Deus te abençoe.

[sun_shine]

Thank you, it worked perfectly at sadiaaamir.com 

Kindly share codes that also show YOU SAVED value x

[makhdoomzia]

Thanks, Dear,

It works in real, once again thanks for your support.

[Ruben_93]

Hello David, 

Thank you so muc for this, really helpe me.

But i getting some issue...When i have multiple variants, the price remains the same :

and

As you can see, the 1st variant (500 mL)  got 4.63€ of discount, but the second (1000 mL) got 8.90€, but i keep see 4.63€.
Im using Spotlight theme (11.0.0)

Can you help me please?
Site:https://www.espacobebe.pt/

[Loz86]

Hi @Ruben_93 , did you find the solution for the % to change based on different variant prices? 

[Ruben_93]

Hello @Loz86 , not yet.

[Brandon-Lee]

Hi @Ruben_93 and @Loz86 

If you are still having problems with the variant thing.
In your price-liquid file where you have the line of code doing the equation (compare price minus product price) ect.
just change them to also say (.selected variant).
example:
{{ product.selected_variant.compare_at_price | minus: product.selected_variant.price | times: 100 | divided_by: product.selected_variant.compare_at_price }}% OFF

[alexzone]

my theme is blockshop its showing this error 

[abhijeet5]

Hello @alexzone , first you can find sales price json code

[marinag]

Thank you

[GouravKumar]

Hello, as i am selecting other variants which is differently priced, but the discount % remain same . kindly help to chnage the % off discount as per variant change.

[Brandon-Lee]

If you are still having problems with the variant thing.
In your price-liquid file where you have the line of code doing the equation (compare price minus product price) ect.
just change them to also say (.selected variant).
example:
{{ product.selected_variant.compare_at_price | minus: product.selected_variant.price | times: 100 | divided_by: product.selected_variant.compare_at_price }}% OFF

[driftmark_hk]

Hi! this works well at the product information page, could you please advice how to change the sale badge on product grid page to percentage too? thank you so much!

[driftmark_hk]

sorry just realised you already shown how and it worked perfectly, thanks again!

[lisaszeto]

Hi David this worked for me except some of my products have multiple colors and not all colors are on sale for the same percentage off. 

example I sale bras. The blue option for bra is 40% off but the green option is only 30% off and the red one is full price. Is there a way for the percentages to change as they select the different variants on the product page?

[Brandon-Lee]

Hi @lisaszeto 

If you are still having problems with the variant thing.
In your price-liquid file where you have the line of code doing the equation (compare price minus product price) ect.
just change them to also say (.selected variant).
example:
{{ product.selected_variant.compare_at_price | minus: product.selected_variant.price | times: 100 | divided_by: product.selected_variant.compare_at_price }}% OFF

[Cornelis72]

I have the Dawn theme and added the codes you provided but now it looks like this. Can you maybe take a look at my store?

[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)

<span class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}">{{ 'products.product.on_sale' | t }}</span>

3. Replace the above code with the code below.

<span class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}">{{ 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</span>

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 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]

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.

[ZaheedaT]

Thanks a lot, even worked for Refresh Theme

[lookitstony]

I logged in for the first time just to say THANK YOU!!!!!!! This worked great!

[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.

[smahnaqvi]

Hello David,

I am using Habitat theme and couldn't find any of the file that you mentioned in the thread. Anyhow replace the code in product-card-badge.liquid 

<span class="badge onsale {{ badge_position }}">{{ 'products.product.on_sale' | t }}</span>
{% endif %}

with

{{ product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}% OFF</span> 

and in result finally replaced the sale badge to 0% Off. Can't fix the 0 thing.

[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..

[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 

[IMYOURGIRL]

Hi there, I have made it work with a slightly different code.. not sure if you figured it out but I thought it would be helpfull for others to share.

price.liquid

find:

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

replace with:

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

card-product.liquid

find:

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

replace with:

{{ card_product.compare_at_price | minus: card_product.price | times: 100 | divided_by: card_product.compare_at_price }}% OFF

I found it in another thread and since I'm still getting alerts on this one, I hope it will help others too!

[Ruben_93]

Same happen to me..
And don't know how to do it

[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!

[makhdoomzia]

Dear 

David Kim

Bundle of thanks for your support, it also works for my store. 

[GrafX]

I've seen several people, including myself, on this board request a fix for variation price discount percentages, where if you have more than one variation at a different discounted price, it only shows the first variation discount?

Example: Variation 1 - 15% discount
Variation 2 - 25% discount
Variation 3 - 40% discount.

With the code given, they ALL SHOW 15% discount. Anyone find a fix for this?

[Brandon-Lee]

Hello,

Inside your price.liquid file just change that line that is doing the equation to also say (.selected variant).
example:
{{ product.selected_variant.compare_at_price | minus: product.selected_variant.price | times: 100 | divided_by: product.selected_variant.compare_at_price }}% OFF

[MRamzan]

This is very simple:

Go to dashboard -> customize -> settings -> Products grid -> Show discount label

Change saving to percentage.

Thanks.

[gr_trading]

Hi @IMYOURGIRL ,

Please refer to the code below to implement it in the card-product.liquid file. The file name may vary depending on the theme, but for reference, we're using the DAWN theme here.

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

For detailed implementation kindly refer the below video to implement the same.

[timgreenwood]

Hi, 

How do you change the % discount on the product page for different variants which have different discount?

For example Example:

Variation 1 - 15% discount
Variation 2 - 25% discount
Variation 3 - 40% discount.

[gr_trading]

hi @timgreenwood ,

The video created is for onload function only where user has already selected the variant or variant selected on page load.

To implement what you are looking for can be implemented in two ways.

Or implement the same on variant selection which will require the change in JavaScript. 

[Brandon-Lee]

Hi,

just add the function ".selected_variant" after the product function in the line of code inside price.liquid
example:
{{ product.selected_variant.compare_at_price | minus: product.selected_variant.price | times: 100 | divided_by: product.selected_variant.compare_at_price }}% OFF