Hi does anyone know how to add the little “Tag Save %” Widget next to product price like in the example store above.
AI-generated summary
Adding a custom “Save %” badge next to product prices in a Shopify Dawn theme is the main issue. The badge is intended to show the discount based on Compare-at price versus actual price, as shown in the attached screenshots.
Key updates:
- One response says this is not a built-in Dawn feature and requires a small Liquid snippet in
snippets/price.liquid, plus CSS inassets/base.css. - The suggested logic calculates the percentage discount and displays a
SAVE {{ save_percent }}%badge only whencompare_at_price > price. - The original poster asked for the complete code because the CSS example appeared cut off.
Different solution paths were mentioned:
- One approach uses a separate custom badge element.
- Another earlier approach reportedly reuses or replaces the theme’s existing sale badge and may require enabling that badge in theme settings.
Current status:
- No final implemented solution is confirmed in the thread.
- A request was made for the store URL, and later collaborator access was requested so the code could be added directly to the theme.
- The discussion remains open and unresolved.
Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.
Best regards,
Devcoder 
Yes. That “Save %” badge is not a default Dawn feature — it’s added with a small Liquid snippet that calculates the discount from compare-at price vs price and prints a badge beside the price.
Here’s the quick way to add it in Dawn.
Step 1 — Open your price file
Online Store → Themes → Edit code
Open:
Copy code
snippets/price.liquid
Step 2 — Find where the price is printed
Search for:
Liquid
Copy code
{{ money_price }}
or the block that shows:
Liquid
Copy code
{{ price }}
You will place the badge right after the price.
Step 3 — Paste this code under the price
Liquid
Copy code
{% if product.compare_at_price > product.price %}
{% assign save_percent = product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price | round %}
SAVE {{ save_percent }}%
{% endif %}
Step 4 — Add the styling
Open:
Copy code
assets/base.css
Paste at the bottom:
Css
Copy code
.save-badge {
background: #111;
color: #fff;
font-size: 12px;
padding: 4px 8px;
margin-left: 8px;
border
-radius: 6px;
font-weight: 600;
}
Result
Whenever a product has a Compare-at price, it will show:
$86.00 [ SAVE 47% ]
Automatically calculated.
Important
This only appears if you set: Compare at price > Price in the product.
Could you please give me the complete code as I think you missed some out at the end
dogsreasy.com (WEBSITE URL)
I didn’t miss it. Just click on or go to the previous thread.. both of our solutions work. Mine uses a price tag emoji, and replaces your actual sale badge from the theme. His uses an icon with a separate element. If you go with mine, you need to enable the sale badge in theme. If you use his solution, you need to not enable the sale badge. Just go back to the thread you made about it before. Also check your Color: thread because you have an answer there too.
You want a save button here, right? For this, custom code will be required. Could you please send me collaborator access so I can implement it directly in your theme?
Best regards,
Devcoder