Stickers

Technical Q&A
1

Hi Community,

Flex Theme.

Is there a way to hide the "out of stock: sticker on the default product page. it seem that the sticker only shows up on products without variants, so I want it gone for all, without just toggling off stickers, as I still want to show the “sale” sticker.

Thank you

2

When a variant is sold out, Flex adds the class thumbnail-sticker--sold-out to the sticker (and thumbnail-sticker--sale for sale items). So you can hide just the sold-out sticker with CSS, and the Sale sticker will still show.

The reason you mostly see it on products without variants: when the page loads, Shopify selects the first available variant. On products with variants, that’s usually one that’s in stock, so no sticker. If a customer picks a sold-out variant, the sticker will appear. It’s not a bug.

To hide it, go to Online Store > Themes > Customize > Theme settings > Custom CSS, paste this, and save. No code file edits needed:

.sticker-holder__content–product .thumbnail-sticker–sold-out {
display: none !important;
}

If you also want it gone from collection pages, use this instead:

.thumbnail-sticker–sold-out {
display: none !important;
}

Note that this only hides the sticker. The “Sold out” text next to the price and the disabled Add to cart button will stay.

If you’re on an older version of Flex, the class may be .sold-out-sticker instead.

3

Thank you, but this didn’t work. And also, it definitely does not show on products with variants, even though all variants are sold out. This is why I just want to remove it altogether so it is uniform across my site

4

Hello @MrsMacca, that’s likely a paste issue, not the selector: when the CSS got posted outside a code block, the forum autocorrected the double hyphens into en dashes, so --sold-out turned into –sold-out and stopped matching your real class name. Right-click the sold-out badge on both the product page and a collection card, choose Inspect, and grab the actual class from there, then paste it into Custom CSS inside a code block so it can’t get mangled again. That should let you hide it everywhere while leaving the Sale sticker alone. If this helped, please mark it a solution :slight_smile:

5

Thank you, but I tried that and it still didn’t work. I instead used Gemini to create the correct code and that worked, but thank you for your assistance.

6

Hi

I found your store (funfidgets.com.au) from your profile and posts.

Your store already has a rule that hides the “Out of Stock” sticker, and the “Sale” sticker is not affected. The pictures below are from your own store.

The them Flex is not in the Shopify Theme Store (only its developer sells it), so I could not install it and click through its editor. I tested the code below on your live store instead.

Before

Before: Out of Stock stickers showing
Before: Out of Stock stickers showing1736×860 201 KB

After

After: stickers hidden
After: stickers hidden1736×860 189 KB

Steps

  1. Go to Online Store > Themes.
  2. Click Customize on your current theme.
  3. Open Theme settings (the gear icon on the left).
  4. Find Custom CSS.
  5. Paste this code:
.thumbnail-sticker--sold-out,
.sticker-holder__content--product .price-ui-badge__sticker--sold-out {
  display: none !important;
}
  1. Click Save.

Copy the code above, not the code earlier in this thread. That one has long dashes in the class name, so it does nothing.

The “Out of Stock” text next to the price stays.

Regards,
Ploqo