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]

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

{{ ‘products.product.on_sale’ | t }}>

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 %}> > {{ discount }}% OFF> > {% endif %}> > {% comment %}> > {{ ‘products.product.on_sale’ | t }}> > {% 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]

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]

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]

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?

[simo555]

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.

[LittleLuxuries]

Can I hire you to put this on my store

[SevSolutions]

@Tara123 If you’re using the Dawn theme and want to show a discount on the product page (without manually editing the code or adjusting the compare-at price), it can definitely be tricky with just Shopify’s built-in tools.

One easy way to handle this—without editing your theme—is to use Klip Coupons: Sales and Discounts.

It lets you:

• Display a clippable discount directly on the product page

• Clearly show the offer amount (percentage or fixed)

• Apply the discount at checkout with no code entry required

• Customize the text and style so it fits your store’s design

You can set it up in a few minutes without touching Liquid code, and it gives you a lot more control over how and where the discount appears. A good option if you’re using Dawn and want a visual discount without modifying templates.