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

Hey @Tara123 , Please follow the following steps: Go to your online store and select Themes from left panel Press 3 dots menu in center (on the left of Customize button) and then Edit Code Open the file price.liquid (you can search for it) In that file comment the code which currently d…

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]

Hey @Tara123 , For adding %OFF to collections page, you can do this - Open file - card-product.liquid Search for {{- ‘products.product.on_sale’ | t -}} Replace it with following code {{ card_product.compare_at_price | minus: card_product.price | times: 100.0 | divided_by: card_product.…

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]

Hey @Tara123 , Is % OFF visible with the code change I mentioned, or even that is not working. Thanks Yash Garg

No, % OFF is invisible, still sale [Tara123_1-1705238849061.png]

www.veepli.com password: owcrae Thank you.

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 su…

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

Hey @Tara123 Glad to know it worked this time. Now for the styling: Open the file base.css this time, and find “.badge” selector (without quotes) You will see something similar to this [yashgarg_0-1705300038758.png] Now this already has font-size property, experiment with value to get …

How To Show % Discount On A Product - Dawn

Technical Q&A

Tara123 January 15, 2024, 7:35am 13

It worked perfect! Thank you so so much!!

Topic		Replies	Views
How To Show % Discount Technical Q&A	12	1719	February 16, 2025
Displaying percentage price on Top Left (Dawn Theme) Store Design product-page	13	175	September 13, 2024
Show percent off badge instead of sale Store Design design , customizations , collection-page , css	5	513	October 11, 2024
how to show percentage discount on product page shopify Store Design	7	187	September 26, 2024
How can I display sale percentage in Dawn theme's sale badge? Store Design	48	901	November 21, 2024

How To Show % Discount On A Product - Dawn

Related topics