Change text for sale badge, product page

Store Design
, ,

Topic summary

A user wants to customize the sale badge on their product page to display “SAVE [amount]” instead of just “SALE”, matching the format they already implemented on product cards. They’re using the Dawn theme on their Shopify store.

Solution provided:
Dan-From-Ryviu instructed them to modify the price.liquid file in the Snippets folder by adding code below the line {{ 'products.product.on_sale' | t }}. After some iteration, the working code was:

{%- assign amount = compare_at_price | minus: price -%}
{{ amount | money_without_trailing_zeros }}

This displays the actual price saved rather than a percentage.

Outstanding request:
The user now wants to:

  • Change the badge shape from rounded corners to a rectangle (matching their product card)
  • Make the badge smaller on the product page

The discussion remains open with these styling requests unanswered.

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

Hello, i would like to change the text for my sale badge on my product page. I have changed it for my product card so that it says “SAVE ___(saved price)”. I did this by going to my default theme content and changing the sale button to say “SAVE” then I just added some code at card-product.liquid so that it would say the saved amount aswell. Im just looking for some similar code which will work for my product page, thanks

Screenshot 2025-01-09 at 10.58.55.png
Screenshot 2025-01-09 at 10.58.55.png808×101 37.7 KB

Screenshot 2025-01-09 at 10.58.59.png
Screenshot 2025-01-09 at 10.58.59.png907×293 15.7 KB

website is www.marcomontesi.com , theme is dawn

2

Hi @ads18922

Please open price.liquid file under Snippets folder, find this line of code {{ ‘products.product.on_sale’ | t }}, add this code below it

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

hello, instead of it being the percentage saved, can you make it the price saved , like the product card

4

Please update the code.

{%- assign ammount = compare_at_price | minus:price -%} {{ ammount }}%
5

Hi @ads18922

To modify the “SAVE” text in the en.default.json file of your store, follow these steps:

  1. Open the en.default.json file in your store’s theme.
  2. Search for the term “SAVE”
  3. Change the the text you want

image_720.png
image_720.png720×398 94.7 KB

I hope this helps

Best,

Daisy

6

Screenshot 2025-01-09 at 11.59.05.png

hello, this didnt work

7

Sorry, please update the code

{%- assign amount = compare_at_price | minus: price  -%}
{{ amount | money_without_trailing_zeros }}
8

thats great, one last thing would you be able to change the badge so that instead of curved corners, it is a rectangle instead - like my product card. Also can you make the badge smaller on product page, thanks!