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.
1

Ekran Resmi 2024-07-04 20.09.43.png

I changed the “Sale” label next to the price to “Limited Edition”.

But what I really wanted was to show the discount amount of the product here.

I have several products with different discount percentages. How can I create a label that shows the correct discount for all of them?

Label Colour Hex Code: #1777f2
Font: Bold
Corner: Rounded, 6px

2

Hi @FelaC

What theme are you using? Could you share your store URL?

3

Sure. https://buythewall.com/products/official-maga-2024-supporters-baseball-cap

It’s the Refresh Theme.

4

Go to your Online Store > Themes > in Refresh theme, click “…” > Edit code > open price.liquid file, find this line of code

{{ 'products.product.on_sale' | t }}

Replace it with this code and save the file.

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

Relate to change color of this button, you can find it in Theme customize, theme settings

Screenshot 2024-07-05 at 11.13.42.png
Screenshot 2024-07-05 at 11.13.42.png1627×830 203 KB

5

Hello @FelaC ,

  1. For Label Colour Hex Code: #1777f2
    Font: Bold
    Corner: Rounded, 6px

Go to online store ---------> themes --------------> actions ------> edit code------->assets------>section-main-product.css
add this code at the bottom of the file.

.product .price .badge, .product .price__container {
background: #1777f2;
height: 28px;
font-weight: bold;
border-radius: 11px;
}

and the result will be

1.png
1.png1920×803 159 KB

If this was helpful, hit the like button and mark the job as completed.
Thanks

6

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

7

Update the code

{%- assign percent = product.compare_at_price | minus:product.price | times: 100 | divided_by:product.compare_at_price | round -%}
{{ percent }}% OFF
1 Like
8

Thank you. It worked!

1 Like
9

You are very welcome!

10

You are very welcome

Regards,

Dan

11

Hello Dan, I implemented this but how to a make this apply to all variants with different prices