Modify sale badge with price and discount % Dawn 15V

[ctal37]

hiii

I would like to change my sale badge into brand Zara's sale badge. In Zara's sale badge it shows product discount % and product price right inside the badge only I want that kinda badge which shows product discount % and product price after discount inside the badge.

Please check screenshot of Zara's badge : 

store url : https://5a3cf5-fc.myshopify.com/products/rhinestone

[BSSCommerce-B2B · Accepted solution]

@ctal37 ,

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file price.liquid.

Step 3. Find and remove the code i've marked here

Step 4: Find and replace the following code snippets

by this

 <span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
      {% assign discount = compare_at_price | minus: price | times: 100.0 | divided_by: compare_at_price | round %}
      -{{ discount }}%
      &nbsp;
      <span class="price-item--sale price-item--last">
        {{ money_price }}
      </span>
    </span>

It will look like this

Step 5: Save it

Hope it helps 😊

[BSSCommerce-B2B · Accepted solution]

@ctal37 , Please follow these steps again:

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file price.liquid.

Step 3. Find and replace the code i've marked here

by

<span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
      {% assign discount = compare_at_price | minus: price | times: 100.0 | divided_by: compare_at_price | round %}
      -{{ discount }}%
      &nbsp;
      <span class="price-item--sale price-item--last">
        {{ money_price }}
      </span>
    </span>

Step 4: Remove this one 

[BSSCommerce-B2B · Accepted solution]

@ctal37, I don't think it can fit in a row on small devices because it's too long. You can remove this to reduce the width of the custom element I gave you earlier.

[BSSCommerce-B2B · Accepted solution]

@ctal37 ,

Step 1: Remove this one on the previous code i've commented before

Step 2: Add this code before </body> in theme.liquid

<style>
.price__sale .price-item--regular {
  margin: 0 0.5rem 0 0!important;
}
.price__sale .price-item--sale {
  padding: 2px!important;
}
</style>

Result:

If it helps you, please like and mark it as the solution.

Best Regards  😊

[BSSCommerce-B2B · Accepted solution]

@ctal37 ,

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file price.liquid.

Step 3. Find and remove the code i've marked here

Step 4: Find and replace the following code snippets

by this

 <span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
      {% assign discount = compare_at_price | minus: price | times: 100.0 | divided_by: compare_at_price | round %}
      -{{ discount }}%
      &nbsp;
      <span class="price-item--sale price-item--last">
        {{ money_price }}
      </span>
    </span>

It will look like this

Step 5: Save it

Hope it helps 😊

[ctal37]

hey @BSSCommerce-B2B  there is a issue. this code is making the badge visible only inside the product page but there is no badge showing on homepage product and also how do I change discount % on badge. please check screenshot 

[BSSCommerce-B2B · Accepted solution]

@ctal37 , Please follow these steps again:

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file price.liquid.

Step 3. Find and replace the code i've marked here

by

<span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
      {% assign discount = compare_at_price | minus: price | times: 100.0 | divided_by: compare_at_price | round %}
      -{{ discount }}%
      &nbsp;
      <span class="price-item--sale price-item--last">
        {{ money_price }}
      </span>
    </span>

Step 4: Remove this one 

[ctal37]

@BSSCommerce-B2B now another issue, I changed the sale badge colour to pink but on home page it is still in black colour. how do I change the colour please check screenshot.

[BSSCommerce-B2B]

Sorry for the late reply. Did you hide it? I can't see it anymore.

[ctal37]

yes I've hide it.  look the discount badge is going down in few mobile view and when I try decreasing the font and other sizes to fit it in the same row then it looking so small . please help

[BSSCommerce-B2B · Accepted solution]

@ctal37, I don't think it can fit in a row on small devices because it's too long. You can remove this to reduce the width of the custom element I gave you earlier.

[ctal37]

@BSSCommerce-B2B hey it is possible check how Zara showcasing all the prices and still have space right after the badge. check screenshot and try helping. if it doesn't fit in a row thn no use of this badge. so please help

[BSSCommerce-B2B · Accepted solution]

@ctal37 ,

Step 1: Remove this one on the previous code i've commented before

Step 2: Add this code before </body> in theme.liquid

<style>
.price__sale .price-item--regular {
  margin: 0 0.5rem 0 0!important;
}
.price__sale .price-item--sale {
  padding: 2px!important;
}
</style>

Result:

If it helps you, please like and mark it as the solution.

Best Regards  😊

[ctal37]

hey it worked but look this code is decreasing the size of the badge even inside the product page but I don't want to decrease the size of the badge in here. check screenshot please

[BSSCommerce-B2B · Accepted solution]

@ctal37, change the code like this

<style>
@media only screen and (max-width: 768px) {
  .card-information .price__sale .price-item--regular {
  margin: 0 0.5rem 0 0!important;
}
.card-information .price__sale .price-item--sale {
  padding: 2px!important;
}
}
</style>

[ctal37]

not changing anything still the same 😞

[Amanda_Fordeer]

Hi @ctal37,

You can refer to the Product Labels & Badges app to customize badges according to your preferences with our new Price Badges feature.

Prices shown in the image are for illustration purposes only.