How To Show Discount/Sale Badge On Shopify (Percentage)

[CoverArt1]

Hi all,

I’m looking for a way to change the sale ‘uitverkoop’ Badge into a percentage off sign. I was looking into the community for answers, but these are all outdated, the new Edit code tab and I think my theme is also different from all the tutorials I could find.

I’m sure it’s probably not that different, but I need to find the right snipped in my code.

This is how it looks right now:

This is what I would like to see: (WITH AUTOMATED CALCULATIONS ON % OFF)

My Shopify theme: Fabric

My website url (No password): https://www.coverart.nl/

Help would be much appreciated.

Greetings from Holland,

CoverArt, Tom

[Nordalux]

Here is a solution to implement this:

{%- liquid
  assign current_product = product | default: item.product | default: line_item.product
  assign current_variant = variant | default: current_product.selected_or_first_available_variant
  assign show_badge = show_badge | default: true
  
  assign compare_price = current_variant.compare_at_price | default: current_product.compare_at_price
  assign current_price = current_variant.price | default: current_product.price
  
  assign has_discount = false
  assign discount_percentage = 0
  
  if compare_price > current_price
    assign has_discount = true
    assign price_difference = compare_price | minus: current_price
    assign discount_percentage = price_difference | times: 100.0 | divided_by: compare_price | round
  endif
-%}

{%- if has_discount and show_badge -%}
  <span class="discount-badge {{ badge_class }}" aria-label="{{ discount_percentage }}% OFF">
    -{{ discount_percentage }}%
  </span>
{%- endif -%}

Accordingly, you must place this in the correct location and adjust the variables. However, the output {{ discount_percentage }} remains the same.

[CoverArt1]

Hi Nordalux, but where do I put this code?

[CoverArt1]

This locations seems to be in charge of the layout and input. I changed the font size here and it did change the right thing.

\themes\192928940381\Fabric\snippets\product-card-badges.liquid

[Nordalux]

I don’t have Fabric in my customer base yet. Therefore, I can’t tell you exactly where it is. I suspect it’s in collection-grid.liquid.

Here, I would search for the CSS class product-badges__badge product-badges__badge–rectangle and start customizing there. First in the CLI, then upload to the live theme.

[tim_1]

Fabric is a Horizon family theme, so you can look for solutions for any of them, like Horizon, Atelier, Savor, etc…

Say, there is a solution like this: Adding Just Added Badge to Horizon - #2 by tim_1 which can be combined with the code above…

[Dan-From-Ryviu]

Please go to your store admin > Sales channels > Online Store > Themes > click “…” > Edit code, open product-card-badges.liquid find this line of code

{{ 'content.product_badge_sale' | t }}

Then replace it with this code.

        {%- assign percent = product.compare_at_price | minus:product.price | times: 100 | divided_by:product.compare_at_price | round -%}
       {{ percent }}% OFF

[suyash1]

@CoverArt1 please open collection page in customize settings and check if your theme has an option to activate the badges, if no then it needs to be added via code. I can assist you with the coding if you are not familiar with the coding.

[oscprofessional]

Hi @CoverArt1 ,
You can replace the default “Uitverkoop” sale badge with an automated percentage discount badge by editing your theme’s price / card snippet.

How to show “XX% OFF” instead of “Uitverkoop” (Fabric Theme)

1. Go to Online Store → Edit code
2. Open the snippet that renders the product card badge. In Fabric, this is usually one of these files:

• snippets/product-badge.liquid
• snippets/card-product-badge.liquid
• snippets/card-product.liquid
  (Search for: badge, sale, or uitverkoop inside your snippets.)

3. Find the code where the sale badge is printed. It normally looks like:

<span class="badge badge--sale">
  {{ 'products.product.on_sale' | t }}
</span>

4. Replace it with this automatic percentage calculation:

{% if product.compare_at_price > product.price %}
  {% assign regular = product.compare_at_price %}
  {% assign sale = product.price %}
  {% assign discount = regular | minus: sale %}
  {% assign percent = discount | times: 100 | divided_by: regular | round %}

  <span class="badge badge--sale">
    {{ percent }}% OFF
  </span>
{% endif %}

[andrwmai]

Hi Dan,

Thank you so much for your help! I was looking for a solution and this just works!

However, I notice that the percentage only shows in the collection page. Can you guide me so it also shows in the homepage (featured collection) and the product page? Thank you so much!

[Dan-From-Ryviu]

@Dan-From-Ryviu

        {%- assign percent = product.compare_at_price | minus:product.price | times: 100 | divided_by:product.compare_at_price | round -%}
       {{ percent }}% OFF

The code I gave you should work on the Featured collection, also. For the product page, please open snippets > price.liquid file, add the code below above </div> in very bottom of the file

  {%- if selected_variant.compare_at_price > selected_variant.price -%}
    {%- assign percent = selected_variant.compare_at_price | minus:selected_variant.price | times: 100 | divided_by:selected_variant.compare_at_price | round -%}
    {{ percent }}% OFF
  {% endif %}

[andrwmai]

Hi Dan,

Thanks for getting back to me. The code eventually applied to the Featured collection.

However, for the product page, I added your code as instructed but there’s no percentage label shown: CARNIVAL 8110G1-VT-DD-D | G-Watch
Can you take a look? Thank you.

[andrwmai]

Actually, now it’s showing. Although I refreshed many times, it still didn’t show, but when I click on the link in my previous reply, it does. Very oddly interesting…

Thank you so much!