Shopify Flex Theme: Hide Sold Out Stickers with Custom CSS

Running a Shopify store means you're always tweaking, always optimizing. And sometimes, it's the little things that bug us the most – like those persistent 'Out of Stock' stickers that just don't quite fit your store's aesthetic, especially when you still want to highlight your amazing 'Sale' items!

We recently saw a great discussion in the Shopify community that really drilled down into this exact problem, specifically for those of you rocking the popular Flex theme. It's a common dilemma: how do you get rid of that 'Sold Out' badge without turning off *all* your product stickers? Let's dive into what our community experts uncovered.

The 'Out of Stock' Sticker Predicament on Flex

Our store owner, MrsMacca, kicked off the conversation with a classic challenge. She loved the Flex theme but noticed that the 'Out of Stock' sticker seemed to appear inconsistently, particularly on products without variants. Her goal was clear: remove it entirely for uniformity across her site, but crucially, keep the 'Sale' sticker prominent.

This is a super common request! You want to manage customer expectations and prevent frustration, but you also don't want a visual clutter of 'Sold Out' labels on products that might just be temporarily unavailable, or where you'd prefer a cleaner look.

Why It's Not Always a Simple Toggle

One of our sharp community members, jowel-66, quickly jumped in to explain some of the Flex theme's nuances. Flex uses specific classes like thumbnail-sticker--sold-out for out-of-stock items and thumbnail-sticker--sale for sale items. This is great because it means we can target them individually!

Jowel-66 also shed light on why these stickers might behave differently with product variants. When a page loads, Shopify often selects the first *available* variant. So, if your product has multiple variants and at least one is in stock, the 'Sold Out' sticker might not appear until a customer *manually selects* a sold-out variant. It's not a bug, just how it handles initial page loads.

The Tricky Case of the Dashes: A Common Forum Pitfall

Sometimes, the solution is right there, but a tiny detail can derail it. Ecom_swift_LLC pointed out a super important, yet often overlooked, issue that can happen when sharing code in online forums: autocorrection!

When CSS code is pasted outside a proper code block, forum software can sometimes automatically convert double hyphens (--) into en dashes (–). This seemingly minor change means your CSS selector won't match the actual class name in your theme, and your code simply won't work. It's a fantastic reminder to always grab the *exact* class name by inspecting the element on your live site and to use proper code blocks when sharing!

The Community-Tested Solution: Custom CSS to the Rescue

After some back-and-forth, our community landed on a robust solution for hiding those pesky 'Out of Stock' stickers. Ploqo, another helpful expert, even went the extra mile to test the code on a live Flex store and provided clear 'Before' and 'After' visuals. This is the kind of dedication that makes our community so valuable!

Here's what Ploqo found to be the most effective CSS for hiding the 'Out of Stock' sticker across your Flex theme, leaving your 'Sale' stickers completely untouched:

Before: Out of Stock stickers showing

After: stickers hidden

Step-by-Step Instructions:

Here's how you can implement this code on your Flex theme. Remember, always back up your theme before making any code changes!

Go to your Shopify admin.
Navigate to Online Store > Themes.
Find your current theme (Flex) and click the Customize button.
In the theme editor, look for Theme settings (it's usually the gear icon on the left sidebar).
Scroll down or find the section for Custom CSS.
Paste the following code exactly as it appears into the Custom CSS box:

.thumbnail-sticker--sold-out,
.sticker-holder__content--product .price-ui-badge__sticker--sold-out {
  display: none !important;
}

Click Save.

A Quick Note on Older Flex Versions: Jowel-66 mentioned that if you're on a much older version of the Flex theme, the class name might be simpler, like .sold-out-sticker. If the code above doesn't work, you could try that class name, but the more comprehensive code from Ploqo is generally for current Flex versions.

What This Code Does (and Doesn't Do)

This CSS snippet specifically targets and hides the visual 'Out of Stock' *sticker* on both product and collection pages. It's important to remember that this *won't* remove the 'Out of Stock' text that might appear next to the price, nor will it re-enable the 'Add to cart' button for sold-out products. Those elements are handled separately by your theme's JavaScript and liquid code.

MrsMacca eventually found her own solution using Gemini, which is a fantastic reminder that there are often multiple paths to the same goal, and sometimes a little AI assistance can get you unstuck! But the power of community-shared knowledge, especially with detailed explanations and tested code like we saw here, is truly invaluable.

So, if you've been wrestling with those 'Out of Stock' stickers on your Flex theme, give this custom CSS a try. It's a clean, targeted way to refine your store's appearance and keep your focus where it should be: on those fantastic products you *do* have in stock!

Shopify Flex Theme: Expert Tips to Hide 'Out of Stock' Stickers (Keep Your Sales!)