Show Save Rs. Badge on Dawn theme at collection list and product pages

Store Design
1

Hi Guys,

I am using Dawn theme 15.4.1. Earlier there was sale badge coming on every product. I somehow able to remove that. But I want that the product card shows the Save Rs (difference from compare at price - Actual price) on all places where product is featuring. Is there a way to do it? Your step by step guide will be very helpful and highly appreciated.

Thanks

3

Hi @swarique

1. Open Theme Code Go to: Online Store → Themes → Edit code

2. Find Product Card File Open:

snippets/card-product.liquid

3. Find the Price Section Search for:

{% render ‘price’ %}

4. Add This Code BELOW the price

{% assign save_amount = card_product.compare_at_price | minus: card_product.price %}

{% if card_product.compare_at_price > card_product.price %}
  <div class="save-price-badge">
    Save {{ save_amount | money }}
  </div>
{% endif %}

5. Add Styling (Optional) Open:

assets/base.css

Add:

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

Best regards,
Devcoder :laptop:

4

Hey @swarique I developed a solution for this exact problem. If you wanna show any combination of sale info in the badge (amount saved, percentage off, etc) and show rs instead of $, without coding anything you can check out the free version of Product Badges by Win-Win.

5

Hi, Thanks. I think there is some issue with your app. This is the page which opens after I hit install.

image
image1920×1200 273 KB

6

that’s strange. Must be a small bug. Just dm’d you so you can re-load past that page

7

Hi, I tried this by installing fresh draft Dawn theme as well. However, this did not work for me. Not sure if I am doing something wrong.

9

The code inside element which has “NoMediaStandardBadge” id is obviously only visible if product has no images.

To show badge for products with images, the edit should also be applied to the similar code further down the file:

Simply replace

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

with

Save {{ card_product.compare_at_price | minus: card_product.price | money }}