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

IMYOURGIRL
Shopify Partner
48 1 10

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!

Replies 37 (37)

SpeedyDev
Trailblazer
199 17 39

@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 %}
banned
IMYOURGIRL
Shopify Partner
48 1 10

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

6F099F20-F09E-4DD0-837C-C1445DF080E7.jpeg

DavidEKim
Shopify Partner
392 131 189

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

If helpful, please Like and Accept Solution.
Want to customize your store, please feel free to contact me.
PeopleVillage - Shopify Partner
IMYOURGIRL
Shopify Partner
48 1 10

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

NEMDIGITAL
Shopify Partner
5 0 2

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

DavidEKim
Shopify Partner
392 131 189

@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

20221229_003357.png

 

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.

20221229_003529.png

 

The result will be as below.

20221229_003621.png

 

 

Hope it helps.

Thanks.

 

 

If helpful, please Like and Accept Solution.
Want to customize your store, please feel free to contact me.
PeopleVillage - Shopify Partner
NEMDIGITAL
Shopify Partner
5 0 2

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

DavidEKim
Shopify Partner
392 131 189

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.

20221229_011725.png

 

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. 

If helpful, please Like and Accept Solution.
Want to customize your store, please feel free to contact me.
PeopleVillage - Shopify Partner
NEMDIGITAL
Shopify Partner
5 0 2

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

Elöd
Visitor
1 0 0

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

Marcielgm
Tourist
10 0 3

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

 

cap2.JPGcap1.JPG

sun_shine
Visitor
1 0 0

Thank you, it worked perfectly at sadiaaamir.com 

Kindly share codes that also show YOU SAVED value x

makhdoomzia
Tourist
3 0 0

Thanks, Dear,

 

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

Ruben_93
Tourist
3 0 2

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 :

Ruben_93_0-1698188859757.png

and

Ruben_93_1-1698188880561.png

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
Pathfinder
91 7 18

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

Ruben_93
Tourist
3 0 2

Hello @Loz86 , not yet.

alexzone
Visitor
1 0 0

Screenshot 2023-11-25 165623.png

my theme is blockshop its showing this error 

 

abhijeet5
Visitor
1 0 0

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

abhijeet5_0-1714407079656.png

 

marinag
Visitor
2 0 0

Thank you

GouravKumar
Shopify Partner
33 1 11

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.

Cornelis72
Visitor
3 0 0

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?

Schermafbeelding 2023-12-12 135248.png

DavidEKim
Shopify Partner
392 131 189

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.

 

 

If helpful, please Like and Accept Solution.
Want to customize your store, please feel free to contact me.
PeopleVillage - Shopify Partner
IMYOURGIRL
Shopify Partner
48 1 10

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:

 

7304E1E2-3B7D-4370-914E-0A705F1D0DC2.jpeg

DavidEKim
Shopify Partner
392 131 189

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

 

20220714_184110.png20220714_184044.png

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

Thanks.

If helpful, please Like and Accept Solution.
Want to customize your store, please feel free to contact me.
PeopleVillage - Shopify Partner
ZaheedaT
Excursionist
41 2 4

Thanks a lot, even worked for Refresh Theme

lookitstony
Visitor
1 0 0

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

DavidEKim
Shopify Partner
392 131 189

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

 

 

20220714_185645.png

 

20220714_185536.png

Need further assistance, please let me know.

Thanks.

If helpful, please Like and Accept Solution.
Want to customize your store, please feel free to contact me.
PeopleVillage - Shopify Partner
smahnaqvi
Visitor
1 0 0

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
Tourist
15 0 1

 

Great. It's working.

NEMDIGITAL
Shopify Partner
5 0 2

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
Visitor
1 0 1

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
Shopify Partner
48 1 10

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
Tourist
3 0 2

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

EnvisionWeb1
Tourist
8 1 3

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
Tourist
3 0 0

Dear 

David Kim
Bundle of thanks for your support, it also works for my store. 
 
GrafX
Visitor
1 0 0

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?

MRamzan
Shopify Partner
165 1 21

This is very simple:

 

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

 

Change saving to percentage.

 

Thanks.

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112