How To Show % Discount On A Product - Dawn

Technical Q&A
,

Topic summary

A user asks how to display percentage discounts (e.g., “20% OFF”) instead of the generic “SALE” badge on products in the Dawn theme.

Solution for Product Pages:

  • Edit price.liquid file
  • Replace the “SALE” badge code with a calculation that shows the discount percentage
  • Style adjustments made in component-price.css using font-size and font-weight properties

Solution for Collection Pages:

  • Edit card-product.liquid file
  • Replace the first occurrence (around line 135) of the “SALE” text with similar discount calculation code
  • Style changes applied in base.css by modifying the .badge selector

The solution involves calculating the discount by comparing the original price to the sale price, then displaying it as a percentage. Multiple users confirm the code works successfully.

Additional Resources:

  • A YouTube tutorial and blog post were created documenting the complete process
  • Follow-up questions address changing badge colors and applying this to automatic “Buy X Get Y” discounts
  • An alternative no-code solution is suggested using the Klip Coupons app for those preferring not to edit theme files
Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
2

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

yashgarg_0-1705221172777.png
yashgarg_0-1705221172777.png2696×726 148 KB

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

yashgarg_1-1705221277198.png
yashgarg_1-1705221277198.png1170×1116 43.6 KB

Thanks

Yash Garg

3 Likes