Custom Savings Badge for Collections/Product Grid (Discount Shown)

Store Design
,

Topic summary

A store owner wants to display dynamic discount percentages (e.g., “Save 50%”, “Save 40%”) on product badges in their collection grid, rather than a generic sale indicator.

Current Issue:

  • The store currently shows a basic sale badge without percentage information
  • An initial CSS solution was provided that hardcodes “50%” for all products, which doesn’t reflect actual individual discount amounts (some products are 40% off, others 60%)

Proposed Solutions:

  1. Third-party apps: Multiple participants recommend using Shopify apps like “Product Labels & Badges” or “Prime Badges Labels & Stickers” that support dynamic variables (e.g., {discount_percentage}) to automatically calculate and display accurate discount percentages per product

  2. Manual configuration: One responder asks if the store owner has specific discount data set in Shopify admin for each product, suggesting a potential custom implementation path

Status: The discussion remains open, with the store owner needing a solution that automatically calculates individual product discounts rather than displaying a fixed percentage across all items.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

Hi,

As the title describes, I’d like to display the discount saved in the sales badge. So it says “Save 50%” or “Save 40%” depending on the product.

My store: https://averybyronbay.com/collections/spring-dresses
How it looks currently:

Screen Shot 2024-11-11 at 14.43.10.png
Screen Shot 2024-11-11 at 14.43.10.png2722×1482 583 KB

Reference store: https://byronbay-boutique.com/collections/clearance-dresses
How I would like it to look:

Screen Shot 2024-11-11 at 14.48.00.png
Screen Shot 2024-11-11 at 14.48.00.png2700×1344 628 KB

Thanks for any help.

2

Hi @alphabeanz

You can follow the steps here:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/ypQ7nly2wv27
Step 3: Copy the code below and paste it there

Here is the code for step 3:

.grid-product__tag.grid-product__tag--sale {
    width: 80px;
}
.grid-product__tag.grid-product__tag--sale::after {
    content: "50%";
}

Here is the result:

DaisyVo_0-1731299399595.png
DaisyVo_0-1731299399595.png1328×523 491 KB

Let me know if it works!

Best,

Daisy

3

Hi thanks for your help Daisy.

This does indeed work but now every product says 50% off.

Some are actually 60% off, some are 40%.

I need to make it accurate for the product.

4

Hi @alphabeanz ,

It’s very easy to add a % discount to your sales badge with the Product Labels & Badges app. Simply add the variable named {discount_percentage} to the text label like this:

Amanda_Fordeer_0-1731320356480.png
Amanda_Fordeer_0-1731320356480.png1298×948 92.9 KB

5

Hi @DaisyVo If you are looking to display multiple badges like percentage sales, simple low-stock, sale, out-of-stock text badges, and custom Image-based Badges on your store, you can use the Prime Badges Labels & Stickers.

6

Hi @alphabeanz ,

Do you have specific discount data for each product in Shopify admin?

Best,

Daisy

7

Hi @alphabeanz If you are looking to display multiple badges like percentage sales, simple low-stock, sale, out-of-stock text badges, and custom Image-based Badges on your store, you can use the Prime Badges Labels & Stickers.