# Widget Coding HELP **URL:** \ **Category:** Store Design\ **Tags:** design, css, troubleshooting\ **Created:** [March 27, 2026, 1:59pm UTC](https://community.shopify.com/t/widget-coding-help/599660 "2026-03-27T13:59:47Z")\ **Posts on this page:** 8\ **Page:** 1 ## 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 in `assets/base.css`. - The suggested logic calculates the percentage discount and displays a `SAVE {{ save_percent }}%` badge only when `compare_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.
**Author:** ![clementgordon](https://avatars.discourse-cdn.com/v4/letter/c/b38774/32.png) [@clementgordon](https://community.shopify.com/u/clementgordon)\ **Post date:** [March 27, 2026, 1:59pm UTC](https://community.shopify.com/t/widget-coding-help/599660/1 "2026-03-27T13:59:47Z")
![image](https://canada1.discourse-cdn.com/shopifyforum/original/4X/2/1/b/21b01ced7c3bdda956da21c238c574a7469b7433.png) Hi does anyone know how to add the little “Tag Save %” Widget next to product price like in the example store above. ---
**Author:** ![Maximus3](https://avatars.discourse-cdn.com/v4/letter/m/7ab992/32.png) [@Maximus3](https://community.shopify.com/u/Maximus3)\ **Post date:** [March 27, 2026, 2:36pm UTC](https://community.shopify.com/t/widget-coding-help/599660/2 "2026-03-27T14:36:29Z")
> [@Product Description HELP](https://community.shopify.com/t/product-description-help/599287/18): > > @clementgordon Go to price.liquid. Scroll down to the bottom. Select this exact section: REPLACE this entire section. From \ to \ Replace with this: \ {%- if compare\_at\_price \> price -%} {%- assign savings\_pct = compare\_at\_price | minus: price | times: 100.0 | divided\_by: compare\_at\_price | round -%} 🏷️ Save {{ savings\_pct }}% {%- else -%} {{ 'products… > [@Product Description HELP](https://community.shopify.com/t/product-description-help/599287/19): > > Hi @clementgordon, Apologies for the inconvenience caused. The error is happening because the icon was added using a snippet render, while in your theme the icon exists as an asset (.svg). To fix this, please replace the previously added block with the updated code below. –\> Go to: Online Store → Themes → Edit code → snippets → price.liquid Find the code you added earlier and replace it with this: {% assign compare\_price = current\_variant.compare\_at\_price | default: product.compare\_at\_pric… ---
**Author:** ![devcoders](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/devcoders/32/403479_2.png) [@devcoders](https://community.shopify.com/u/devcoders)\ **Post date:** [March 27, 2026, 2:40pm UTC](https://community.shopify.com/t/widget-coding-help/599660/3 "2026-03-27T14:40:28Z")
Hi @clementgordon 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 💻** ---
**Author:** ![Metric\_Minded](https://avatars.discourse-cdn.com/v4/letter/m/f14d63/32.png) [@Metric\_Minded](https://community.shopify.com/u/Metric_Minded)\ **Post date:** [March 27, 2026, 8:12pm UTC](https://community.shopify.com/t/widget-coding-help/599660/4 "2026-03-27T20:12:11Z")
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 ![1001328043](https://canada1.discourse-cdn.com/shopifyforum/original/4X/b/5/3/b5312f56b63b91f0f73cbb58e91fcd14ce637ee9.jpeg) -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. ---
**Author:** ![clementgordon](https://avatars.discourse-cdn.com/v4/letter/c/b38774/32.png) [@clementgordon](https://community.shopify.com/u/clementgordon)\ **Post date:** [March 28, 2026, 1:05am UTC](https://community.shopify.com/t/widget-coding-help/599660/5 "2026-03-28T01:05:00Z")
Could you please give me the complete code as I think you missed some out at the end ---
**Author:** ![clementgordon](https://avatars.discourse-cdn.com/v4/letter/c/b38774/32.png) [@clementgordon](https://community.shopify.com/u/clementgordon)\ **Post date:** [March 28, 2026, 1:05am UTC](https://community.shopify.com/t/widget-coding-help/599660/6 "2026-03-28T01:05:24Z")
[dogsreasy.com](http://dogsreasy.com) (WEBSITE URL) ---
**Author:** ![Maximus3](https://avatars.discourse-cdn.com/v4/letter/m/7ab992/32.png) [@Maximus3](https://community.shopify.com/u/Maximus3)\ **Post date:** [March 28, 2026, 1:12am UTC](https://community.shopify.com/t/widget-coding-help/599660/7 "2026-03-28T01:12:04Z")
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. ---
**Author:** ![devcoders](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/devcoders/32/403479_2.png) [@devcoders](https://community.shopify.com/u/devcoders)\ **Post date:** [March 28, 2026, 3:18am UTC](https://community.shopify.com/t/widget-coding-help/599660/8 "2026-03-28T03:18:06Z")
Hi @clementgordon 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? ![image](https://canada1.discourse-cdn.com/shopifyforum/original/4X/5/2/b/52b9b5a3631db5e0634757635cec8e91aeb50268.png) **Best regards,** **Devcoder 💻**