Collection page - change SALE badge to Amount Saved

Store Design
1

Hi,

Can somebody help me? How can I change the SALE Badge on my collection page to “SAVE AMOUNT IN EUROS”?

My current collection page: Luxe huispak dames kopen? Shop nu luxe loungewear dames

How I want it to be:

save amount in sale badge
save amount in sale badge1867×865 230 KB

3 Likes
2

Hi @GVDK1017

snippets/card-product.liquid

Open the file snippets/card-product.liquid and find the following code:

       <div class="card__badge {{ settings.badge_position }}">
            {%- if card_product.available == false -%}
              <span
                id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
                class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}"
              >
                {{- 'products.product.sold_out' | t -}}
              </span>
            {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
              <span
                id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
                class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"
              >
                {{- 'products.product.on_sale' | t -}}
              </span>
            {%- endif -%}
          </div>

Replace it with the following code:

<div class="card__badge {{ settings.badge_position }}">
  {%- if card_product.available == false -%}
    <span
      id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
      class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}"
    >
      {{- 'products.product.sold_out' | t -}}
    </span>

  {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
    {%- assign save_amount = card_product.compare_at_price | minus: card_product.price -%}
    <span
      id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
      class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"
    >
      SAVE {{ save_amount | money }}
    </span>
  {%- endif -%}
</div>

Best regards,
Devcoder :laptop:

3

I have changed it, but there isnt anything changing

4

The best solution it that you need to go Shopify Admin >> Edit Code >> Search for SALE Badge and then you will find that keyword in the locale file.

Simply go to this file, and then change it with the new keyword.

5

thanks but this is not what i mean. I want to show up the amount that my customer is saving. for example: SAVE €30

1 Like
7
  • In snippets folder, find and open card-product.liquid file.
  • Find this line of code {{- ‘products.product.on_sale’ | t -}} around line 140.
  • Replace the above code with this code.
{% assign percent = card_product.compare_at_price | minus:card_product.price %}
  <span class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}">
    SAVE {{ saved | money }}
  </span>

Best regards,
Dan from Ryviu: Product Reviews App

8

I have done this but still there is no change. My theme is dawn.

9

My Theme is Dawn

Met vriendelijke groet/With kind regards,

image.png2805×407 11.7 KB

www.loungeweare.com

Op di., feb. 10, 2026 om 22:37, IfeanyiEcommerce notifications@community.shopify.com schreef:

1 Like
10

hey @GVDK1017 first of all i don’t think so you need a code try this method
first go to your shopify admin panel and then select the online store option and then in your right hand side you can see the three dots option

image
image261×140 2.89 KB

click on it and then select the last option
image
image350×288 12.5 KB

and then go to the search option and search badge
image
image1004×747 31.5 KB

and now then you can change the badge by your self
if it is work don’t forget to mark as solution on it
best
MUSTUFA

11

Thanks but this is not what I mean. I want a dynamic message showing the exact amount saved in euros (e.g., “Save €X”).

12

If you don’t mind, please share the collab request code so I can help you.