How can I display the sale percentage on the badge in Dawn theme?

Store Design

Topic summary

Goal: Show discount percentage on sale badges in Shopify’s Dawn theme across the site (homepage, product recommendations, product page), instead of only “Sale.”

  • Product page approach: Add a Liquid snippet in Product-template.liquid to calculate and display the percentage when compare_at_price is greater than price (e.g., “You Save X%”). Liquid is Shopify’s templating language; compare_at_price is the original price.

  • Sitewide approach: Update card-product.liquid to compute discount_percentage from card_product.compare_at_price and card_product.price so it appears on product cards globally. A YouTube video link is provided to indicate exact line numbers and product page implementation specifics.

  • Implementation scope: One responder notes this is broader “customization work” across multiple templates/sections and suggests hiring a developer if needed, depending on where and how the badge should appear and be styled.

  • Status/outcome: Concrete code snippets and a tutorial video were shared, but no confirmation of successful deployment. Next steps are inserting the calculation into the badge markup in both Product-template.liquid and card-product.liquid and styling/positioning it as desired.

Summarized with AI on December 18. AI used: gpt-5.
1

Hi Legends, i hope everyone is doing great..

I need a small help..

Iam using Dawn theme..and if a product is on sale it just shows as sale.. but how can i show the % on the badge as well?

any help would be appreciated..:slight_smile:

Thanks in advance:)

1 Like
2 
{% if product.compare_at_price_max > product.price %}You Save {{ product.compare_at_price_max | minus: product.price | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}% {% endif %}

@saitejabandaru
try this code in the Product-template.liquid file.

it show the % and the remaining will be the custom code where you want to Display this into your Product.

3

Thanks for the reply @Zworthkey

I actually want it to appear on all of sales badges..home page ..product recommendations..how can i do that and wher can i paste the code ?

4

@saitejabandaru

Where you want to show paste their code.

5

@saitejabandaru

it’s total customization work. and on which products you want to show the badges.
how much % like ‘10% save’ .
For all this it takes time and you need a Developer for this.

or hire Someone to add these features into store. let me know if you need help from us.
We are always happy to help you.

Thank you.

6

Hi @saitejabandaru ,

To implement this you have to update the code for card-product.liquid to show impact globally.

Please refer the below code to implement the same.

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

For line number where to update the code and implement it on product page kindly refer the below video.

Hope this will helps..