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

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.

1 Like