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

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.

@saitejabandaru

Where you want to show paste their code.