How To Show % Discount On A Product - Dawn

[Tara123]

Hi there,

Can anyone please tell me how to show the actual % off for each product, say 20% OFF or save $, to replace the "sale". I am using dawn. Thank you.

Best Regards,

tara 

[yashgarg · Accepted solution]

Hey @Tara123 ,

Please follow the following steps:

1) Go to your online store and select Themes from left panel

2) Press 3 dots menu in center (on the left of Customize button) and then Edit Code

3) Open the file price.liquid (you can search for it)

4) In that file comment the code which currently displays the SALE badge, and instead add code for discount.

Basically find this code

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

---

And replace it with this (as shown in picture)

{%- if compare_at_price > price -%}
{% assign discount = compare_at_price | minus: price | times: 100.0 | divided_by: compare_at_price | round %}
<span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
{{ discount }}% OFF
</span>
{% endif %}

{% comment %}
<span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
{{ 'products.product.on_sale' | t }}
</span>
{% endcomment %}

---

After you do that you will be able to see something like this on your product page 

Thanks

Yash Garg

[yashgarg · Accepted solution]

Hey @Tara123 ,

For adding %OFF to collections page, you can do this - 

1) Open file - card-product.liquid

2) Search for {{- 'products.product.on_sale' | t -}}

3) Replace it with following code

---

{{ card_product.compare_at_price | minus: card_product.price | times: 100.0 | divided_by: card_product.compare_at_price | round }}% OFF
{% comment %}
{{- 'products.product.on_sale' | t -}}
{% endcomment %}

---

So your final code should look like this

You will then see something like this 

For changing syling of %OFF badge on product page, you can do this:

1) Open file - component-price.css

2) Add these styles at end of file

3) Experiment with font value (decimals allowed) to get desired effect.

.price--on-sale .price__badge-sale {
font-size: 2rem;
font-weight: bold;
}

---

Thanks

Yash Garg

[yashgarg · Accepted solution]

Thanks for sharing this. Having checked for the code again I see two occurrences of {{- 'products.product.on_sale' | t -}} in the file.

I meant changing the first occurrence which is near line 135. In your change you have updated the 2nd occurrence instead. Try updating the first occurrence as I suggested earlier.

[yashgarg · Accepted solution]

Hey @Tara123 ,

Please follow the following steps:

1) Go to your online store and select Themes from left panel

2) Press 3 dots menu in center (on the left of Customize button) and then Edit Code

3) Open the file price.liquid (you can search for it)

4) In that file comment the code which currently displays the SALE badge, and instead add code for discount.

Basically find this code

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

---

And replace it with this (as shown in picture)

{%- if compare_at_price > price -%}
{% assign discount = compare_at_price | minus: price | times: 100.0 | divided_by: compare_at_price | round %}
<span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
{{ discount }}% OFF
</span>
{% endif %}

{% comment %}
<span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
{{ 'products.product.on_sale' | t }}
</span>
{% endcomment %}

---

After you do that you will be able to see something like this on your product page 

Thanks

Yash Garg

[Tara123]

Thank you Yash. It works great.

How can I make it a little bigger and in bold? How can this also show on the product image under collection (currently it shows sale)? 

[yashgarg · Accepted solution]

Hey @Tara123 ,

For adding %OFF to collections page, you can do this - 

1) Open file - card-product.liquid

2) Search for {{- 'products.product.on_sale' | t -}}

3) Replace it with following code

---

{{ card_product.compare_at_price | minus: card_product.price | times: 100.0 | divided_by: card_product.compare_at_price | round }}% OFF
{% comment %}
{{- 'products.product.on_sale' | t -}}
{% endcomment %}

---

So your final code should look like this

You will then see something like this 

For changing syling of %OFF badge on product page, you can do this:

1) Open file - component-price.css

2) Add these styles at end of file

3) Experiment with font value (decimals allowed) to get desired effect.

.price--on-sale .price__badge-sale {
font-size: 2rem;
font-weight: bold;
}

---

Thanks

Yash Garg

[Tara123]

Thanks very much Yash.

% badge styling works perfect. However, no change with collection page. Kindly see below screenshot after code change row 320-323. I want it to look the same way as what we did for product (% OFF, font bigger and in bold) .

[yashgarg]

Hey @Tara123 , 

Is % OFF visible with the code change I mentioned, or even that is not working.

Thanks

Yash Garg

[Tara123]

No, % OFF is invisible, still sale

[yashgarg]

Can you share the store link ?

[Tara123]

www.veepli.com

password: owcrae

Thank you.

[yashgarg · Accepted solution]

Thanks for sharing this. Having checked for the code again I see two occurrences of {{- 'products.product.on_sale' | t -}} in the file.

I meant changing the first occurrence which is near line 135. In your change you have updated the 2nd occurrence instead. Try updating the first occurrence as I suggested earlier.

[Tara123]

It works finally😀 How can make the font bigger and in bold?

[yashgarg · Accepted solution]

Hey @Tara123 

Glad to know it worked this time. Now for the styling:

1) Open the file base.css this time, and find ".badge" selector (without quotes)

2) You will see something similar to this

3) Now this already has font-size property, experiment with value to get desired value

4) For bold, add a new field - "font-weight: bold;" , like I suggested earlier

Thanks

Yash Garg

[Tara123]

It worked perfect!😄 Thank you so so much!!

[yashgarg]

Happy to help 🙂

[yashgarg]

For the benefit of someone who comes across this in future, I have created a Youtube video and blog post for the same.

Post: https://shopifocus.com/index.php/2024/01/15/how-to-show-discount-off-on-a-product/

Video: https://www.youtube.com/watch?v=cW5bUnQD7qo

[ctsfeir]

how to change the color of the badge? im at base.css and found badge section shown above. how to change it from black to red with hex ?

[ladcode]

Is there anyway you could do this for the Buy X Get Y automatic discounts?