Mastering Your Shopify Flex Theme: How to Hide 'Sold Out' Stickers (and Keep 'Sale' Badges!)

Hey there, fellow store owners! Let's talk about something that might seem small but can make a huge difference in how professional and organized your Shopify store looks: those pesky “Out of Stock” stickers. We’ve all been there – you want to maintain a clean aesthetic, highlight your sales, but not necessarily shout about every single item that’s currently unavailable. It’s a common challenge, especially with specific themes like Flex.

Recently, I was following a really insightful discussion in the Shopify community where a store owner, MrsMacca, was grappling with this exact issue on her Flex theme. She wanted to hide the “Out of Stock” badge on her product pages, especially because it seemed to appear inconsistently on products without variants, while still keeping her “Sale” stickers proudly displayed. It’s a perfectly reasonable request, and the community really rallied to find a solution!

The Challenge: A Clean Look for 'Out of Stock' Products

MrsMacca’s core problem was that the default “Out of Stock” sticker on her Flex theme wasn’t behaving uniformly. It would show up on some products but not others, particularly those with variants. This kind of inconsistency can be a real headache for maintaining a polished brand image. Her goal was clear: get rid of the “Out of Stock” stickers entirely across her site, but definitely keep the “Sale” badges that drive urgency and conversions.

Diving into the Community Insights & Common Pitfalls

The discussion brought up some really excellent points and solutions that are super helpful for anyone looking to do similar customizations. One of the first replies, from jowel-66, shed light on how the Flex theme actually handles these stickers. They explained that Flex uses specific classes like thumbnail-sticker--sold-out for out-of-stock items and thumbnail-sticker--sale for sale items. This is key because it means you can target just the “sold out” sticker without affecting your “sale” badges.

jowel-66 also clarified the variant behavior: “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.” This is a fantastic piece of information, explaining why MrsMacca was seeing those inconsistencies.

However, getting the CSS just right can be tricky. MrsMacca mentioned that some initial code suggestions didn’t work for her. This led to a crucial insight from Ecom_swift_LLC: a “paste issue”! Sometimes, when code is posted outside of a proper code block in forums, platforms can autocorrect double hyphens (--) into en dashes (–). This seemingly minor change completely breaks the CSS selector, making the code useless. So, always be vigilant about those dashes!

The Winning Solution: Precise CSS Customization

The most comprehensive and confirmed working solution came from Ploqo, who went above and beyond. They actually investigated MrsMacca’s live store (funfidgets.com.au) and confirmed that the “Out of Stock” sticker was indeed hidden while “Sale” stickers remained. This is the kind of real-world testing that makes community discussions so valuable!

Ploqo provided specific CSS code that targets both the collection page and product page “sold out” stickers on the Flex theme. They also provided clear “Before” and “After” images, which are incredibly helpful for visualizing the change.

Before: Out of Stock Stickers Showing

After: Stickers Hidden

Step-by-Step Guide: How to Hide Those 'Sold Out' Badges

Ready to clean up your product pages? Here’s how you can implement this solution on your Flex theme:

1. Go to your Shopify admin and navigate to Online Store > Themes.
2. Find your current theme (Flex) and click on the Customize button.
3. In the theme editor, open Theme settings (it’s usually the gear icon on the left sidebar).
4. Look for Custom CSS.
5. Paste the following code into the Custom CSS box. Remember the crucial tip: copy this code exactly, making sure no dashes get mangled!

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

6. Click Save.

This code specifically targets both the general “sold out” sticker class (.thumbnail-sticker--sold-out) and the one that might appear within the product content area (.sticker-holder__content--product .price-ui-badge__sticker--sold-out), ensuring broad coverage.

What if that doesn't work perfectly?

If you find that the sticker isn’t completely gone, or if you’re on an older version of the Flex theme, jowel-66 mentioned that the class name might be simpler, like .sold-out-sticker. You can also try this more general CSS for collection pages specifically:

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

The best way to confirm the exact class name for your specific theme version is to “Inspect Element” on your live store. Right-click on the “Sold Out” badge on both a product page and a collection card, choose “Inspect,” and look for the actual class name applied to that element. Then, use that precise class in your Custom CSS.

Important Considerations

It’s important to note what this CSS won’t change. As both Ploqo and jowel-66 pointed out, this code only hides the visual sticker. The “Out of Stock” text that might appear next to the price, and the disabled “Add to cart” button, will typically remain. These are usually controlled by other parts of your theme’s code or Shopify’s inventory management system, and removing them would require more extensive theme file edits.

This community discussion is a fantastic example of how powerful a little custom CSS can be for refining your store’s appearance. It also highlights the importance of precise code and understanding how themes like Flex are structured. Whether you’re just starting out on Shopify or you’re a seasoned pro looking to fine-tune your existing setup, knowing these little tricks can save you a lot of headaches and help you present your products exactly how you envision. If you're thinking about creating your own online store and want this level of control and flexibility, you really can't go wrong with starting a Shopify store and diving into its robust customization options. Happy customizing!