Boost Sales: Add a Dynamic 'Save %' Discount Badge to Your Shopify Store

Hey everyone! Your friendly Shopify expert here, diving into another fantastic discussion from the community forums. You know, one of the best things about the Shopify ecosystem is how store owners and developers come together to solve common challenges. Recently, I stumbled upon a thread where a store owner, clementgordon, was asking for some "Widget Coding HELP" – specifically, how to add a neat "Tag Save %" badge right next to the product price. It's a small detail, but boy, can it make a big difference in catching a shopper's eye!

clementgordon shared an image of what they were aiming for:

That little tag showing "Save %" is a brilliant way to highlight a discount immediately, isn't it? It’s a common conversion booster, and many of us wish it was a built-in feature in every theme, especially popular ones like Dawn. As the thread quickly revealed, it's not a default, but with a little custom Liquid and CSS, it's totally achievable.

The Community Steps Up: Two Paths to Savings Badges

What I loved about this discussion was how different community members offered their take. We had Devcoder initially offering direct assistance and asking for collaborator access, which is always an option if you’re not comfortable with code. But then Metric_Minded and Maximus3 jumped in with actionable code snippets, showing how you can implement this yourself.

Maximus3 pointed back to a previous thread, suggesting a solution that involves replacing part of the price.liquid snippet with a badge that uses a price tag emoji (🏷️) and dynamically calculates the savings. This is a clever approach, especially if you want to integrate an emoji for a bit of visual flair and are happy to potentially replace your theme's existing sale badge functionality.

However, the most detailed and straightforward solution for specifically adding a "SAVE X%" badge, as clementgordon envisioned, came from Metric_Minded. This approach is fantastic because it's additive – meaning you're adding a new element rather than replacing an existing one, giving you more control. It's also super clear, which is what we need when we're diving into theme code.

Implementing Your Own "Save %" Badge (Metric_Minded's Method)

This method involves a bit of Liquid code to calculate the percentage saved and a dash of CSS to style it beautifully. Remember, before you make any changes to your theme, always, always duplicate your theme first! That way, if anything goes awry, you can easily revert to your backup. You wouldn't want to break your live store, right?

Step 1: Open Your Theme Code Editor

Go to your Shopify admin, then Online Store → Themes. Find your current theme, click the Actions button, and select Edit code.

Step 2: Locate the price.liquid Snippet

In the theme code editor, navigate to the Snippets folder and open snippets/price.liquid. This file is crucial because it's where your product prices are typically rendered across your store.

Step 3: Find the Price Output and Add the Liquid Code

Search for either {{ money_price }} or {{ price }} within price.liquid. You'll want to place the discount badge code right after where the price is printed. Here's the Liquid code snippet Metric_Minded shared, adjusted slightly for correct HTML structure and to include the necessary class for styling:

{% 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 checks if a product has a "compare at price" that's higher than its current price (meaning it's on sale). If it is, it calculates the percentage saved and wraps it in a with the class save-badge. We'll use that class for styling next!

Step 4: Add the Styling with CSS

Now, let's make that badge look good! In your theme code editor, navigate to the Assets folder and open assets/base.css (or sometimes it might be theme.css or sections-main-product.css depending on your theme, but base.css is a common spot for global styles). Scroll to the very bottom of the file and paste this CSS:

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

This CSS snippet gives your badge a dark background, white text, sets the font size, adds some padding, a little margin to separate it from the price, rounded corners, and bold text. Of course, you can tweak these values (colors, padding, font size) to match your brand's aesthetic perfectly.

Here's a visual of what Metric_Minded showed, demonstrating the effect:

After saving both files, head to your product pages, and if you've set a "Compare at price" that's higher than the actual price, you should now see your shiny new "SAVE X%" badge! It's automatically calculated, which is super convenient.

A Quick Note on Alternatives

As Maximus3 mentioned, there are other ways to approach this, sometimes even by modifying existing sale badge logic within your theme. His suggested code, found in another related thread, uses an emoji like 🏷️ and replaces a larger section within price.liquid. This can be a good option if your theme already has a sale badge you want to completely overhaul, or if you prefer a different visual style. The key takeaway here is that Shopify's Liquid templating language is incredibly flexible, allowing for many creative solutions.

Ultimately, clementgordon's question really highlights how important these small visual cues are for store owners. It's not just about listing products; it's about presenting them in the most appealing and informative way possible. Big thanks to Metric_Minded and Maximus3 for sharing their expertise and helping the community out. It just goes to show you, sometimes the best solutions come from diving into the code yourself, armed with a little guidance from your fellow store owners and experts!

Happy coding (and saving!) everyone!