Change Collection Page Sale Badge - Impulse Theme

[alphabeanz]

Hi,

I’m try to change my collection page sales badges from “sale” to “SAVE [percent amount]”

I also want to change the colour of the badge.

From this:

To this:

Store URL: averybyronbay.com

Thanks!

[akshay_bhatt]

Hi @alphabeanz ,

To change your collection page sales badges on averybyronbay.com from “Sale” to “SAVE [percent amount]” and adjust their color, follow these steps:

1. Edit Theme Code:

   • Go to Online Store > Themes in your Shopify admin.
   • Click Actions > Edit code on your current theme.

2. Locate and Modify Sales Badge Code:

   • In the sections or snippets folder, find the file for the collection grid (like product-card.liquid).

   • Replace the sales badge code with:

{% if product.compare_at_price > product.price %}
  {% assign discount_amount = product.compare_at_price | minus: product.price %}
  {% assign discount_percentage = discount_amount | divided_by: product.compare_at_price | times: 100 | round %}
  SAVE {{ discount_percentage }}%
{% endif %}

Change Badge Color:

• In the Assets folder, find your CSS file (like theme.scss.liquid).

• Modify the badge color:

.badge--sale {
  background-color: #yourcolorcode; /* Replace with desired color */
  color: #ffffff; /* Change text color if needed */
}

save the changes and see the update.

Got it! If you found my suggestions helpful, please consider liking or marking it as a solution.
Your feedback is appreciated! If you have any more questions or need further assistance, just let me know.

Thanks & Regards
Akshay Bhatt

[Guleria]

Hello @alphabeanz ,

No need to edit any code.
This option is by default available in Impulse theme.
Please check the screenshot

Also to change the color of badge check color settings there you will find option to change it.

If problem solved don’t forget to Like it and Mark it as Solution!

And If you need help with customization/code part you can contact me for services

You can find the email in the signature below.
Thanks