How can I make a sale badge a discount tag?

Shopify Discussion
, , ,

Topic summary

A Shopify store owner using the Refresh theme wanted to replace the generic “Sale” badge with a dynamic discount percentage label (e.g., “X% OFF”) that automatically calculates and displays the correct discount for products with varying discount rates.

Solution provided:

  • Edit the price.liquid file in the theme code
  • Replace the sale text with code that calculates the percentage discount: {%- assign percent = product.compare_at_price | minus:product.price | times:100 | divided_by:product.compare_at_price | round -%} {{ percent }}% OFF
  • For styling (bold font, rounded corners, specific hex color #1777f2), add custom CSS to section-main-product.css

Status: The solution was successfully implemented and confirmed working by the original poster.

Open question: A follow-up user asked how to apply this discount badge across all product variants with different prices, which remains unanswered.

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

I want the label to say “X% OFF”. How can I do that?