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 Man,

Can you help me with fix this? So the ,00 will not show anymore. Thanks man!

Scherm­afbeelding 2024-12-06 om 01.54.52.png