What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: How To Show % Discount On A Product - Dawn

Solved

How To Show % Discount On A Product - Dawn

Tara123
Explorer
65 3 6

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 

Accepted Solutions (4)

yashgarg
Shopify Partner
102 26 37

This is an 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 %}



 

yashgarg_0-1705221172777.png

 

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

 

yashgarg_1-1705221277198.png

 

Thanks

Yash Garg

 

If this works for you, please give it a like and mark it as the solution! Thanks 🙂
Feel free to contact me for Shopify tech support
Email: yashgarg.tech@gmail.com

View solution in original post

yashgarg
Shopify Partner
102 26 37

This is an 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

yashgarg_0-1705228805686.png

 

You will then see something like this 

yashgarg_1-1705228825861.png

 

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

If this works for you, please give it a like and mark it as the solution! Thanks 🙂
Feel free to contact me for Shopify tech support
Email: yashgarg.tech@gmail.com

View solution in original post

yashgarg
Shopify Partner
102 26 37

This is an 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.

If this works for you, please give it a like and mark it as the solution! Thanks 🙂
Feel free to contact me for Shopify tech support
Email: yashgarg.tech@gmail.com

View solution in original post

yashgarg
Shopify Partner
102 26 37

This is an 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

yashgarg_0-1705300038758.png

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

If this works for you, please give it a like and mark it as the solution! Thanks 🙂
Feel free to contact me for Shopify tech support
Email: yashgarg.tech@gmail.com

View solution in original post

Replies 18 (18)

yashgarg
Shopify Partner
102 26 37

This is an 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 %}



 

yashgarg_0-1705221172777.png

 

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

 

yashgarg_1-1705221277198.png

 

Thanks

Yash Garg

 

If this works for you, please give it a like and mark it as the solution! Thanks 🙂
Feel free to contact me for Shopify tech support
Email: yashgarg.tech@gmail.com
Tara123
Explorer
65 3 6

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

 

Tara123_0-1705224898047.png

Tara123_1-1705225173418.png

 

 

yashgarg
Shopify Partner
102 26 37

This is an 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

yashgarg_0-1705228805686.png

 

You will then see something like this 

yashgarg_1-1705228825861.png

 

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

If this works for you, please give it a like and mark it as the solution! Thanks 🙂
Feel free to contact me for Shopify tech support
Email: yashgarg.tech@gmail.com
Tara123
Explorer
65 3 6

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

 

Tara123_0-1705234278111.png

 

 

yashgarg
Shopify Partner
102 26 37

Hey @Tara123 , 

 

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

 

Thanks

Yash Garg

If this works for you, please give it a like and mark it as the solution! Thanks 🙂
Feel free to contact me for Shopify tech support
Email: yashgarg.tech@gmail.com
Tara123
Explorer
65 3 6

No, % OFF is invisible, still sale

 

Tara123_1-1705238849061.png

 

 

yashgarg
Shopify Partner
102 26 37

Can you share the store link ?

If this works for you, please give it a like and mark it as the solution! Thanks 🙂
Feel free to contact me for Shopify tech support
Email: yashgarg.tech@gmail.com
Tara123
Explorer
65 3 6

www.veepli.com

password: owcrae

 

Thank you.

yashgarg
Shopify Partner
102 26 37

This is an 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.

If this works for you, please give it a like and mark it as the solution! Thanks 🙂
Feel free to contact me for Shopify tech support
Email: yashgarg.tech@gmail.com
Tara123
Explorer
65 3 6

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

yashgarg
Shopify Partner
102 26 37

This is an 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

yashgarg_0-1705300038758.png

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

If this works for you, please give it a like and mark it as the solution! Thanks 🙂
Feel free to contact me for Shopify tech support
Email: yashgarg.tech@gmail.com
Tara123
Explorer
65 3 6

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

yashgarg
Shopify Partner
102 26 37

Happy to help 🙂

If this works for you, please give it a like and mark it as the solution! Thanks 🙂
Feel free to contact me for Shopify tech support
Email: yashgarg.tech@gmail.com
yashgarg
Shopify Partner
102 26 37

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

If this works for you, please give it a like and mark it as the solution! Thanks 🙂
Feel free to contact me for Shopify tech support
Email: yashgarg.tech@gmail.com
ctsfeir
Tourist
10 0 1

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 ?

simo555
Visitor
2 0 0

Thank you for taking your time to explain so well! For me (Dawn theme) it worked only by changing both occurrences of {{- 'products.product.on_sale' | t -}} in the file.

ladcode
Visitor
1 0 0

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

LittleLuxuries
Visitor
1 0 0

Can I hire you to put this on my store