Change Collection Page Sale Badge - Impulse Theme

Store Design
,

Topic summary

A user wants to modify collection page sale badges in the Impulse Shopify theme to display “SAVE [percent amount]” instead of “SALE” and change the badge color.

Two Solutions Provided:

  1. Custom Code Approach: One responder suggested editing theme files (product-card.liquid) to add Liquid code calculating discount percentages and modifying CSS for badge colors. This involves manual code changes in the theme editor.

  2. Built-in Theme Feature: Another responder clarified that the Impulse theme includes this functionality by default—no coding required. They provided a screenshot showing where to find the badge settings in the theme customization panel, including options for both badge text format and color changes.

The simpler solution appears to be using the theme’s native settings rather than custom code modifications.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

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:

Screen Shot 2024-11-05 at 02.01.46.png
Screen Shot 2024-11-05 at 02.01.46.png700×765 189 KB

To this:

Screen Shot 2024-11-05 at 02.06.19.png
Screen Shot 2024-11-05 at 02.06.19.png566×521 132 KB

Store URL: averybyronbay.com

Thanks!

2

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

3

Hello @alphabeanz ,

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

impulse-badge.png
impulse-badge.png447×886 25.8 KB

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