Unlock Savings: How to Add a Dynamic 'Save %' Badge to Your Shopify Product Prices

Hey fellow store owners! Ever scroll through a product page and think, "Man, it would be great if customers could instantly see how much they're saving?" You're not alone! This exact thought sparked a really helpful discussion in the Shopify Community recently, kicked off by clementgordon asking about adding a "Tag Save %" widget next to product prices. It's a fantastic way to highlight value and boost conversions, and thankfully, our community came through with some solid answers.

Let's dive into what we learned and how you can implement this eye-catching feature on your own Shopify store.

Unpacking the "Save %" Badge Challenge

clementgordon's initial query, accompanied by an image showing exactly what they were after, was pretty clear: how to get that little dynamic "Save %" tag right next to the product price. This isn't a default feature in most Shopify themes, including the popular Dawn theme, which means a little custom code is needed. As devcoders pointed out early in the thread, for this kind of functionality, you'll need to roll up your sleeves with some Liquid and CSS.

The good news? It's not as daunting as it sounds, especially with the clear instructions shared by community members. We’re essentially going to calculate the percentage saved and display it beautifully.

The Go-To Solution: Metric_Minded's Step-by-Step Guide

One of the most comprehensive and straightforward solutions came from Metric_Minded, who laid out a fantastic, actionable plan. This method involves adding a small Liquid snippet to calculate the discount and then styling it with CSS. This creates a brand new "Save %" badge, rather than modifying an existing sale badge.

Step 1: Open Your Price File

First things first, you need to access your theme's code. Always, always, always duplicate your theme before making any code changes! Trust me, it saves headaches down the line.

• Go to your Shopify admin: Online Store → Themes → Actions → Edit code.
• In the code editor, open the file:

snippets/price.liquid

Step 2: Find Where the Price is Printed

Inside price.liquid, you'll need to locate the section responsible for displaying your product's price. You're looking for code that prints the price, typically something like:

{{ money_price }}

or

{{ price }}

You'll want to place our new badge code right after this price output, so it appears alongside it.

Step 3: Paste the Liquid Code

Once you've found the right spot, paste the following Liquid code snippet directly after the price output:

{% 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 %}

What's happening here? This code first checks if there's a "Compare at price" that's higher than the current "Price" (meaning the product is on sale). If it is, it calculates the percentage saved, rounds it, and then displays it within a tag with a class of save-badge. This class is super important for the next step!

Step 4: Add the Styling

To make your new "Save %" badge look good, we need to add some CSS. This is where you can customize its appearance to match your brand.

• Open your main CSS file:

assets/base.css

• Scroll to the very bottom of the file and paste this CSS code:

.save-badge {
  background: #111;
  color: #fff;
  font-size: 12px;
  padding: 4px 8px;
  margin-left: 8px;
  border-radius: 6px;
  font-weight: 600;
}

Feel free to adjust the background color, color (text color), font-size, padding, and border-radius to fit your theme's aesthetic. The margin-left simply gives a little space between the price and your new badge.

Important Note: This badge will only appear if you've set a "Compare at price" that is greater than the actual "Price" in your product settings. No discount, no badge!

An Alternative Approach: Replacing the Sale Badge

While Metric_Minded's solution adds a new badge, Maximus3 offered a different, equally valid approach that involves replacing your theme's existing sale badge with a more descriptive one. Maximus3's solution (which you can find referenced in the original thread, often pulling from other related discussions) replaces the default sale badge with something like "🏷️ Save {{ savings_pct }}%".

Here's a snippet from Maximus3's suggestion, which would replace an existing block in your price.liquid. Note that the original forum snippet was truncated, but the core idea is to replace the existing sale badge logic:

  {%- 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…
  

The key difference here is whether you want to add a new badge (Metric_Minded's approach) or modify/replace your theme's default sale badge (Maximus3's approach). Both achieve a similar goal, but Maximus3's might be simpler if your theme already has a sale badge you want to enhance, while Metric_Minded's is great for adding a completely new visual element.

Key Takeaways from the Community

What I love about these discussions is how different experts offer slightly varied solutions, giving us options! Clementgordon's follow-up question asking for "complete code" highlights a common pain point for store owners – sometimes, snippets need context or minor adjustments to work perfectly. This is where testing in a duplicated theme is critical.

Whether you go with adding a new badge or modifying an existing one, the principle is the same: leverage Liquid to calculate the savings and CSS to make it visually appealing. These small tweaks can make a big difference in how customers perceive your deals and ultimately, in your conversion rates. It's a prime example of how a little custom code, guided by community wisdom, can significantly enhance your Shopify store's functionality and user experience. Happy customizing!