How to show % discount on a product using Dawn theme
Topic summary
Goal: Display the percentage discount on products in the Dawn theme.
Key points:
- The requester asked how to show a % discount on products. One response requested the store URL and a screenshot; another clarified it requires theme code editing.
Solution provided:
- A Liquid code snippet was shared to calculate and display the discount percentage on product cards. It computes the difference between compare_at_price (original price) and price (current price), divides by compare_at_price to get a fraction, multiplies by 100, and rounds to output the percentage.
- For implementing the same on the product page (with line references), a YouTube tutorial link was provided: https://youtu.be/QUkO3gBShXM
Status/outcome:
- No disagreement; the thread offers a clear, code-based approach. Implementation requires editing theme files in Dawn. The shared snippet and video serve as the actionable solution. The discussion appears effectively resolved for this use case.
Can you share your store URL and Screenshot of place where you want to add the percentage discount.
If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on mail | Shopify Design Changes | Custom Modifications In to Shopify Theme
@Cerez - it needs theme code editing, it can be done.
Hi @Cerez ,
I’m very late to answer however may be it helps others.
To implement the discount percentage on product card page, please refer the below code.
{%- assign difference = card_product.compare_at_price | minus: card_product.price -%}
{%- assign float_difference = difference | times: 1.0 -%}
{%- assign discount_fraction = float_difference | divided_by: card_product.compare_at_price -%}
{%- assign discount_percentage = discount_fraction | times: 100 | round -%}
{{- discount_percentage }}
To implement the same on product page with line number details kindly refer the video below
