Unlock More Sales: Display 'Save ₹X' Badges on Your Shopify Dawn Theme

element, but the cleaner method, as refined by others, is to directly modify the existing badge element to change its content.

Step-by-Step Guide: Adding "Save ₹X" Badges

Based on the fantastic guidance from @mastroke and @tim_1, here's how you can implement this:

1. Duplicate Your Theme (Crucial First Step!):

   Before making any code changes, always, always, always duplicate your live theme. Go to Online Store → Themes → Actions → Duplicate. Work on the duplicated (draft) theme first to avoid breaking your live store.

2. Access Your Theme Code:

   In your Shopify admin, go to Online Store → Themes. Find your duplicated theme, click Actions → Edit code.

3. Open card-product.liquid:

   In the code editor, navigate to the Snippets folder and open the file named card-product.liquid.

4. Locate and Replace the Sale Badge Code (First Instance):

   Search for the following line of code:

   {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}

   You'll find a block of code immediately following this condition that defines the "Sale" badge. It will look something like this:

   {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
                 
                   {{- 'products.product.on_sale' | t -}}
                 

   As @mastroke showed in their screenshot, locate this section:

   

   Replace this entire block with the following code:

               {%- assign savings = card_product.compare_at_price | minus: card_product.price -%} 
                Save {{ savings | money }} 

   This code calculates the savings amount and then displays it within the existing badge structure.

   Here's how it should look after the replacement:

   

5. Locate and Replace the Sale Badge Code (Second Instance):

   @tim_1 specifically highlighted that there's another similar block further down the card-product.liquid file, typically for products with images. You need to apply the exact same replacement there. Search for the same {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%} condition and replace the subsequent block with the same new code provided in step 4.

   The code to be replaced will be similar to this, but without the NoMediaStandardBadge ID:

   
         
           {{- 'products.product.on_sale' | t -}}
         

   Replace this with:

               {%- assign savings = card_product.compare_at_price | minus: card_product.price -%} 
                Save {{ savings | money }} 

6. Save Your Changes and Preview:

   Click "Save" in the top right corner of the code editor. Then, you can preview your duplicated theme to see the changes. Check your collection pages, featured product sections, and search results to ensure the "Save ₹X" badge appears correctly.

7. Ensure Compare-at Prices are Set:

   Remember, this badge will only appear for products where you have a "Compare-at price" set in the product editor that is higher than the actual price. If you don't have this, the badge won't show up!

   

Optional: Adding Custom Styling

If you want to add a distinct style to your new savings badge (though it should inherit your theme's default badge styling), @devcoders shared some CSS that you could adapt. If you were adding a *new* badge element, this would be more relevant. Since we're modifying an existing one, it should already look consistent. However, if you want to tweak colors or fonts, you could add similar CSS to your assets/base.css file:

.save-price-badge {
  color: #d10000;
  font-weight: 600;
  font-size: 14px;
  margin-top: 4px;
}

Just remember to adjust the class name if you're targeting the existing .badge class or a new one.

It's worth noting that @swarique encountered an issue with extra spaces appearing in their code file after a paste, as shown in these images:

This kind of issue can happen if code is pasted incorrectly or if there's an unexpected character. Always double-check your copy-pasting and ensure you're replacing the correct sections. If you're unsure, starting with a fresh duplicate theme (as @swarique later tried) can help isolate if the issue is with your existing theme files or the new code. When in doubt, a collaborator request to an expert (like @devcoders offered) is always a good backup.

Implementing a clear, dynamic "Save ₹X" badge is a fantastic way to enhance your store's visual appeal and, more importantly, communicate value to your customers. Whether you opt for an app or roll up your sleeves with some Liquid code, the community's insights prove that a little customization can go a long way in boosting those conversion rates. Happy selling!