Transform Your Shopify Sale Badge: Display Dynamic Percentage Discounts (Fabric Theme & Beyond!)

Hey fellow store owners! Ever wanted to swap that plain 'Sale' badge on your products for a snazzy '-15%' or '-25%'? You're definitely not alone! This is a super common request, and it recently sparked a really helpful discussion in the Shopify community, specifically for those rocking the Fabric theme (v4.1.1). It's a fantastic way to instantly communicate value to your customers, and it turns out, there are a few ways to get it done.

Let's dive into how you can transform those static 'Sale' labels into dynamic percentage discounts, drawing insights directly from the community's collective wisdom.

First Things First: Check Your Theme Settings!

Before we even think about touching a single line of code, a huge shout-out to community member @websensepro for reminding us of the simplest solution: always check your theme settings first! Many modern Shopify themes, including potentially your Fabric theme, have this functionality built right in. It's the path of least resistance, and frankly, the one you should always explore first.

Here's how to check for a native setting:

1. Go to your Shopify Admin > Online Store > Themes.
2. Click the 'Customize' button on your active Fabric theme.
3. On the far-left sidebar, look for the Gear icon (Theme Settings) and click it.
4. Browse through sections like 'Badges' or 'Product Grid' (sometimes it's under 'Products').
5. Look for a dropdown option like 'Sale badge format' or 'Discount type'. You might be able to simply change it from "Text" to "Percentage" or "Percent off" right there.

If you find this option, congratulations! You've just saved yourself some coding time. If not, don't worry, the community has your back with some Liquid code wizardry.

When Code is Key: Diving into Liquid Customization

If your Fabric theme (or any other theme for that matter) doesn't have that magical dropdown in the theme editor, it's time to roll up our sleeves and get into the theme's code. This is where the community discussion really shined, with members like @ajaycodewiz and @Shopatch providing some brilliant, step-by-step solutions.

The Initial Product Card Fix

Initially, @snnap was looking for a way to implement this, and @ajaycodewiz jumped in with a great starting point for product cards. This solution targets the `blocks/_product-card-gallery.liquid` file, which is responsible for how products appear on collection pages.

To implement this for product cards:

1. From your Shopify Admin, go to Online Store > Themes.
2. Click 'Actions' next to your theme, then 'Edit code'.
3. Navigate to `blocks/_product-card-gallery.liquid`.
4. Find the line that looks like this:

   {{ 'content.product_badge_sale' | t }}
   

5. Replace it with the following Liquid code to calculate and display the percentage:

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

This works great for displaying the percentage on your collection page product cards, as you can see from the screenshot @ajaycodewiz shared:

The Advanced Fix: Product Page & Variant Awareness

However, @snnap quickly pointed out a couple of common challenges after implementing the initial fix: the discount badge wasn't showing on the actual product page, and for products with multiple variants (e.g., different sizes or colors at different prices), the percentage could be wrong for the selected variant. This is a crucial point, and it's where the community really dug deep.

This is where @ajaycodewiz (again, with a refined solution!) and @Shopatch provided some brilliant insights. The key is to put the badge logic where prices are handled for the selected variant, which is usually within a dedicated `price` snippet. This ensures accuracy across all product pages and variant selections.

Step 1: Edit snippets/price.liquid

This file is often responsible for rendering product prices across your store. We'll add the discount calculation here, making it available wherever this snippet is called.

1. From your Shopify Admin, go to Online Store > Themes > Actions > Edit code.
2. Open the file `snippets/price.liquid`.
3. Find the line that starts with `assign show_compare_price = ...` (or similar).
4. Immediately after that line, add the following Liquid code to calculate the discount percentage:

   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
   

5. Next, you need to tell your theme where to display this badge. Find the opening `
   ` tag (or a similar container for your price elements) within `snippets/price.liquid`.
6. As the very first thing inside that `
   `, add the badge display code. This ensures it appears prominently next to the price:

   {%- if show_discount_badge and show_compare_price -%}
     -{{ discount_pct }}%
   {%- endif -%}
   

Pro Tip on Rounding: @Shopatch wisely pointed out that `| times: 100 | divided_by` performs integer math, giving you a clean whole number percentage. If you prefer rounding (e.g., 12.7% becomes 13%), you could adjust the calculation slightly: `| times: 100.0 | divided_by: selected_variant.compare_at_price | round`.

Step 2: Update blocks/price.liquid

Now that you've set up the logic in `snippets/price.liquid`, you need to activate it. This is usually done in a block that renders the price snippet.

1. In the theme code editor, open `blocks/price.liquid`.
2. Look for the `{% render 'price' ... %}` call. This is where your theme tells the price snippet to display.
3. Add `show_discount_badge: true` as one of the parameters in that render call. It should look something like this (your existing parameters might vary):

     show_discount_badge: true
   

This comprehensive approach ensures your discount badge is truly dynamic, updates correctly with variant selections, and only appears when there's an actual sale. It's a robust solution that addresses the nuances of product pages and variant-specific pricing.

So there you have it! From checking theme settings to diving deep into Liquid code, the Shopify community has some fantastic solutions for transforming those 'Sale' badges into eye-catching percentage discounts. If you're just starting your journey with an online store, or looking to optimize your existing one, a solid platform like Shopify can make all the difference, giving you the flexibility for these kinds of powerful customizations. Remember to always test these changes in a duplicate theme first to avoid any unexpected issues on your live store. Happy selling!