Shopify Dawn Theme: Display 'Save Amount' Badges on Product & Collection Pages

Hey there, fellow store owners! As a Shopify migration expert and someone who spends a lot of time poring over community discussions, I often see recurring themes. One topic that pops up time and again is how to make those product cards really sing, especially when you're running a sale.

Recently, a thread titled "Show Save Rs. Badge on Dawn theme at collection list and product pages" caught my eye. Our friend swarique was looking for a way to display the actual savings amount (like "Save ₹500" or "Save $10") on their Dawn theme product badges, rather than just a generic "Sale" badge. And honestly, who wouldn't want that? It's a fantastic way to instantly communicate value to your customers and nudge them towards a purchase!

Why 'Save X' Badges Make a Difference

Think about it: when you see a product with a badge that says "Sale," it's good. But when it says "Save ₹750!" or "Save 25%!", that's a whole different ball game. It's immediate, tangible value. This kind of clear communication can significantly impact your conversion rates on collection pages, search results, and even related product sections.

The Code-Based Solution: Customizing Your Dawn Theme

The community quickly jumped in with some solid code-based solutions. This approach requires a bit of comfort with editing your theme's Liquid files, but don't worry, I'll walk you through the most robust method, synthesizing the best advice from experts like mastroke and tim_1.

First Things First: Backup Your Theme!

Before you touch any code, always, always, always duplicate your theme. This is your safety net! Go to Online Store → Themes → Actions → Duplicate. Work on the duplicated version first. Seriously, don't skip this step!

Also, remember that for a "Save" badge to appear, your products need to have a Compare-at price set in the product editor. This is how Shopify knows there's a discount.

Step-by-Step Instructions for Replacing the 'Sale' Badge

Access Your Theme Code: From your Shopify admin, go to Online Store → Themes. On your duplicated theme, click Actions → Edit code.
Find the Product Card Snippet: In the file editor, navigate to the Snippets folder and open card-product.liquid. This file controls how individual product cards are displayed across your store.
Locate the Sale Badge Code (First Instance): Inside card-product.liquid, you'll find the sale badge code in two places. This is a crucial insight from tim_1 and mastroke: Dawn uses different badge markup depending on whether a product has images or not. The first instance you'll look for handles products without media.

Search for this line:
```
{%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
```
You'll find a block of code similar to this (it might have an id="NoMediaStandardBadge-..."):
```
{%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
              
                {{- 'products.product.on_sale' | t -}}
              
```
You need to replace this entire block (from {%- elsif... down to ) with the following code. This code calculates the savings and displays it within the badge:
```
            {%- assign savings = card_product.compare_at_price | minus: card_product.price -%} 
             Save {{ savings | money }} 
```
Locate the Sale Badge Code (Second Instance): Scroll further down in the same card-product.liquid file. You'll find another very similar block of code, typically used for products with images. This one will likely have an id="Badge-...".

Again, search for:
```
{%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
```
You'll see a block like this:
```
          {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
            
              {{- 'products.product.on_sale' | t -}}
            
          {%- endif -%}
```
Just like before, you'll replace this entire block (from {%- elsif... down to ) with the same savings calculation code:
```
            {%- assign savings = card_product.compare_at_price | minus: card_product.price -%} 
             Save {{ savings | money }} 
```
Quick note on currency: The | money filter automatically formats the savings amount with your store's default currency symbol (e.g., ₹, $, £). So, if your store's currency is set to INR, it will show "Save ₹X" as swarique originally wanted.
Save and Preview: Click "Save" and then preview your duplicated theme. Check your collection pages, featured product sections, and search results to ensure the "Save X" badges are appearing correctly.

Here's what the code section should look like after replacing it, as mastroke showed:

And then after replacing:

Optional: Adding Custom Styling

If you want to give your new "Save X" badge a bit more pop, you can add some custom CSS. devcoders shared a great starting point for this:

Open assets/base.css (or theme.css, depending on your Dawn version) in the theme editor.

Add the following CSS at the bottom of the file:

.badge--bottom-left {
  /* Adjust as needed, this targets the default Dawn badge position */
}

.badge.color-{{ settings.sale_badge_color_scheme }} {
  /* You can customize the color scheme via theme settings, 
     but if you want to override it with custom CSS: */
  /* background-color: #d10000; */
  /* color: #ffffff; */
  /* font-weight: 600; */
  /* font-size: 14px; */
  /* margin-top: 4px; */
}

Note: The specific class names might vary slightly based on your Dawn theme version or if you're targeting the badge added by devcoders' alternative method. The snippet above is a general guide. If you used the replacement code from mastroke, the existing Dawn badge classes will apply, so you'd target .badge or .badge--bottom-left to modify its appearance.

The No-Code Alternative: Using an App

If diving into code isn't your cup of tea, or you need more advanced customization options, there's always an app for that! omarshahban, another community member, recommended their app, "Product Badges by Win-Win." This app is designed to let you display various sale information (amount saved, percentage off) and even handle specific currency symbols like "Rs." without any coding.

While swarique encountered a small bug during installation, which omarshahban quickly offered to help with via DM, apps can be a fantastic way to achieve complex customizations without touching a single line of code. It's definitely worth checking out if the code solution feels a bit daunting.

Whether you go the code route or opt for an app, adding these dynamic "Save X" badges is a smart move for any Shopify store. It's all about making your discounts crystal clear and giving your customers that extra push to click "Add to Cart." Happy selling!

Boost Conversions: How to Show 'Save ₹X' Badges on Dawn Theme Product Cards