Change 'on sale' badge text to percentage discount

Topic summary

A Shopify store owner wants to replace the default ‘on sale’ badge text with a dynamic percentage discount that automatically calculates based on each product’s price difference.

Solution Provided:
A community helper (@Dan-From-Ryviu) provides custom Liquid code to calculate and display the discount percentage. The code needs to be added in two locations:

  • card-product.liquid file for collection/list pages
  • price.liquid file for individual product pages

The code calculates the percentage by comparing the original price to the sale price:

{%- assign percent = compare_at_price | minus: price | times: 100 | divided_by: compare_at_price | round -%}
Save {{ percent }}%

Key Issues Addressed:

  • Initial implementation worked on collection pages but not product pages (required updating both files)
  • For products with variants at different prices, the percentage wasn’t updating when selecting new variants (resolved with modified code using variant-specific price variables)
  • One user requested showing the saved amount in currency instead of percentage (alternative code provided)
  • Display formatting issues with decimals (e.g., showing “,00”)

Status: The solution successfully resolved the issue for multiple users, though some troubleshooting continues for specific theme implementations.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.

Hey can you please help me

I’m using dawn theme for my store but when i chose another variant on product page the buy now button gets disappeared please help me to solve this …

my website url is — https://mansaroverfurnishings.com/