Sale Badge into a percentage off sign

Technical Q&A
,
1

Hi all,

I’m looking for a way to change the sale 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.

My theme name is fabric(4.1.1)

2

Hi snnap — the tutorials feel outdated because they edit a label your theme now renders slightly differently, but the underlying trick is the same and it’s just a few lines.

Your badge appears wherever the theme detects compare_at_price > price. Instead of printing “Sale”, compute the discount:

{%- if product.compare_at_price > product.price -%}
  {%- assign saving = product.compare_at_price | minus: product.price -%}
  {%- assign percent = saving | times: 100 | divided_by: product.compare_at_price -%}
  -{{ percent }}%
{%- endif -%}

times: 100 before divided_by keeps a clean integer percent (Liquid does integer math). For rounding instead of flooring: | times: 100.0 | divided_by: product.compare_at_price | round.

Where to put it: search your theme for the current badge — in Fabric it’s usually a snippet used by the card and the product page, and the label comes from a translation key (search the code for on_sale or the text “Sale”). Swap that label for the block above.

One honest caveat: on a product with several variants at different discounts, product.compare_at_price / product.price are the min/max across variants, so the % can look off. On the product page, compute from the selected variant (product.selected_or_first_available_variant) instead; on the card the product-level version is usually fine.

Paste the snippet where “Sale” currently prints (file name + those few lines) and I’ll give you the exact drop-in for 4.1.1.

3

Have you tried solution in this topic – How To Show Discount/Sale Badge On Shopify (Percentage) – it’s marked as solved and that theme uses the same code as yours.

4

Hi @snnap, I was able to solve this.

I installed the fabric theme.

After editing the file blocks/_product-card-gallery.liquid here is the result I got.

image
image1802×623 114 KB

Change the line

{{ 'content.product_badge_sale' | t }}

into

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

image
image2401×1213 400 KB

Note 1: here is the deep link directly to the liquid file: https://admin.shopify.com/store/ajaycodewiz/themes/151003529393/?key=blocks/_product-card-gallery.liquid (update the store and theme code
Note 2: Just paste this reply into the shopify AI (shown in the admin dashboard) it will guide you how to do it.

5

Hi @snnap ,

Since you are using the Fabric theme (v4.1.1), you might not even need to write any custom code! Often have this setting built natively into the theme editor.

Here is how you can check and apply this:

  1. Go to your Shopify Admin > Online Store > Themes > click Customize on your Fabric theme.
  2. On the far-left sidebar, click the Gear icon (Theme Settings).
  3. Look for a section called Badges (or sometimes Product Grid / Products).
  4. Look for a dropdown option like Sale badge format or Discount type. You should be able to change it from “Text” to “Percentage” or “Percent off” right there.

Hope this helps!

Thanks!

6

Thanks a lot, bro! It worked perfectly. However,

  • The discount badge is not showing on the product page.

  • The product variant section displays the wrong discount percentage for the selected variant.

Any idea how I can fix this?

image
image509×700 106 KB

here is the product link - Bloom Drop Waist Knots – SNNAP

7

Both issues have the same cause: our earlier edit was in blocks/_product-card-gallery.liquid, which only runs on product cards, not the product page. And product.compare_at_price/product.price is the default-variant price, so the % is wrong once another variant is picked.

Sol: put the badge in the price snippet, based on the selected variant.

snippets/price.liquid — after assign show_compare_price = ... add:

assign show_discount_badge = show_discount_badge | default: false
assign discount_pct = 0
if show_compare_price
  assign discount_pct = selected_variant.compare_at_price | minus: selected_variant.price | times: 100 | divided_by: selected_variant.compare_at_price
endif

Then as the first thing inside <div ref="priceContainer">:

{%- if show_discount_badge and show_compare_price -%}
  <span style="display:inline-block;background:#e2231a;color:#fff;font-size:.75em;font-weight:600;line-height:1;padding:.25em .5em;border-radius:999px;margin-inline-end:.4em;vertical-align:middle;">-{{ discount_pct }}%</span>
{%- endif -%}

blocks/price.liquid: add one line to the {% render 'price' … %} call:

  show_discount_badge: true

Badge now shows on

  1. the product page,
  2. updates per selected variant, and
  3. hides on variants that aren’t on sale.
8

if i give you access, can you do that for me, that will be really helpful.

9

I can apply these changes for you.

10

I’m sending you the theme. I haven’t made any changes to the sale badge percentage in this theme yet, so you can apply all the necessary changes from scratch. It would be really helpful for me. Thanks!