Shopify Pro Tip: How to Hide 'Sold Out' Badges on Specific Products (The Community-Approved Way)

Hey there, fellow store owners! It's your Shopify migration expert here, diving into another common challenge I've seen pop up in the community. You know those little head-scratchers that seem simple but can really trip you up? Well, this one's a classic.

Recently, a fantastic discussion unfolded around a pretty specific need: hiding the "Sold Out" button on some products, while still keeping them visible and unavailable for purchase. This isn't just about removing out-of-stock items; it's about products that serve a different purpose, like samples or informational pages. EmilyPopeHarris kicked off the thread with this exact dilemma, and the community rallied to find a neat solution.

The Challenge: Visible, Unavailable, No "Sold Out" Label

Emily's situation is one many of you might relate to. She has products on her Shopify site – specifically, "Venetian Samples" and "Textured Samples" – that are crucial for her "Visualizer" tool. They need to be visible, allowing customers to view details and information. However, they aren't actually for sale. To prevent purchases, she'd already set them to be out of stock. The snag? The dreaded "Sold Out" button was still showing up, confusing customers and not aligning with the products' informational purpose.

She was hoping for a theme setting to handle this, ideally avoiding custom code. It's a valid ask, as not everyone is comfortable digging into code files!

Initial Approaches & Where They Fell Short

The community, as always, jumped in with ideas. Moeed, a Shopify partner, offered a code-based solution early on. His suggestion involved adding a Liquid conditional statement and CSS to the theme.liquid file:

{% if collection.handle == 'venetian-plaster' or collection.handle == 'textured-plaster-samples' %}

{% endif %}

This code targets specific collections and hides elements with the class .product-badges__badge. Emily tried it, and it worked for the main product page! But, as she pointed out, if you scrolled down to a "featured collection carousel" view, the "Sold Out" button reappeared there. This is a common pitfall: a global change might not catch every instance, especially in dynamic sections or different product templates.

Moeed then noted that tackling the carousel view would need a more professional touch, possibly involving separate product templates and specific CSS for those. This is where the community's collective wisdom really shines!

The Community's Winning Solution: Targeted CSS in the Theme Editor

This is where v.marychenka stepped in with a brilliant, more targeted approach that Emily confirmed worked perfectly. It's elegant because it leverages the theme editor's built-in custom CSS feature, making it feel less like "hard coding" and more like configuration.

The core idea is to apply a simple CSS snippet – .product-badges { display: none; } – directly to the section where the badges appear, within the specific product templates that need the change. This way, it's scoped precisely to what you want to affect, without messing with other products or global settings.

Step-by-Step: Hiding "Sold Out" Badges the Smart Way

Here's how you can implement this solution for your own Shopify store, drawing directly from v.marychenka's excellent guidance:

1. Duplicate Your Theme (Crucial First Step!): Before making ANY changes to your live theme, always, always, always duplicate it. Go to Online Store > Themes, find your current theme, click Actions > Duplicate. This creates a backup you can revert to if anything goes awry. Shopify Support won't troubleshoot forum code on a live theme!
2. Access the Theme Editor: From your Shopify admin, go to Online Store > Themes. On your duplicated theme, click Customize.
3. Navigate to the Product Template: In the theme editor, use the drop-down menu at the top (usually says "Home page") and select Products > Default product (or the specific product template your sample products use, like "Venetian samples" or "Textured samples"). Remember, if your different sample types use different templates, you'll need to repeat this process for each one.
4. Find the Relevant Section: Once you're on the product page template, identify the section that displays the product badges or the "Sold Out" text. This is often a "Product information" section, or, as in Emily's case, a "Featured collection" or "Product carousel" section that appears further down the page. Click on that specific section in the left-hand sidebar of the theme editor.
5. Add Custom CSS: In the settings panel for that section, scroll down to the very bottom. You should see a field labeled Custom CSS. This is where the magic happens!
6. Paste the CSS Snippet: Paste the following code into the Custom CSS box:

   .product-badges { display: none; }

   This snippet targets the entire container for product badges, effectively hiding them. Note that Moeed's initial code used .product-badges__badge, which is more specific to individual badges. However, .product-badges often refers to the parent container, and hiding the parent hides all its children. Since Emily confirmed this worked, it's a reliable approach.

7. Save Your Changes: Click the Save button in the top right corner of the theme editor.
8. Repeat for Other Templates/Sections: If your sample products use different product templates (as Emily's did, using separate templates for Venetian and Textured samples), or if the "Sold Out" badge appears in different sections (like a carousel and the main product info), you'll need to repeat steps 3-7 for each relevant template and section.

You can see a visual representation of how the "Sold Out" badge appears before the fix:

This solution is fantastic because it's localized. It only affects the specific sections and templates where you apply it, leaving the "Sold Out" badges on your genuinely sold-out products (like "Granada I" mentioned in the thread) completely untouched. It’s also a great example of how powerful the Shopify theme editor's custom CSS fields can be, allowing you to make precise adjustments without needing to touch core code files.

It's always inspiring to see the Shopify community come together to solve these kinds of nuanced challenges. This thread highlights that sometimes the simplest, most targeted solution, found through collaborative effort, is the most effective. Whether you're just starting your journey with a new Shopify store or you're a seasoned merchant, remember there's a wealth of knowledge and helpful people out there to tap into!