Widget Coding HELP

[clementgordon]

Hi does anyone know how to add the little “Tag Save %” Widget next to product price like in the example store above.

[Maximus3]

Product Description HELP

@clementgordon Go to price.liquid. Scroll down to the bottom. Select this exact section: [Screenshot 2026-03-25 182629] REPLACE this entire section. From <span> to </span> Replace with this: <span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}"> {%- 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

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…

[devcoders]

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

[Metric_Minded]

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.

[clementgordon]

Could you please give me the complete code as I think you missed some out at the end

[clementgordon]

dogsreasy.com (WEBSITE URL)

[Maximus3]

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.

[devcoders]

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?

Best regards,
Devcoder