Boost Your Sales: How to Display Percentage Off Badges on Shopify (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.

At Shopping Cart Mover, we understand that every detail on your product page can impact conversions. A clear, eye-catching discount badge doesn't just inform; it motivates. 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 and our own expertise.

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 offer a built-in setting for percentage-based sale badges, it's time to roll up our sleeves and delve into Shopify's templating language, Liquid. This approach gives you granular control over how discounts are displayed, ensuring accuracy and consistency across your store.

Important Precaution: Before making any changes to your theme code, always duplicate your theme. This creates a backup, allowing you to revert easily if anything goes wrong.

Method 1: Percentage Badge on Product Cards (Collection Pages)

This method is great for displaying a percentage discount on product listings within collection pages, search results, or featured product sections. It typically uses the `product.compare_at_price` and `product.price` which represent the default or lowest available price for the product.

In the Fabric theme (v4.1.1), the relevant file is often `blocks/_product-card-gallery.liquid` or a similar snippet responsible for rendering product cards.

Locate and Replace:

Find the line that displays the default 'Sale' text. It often looks something like this:

{{ 'content.product_badge_sale' | t }}

Replace it with the following Liquid code:

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

Explanation:

• `product.compare_at_price`: This is the original, higher price.
• `product.price`: This is the current, discounted price.
• `minus: product.price`: Calculates the absolute discount amount.
• `times: 100`: Multiplies the discount by 100 to prepare for percentage calculation.
• `divided_by: product.compare_at_price`: Divides by the original price to get the percentage. Liquid performs integer math, so `times: 100` before `divided_by` helps maintain accuracy for whole percentages. For decimal percentages, you could use `times: 100.0 | divided_by: product.compare_at_price | round: 0` (or `round: 1` for one decimal place).

Caveat: As noted by community member Shopatch, `product.compare_at_price` and `product.price` on product cards represent the min/max across all variants. If your product has variants with different discounts, this percentage might not always reflect the *selected* variant's discount on the product page itself. This leads us to the more robust solution for product pages.

Method 2: Dynamic Percentage Badge on Product Pages (Variant-Aware)

For the most accurate and dynamic display, especially on individual product pages where customers select variants, you need to calculate the discount based on the selected variant's prices. This ensures the percentage updates correctly when a customer chooses a different size, color, or style that might have a unique discount.

This advanced solution, expertly detailed by ajaycodewiz in the community thread, involves modifying two files:

Step 1: Modify `snippets/price.liquid`

Navigate to `snippets/price.liquid` in your theme editor (Online Store > Themes > Actions > Edit code). After the line `assign show_compare_price = ...` (or similar assignment for compare price), add the following code:

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 the `

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

{% render 'price',
  product: product,
  selected_variant: selected_variant,
  show_discount_badge: true
%}