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

[alphabeanz]

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:

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

Thanks for any help.

[DaisyVo]

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:

Let me know if it works!

Best,

Daisy

[alphabeanz]

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.

[Amanda_Fordeer]

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:

[Ankit6]

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.

[DaisyVo]

Hi @alphabeanz ,

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

Best,

Daisy

[Ankit6]

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.