How to add Save % instead of on sale card button in homepage,collection page and product pages.

Store Design
, , , , ,

Topic summary

A user wants to replace the “On Sale” badge with a “Save %” discount percentage across their Shopify store (homepage, collection pages, and product pages).

Solution Provided:

  • Another user shared a tutorial link with step-by-step instructions
  • The original poster confirmed this solution worked for their store

Follow-up Issue:

  • A different user (irisbr325, using Refresh theme on seapuri.sg) attempted the same fix but encountered problems
  • Specific guidance was provided: locate card-product.liquid in the Snippets folder, find line ~140 containing {{- 'products.product.on_sale' | t -}}, and replace with custom code that calculates the percentage discount
  • The user reported the code replacement didn’t work as expected and included a screenshot showing their attempt

Current Status:

  • The issue remains unresolved for the second user, who is seeking clarification on the correct implementation method
Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

Hello community,i need ti change the sale card button from “on sale” to “Save %” for every product and in every page that they shows

Screenshot_20240806_211059_Chrome.jpg
Screenshot_20240806_211059_Chrome.jpg1080×1075 82.3 KB

Screenshot_20240806_211109_Chrome.jpg
Screenshot_20240806_211109_Chrome.jpg1080×1311 79.8 KB

Screenshot_20240806_211728_Chrome.jpg
Screenshot_20240806_211728_Chrome.jpg1078×1702 98.3 KB

Screenshot_20240806_211744_Chrome.jpg
Screenshot_20240806_211744_Chrome.jpg1080×1713 110 KB

2

Hi @VisarK

I wrote a post to provide a guide on how to do that. You can check it out here.

3

Thanks a lot @Dan-From-Ryviu it works

4

You are very welcome!

5

Hi @Dan-From-Ryviu I need some help here.

This is my URL seapuri.sg

I would like to add the save % on my collection page/home page.

I tried your well organized tutorial but it didn’t work on my refresh theme.

Can I get some help please?

6

Hi @irisbr325

  • Go to Online Store > Themes > Edit code

  • In Snippets folder, find and open card-product.liquid file.

  • Find this line of code {{- ‘products.product.on_sale’ | t -}} around line 140.

  • Replace the above code with this code.

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

Hi thank you for your prompt response!

I tried replacing the code but it didn’t work..

irisbr325_0-1729077766092.png
irisbr325_0-1729077766092.png1276×159 2.87 KB

Is this the correct way of replacing the code?

I tried replacing only the {{- ‘products.product.on_sale’ | t -}} code and leaving other two code next to it but it didn’t work as well.

How can I resolve this issue?