Shopify Pro Tip: How to Hide \"Sold Out\" Buttons on Specific Products (Without Losing Them!)

Hey there, fellow store owners! Let's dive into a super common, yet often tricky, Shopify customization that recently sparked a great discussion in the community: how to hide that pesky "Sold Out" button on specific products you want to keep visible but aren't actually for sale. It's a fantastic question, and one I see come up a lot, especially for those of you using products as informational pages, samples, or portfolio pieces.

Our friend EmilyPopeHarris kicked off the thread with a classic dilemma. She has these awesome "Venetian Samples" and "Textured Samples" that are part of her Visualizer, needing to be seen but not purchased. She'd set them to 'out of stock' to prevent sales, which is smart, but then the "Sold Out" badge popped up, cluttering the page and potentially confusing customers. Emily was hoping for a theme setting solution, which is always the dream, right?

The Initial Approach: Taming "Sold Out" with Code

Right off the bat, our community expert Moeed jumped in with a solid code-based solution. The idea here is to inject a bit of CSS directly into your theme's main layout file, theme.liquid, but with a clever twist: only apply it to specific collections. This is crucial because you usually don't want to hide "Sold Out" messages everywhere!

Moeed's "Theme.liquid" Method

Moeed's suggestion was to add a conditional Liquid snippet that checks which collection a product belongs to and, if it matches, applies some CSS to hide the product badge. Here's how you'd do it:

1. Go to your Shopify Admin.
2. Navigate to Online Store > Themes.
3. Find your current theme, click Actions > Edit Code.
4. In the files list, find and open the theme.liquid file.
5. Scroll to the very bottom of the file and paste the following code just above the tag:

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

{% endif %}

Remember to replace 'venetian-plaster' and 'textured-plaster-samples' with the actual handles of your collections. If you have more collections, you can add more or collection.handle == 'your-collection-handle' conditions.

This method worked well for Emily on the main product pages. Moeed even shared a helpful screenshot:

The Carousel Conundrum: When Elements Play Hide-and-Seek

Here's where it got interesting! Emily noticed that while the main product page was clean, the "Sold Out" button reappeared in the featured collection carousel that sometimes shows up on individual product pages. This is a common pitfall with CSS – different sections or templates might use different selectors or render content in a way that escapes a global CSS rule.

Moeed correctly pointed out that the carousel view often requires a more targeted approach, perhaps even a separate product template. But then, another community member, v.marychenka, swooped in with an elegant solution that leverages Shopify's built-in theme editor features, making it super accessible even for those who prefer not to dig into code files directly.

v.marychenka's Theme Editor Custom CSS Method (The Carousel Fix!)

This approach is fantastic because it allows you to apply CSS directly to a specific section within the theme editor, scoping the changes beautifully. This means the CSS only affects that particular section on pages using that template, preventing unintended side effects elsewhere.

Here's how to implement it:

1. Always duplicate your theme first! This is non-negotiable for any code or significant theme changes. Go to Online Store > Themes > Actions > Duplicate.
2. Go to your Shopify Admin, navigate to Online Store > Themes.
3. Click Customize on your duplicated theme.
4. In the theme editor, use the drop-down menu at the top (usually says "Home page") to open the product template that your sample products use (e.g., "Default product"). If your samples use different templates, you'll need to repeat this for each one.
5. Once on a sample product page template, click on the relevant carousel section in the left-hand sidebar (it might be called "Featured Collection" or "Related Products").
6. In the section's settings panel, scroll down to the bottom and click on Custom CSS.
7. Paste the following code into the Custom CSS box:

.product-badges { display: none; }

8. Click Save.
9. Repeat these steps for any other product templates that your sample products use (like Emily's "Venetian" and "Textured" samples).

Emily confirmed this method worked perfectly for her carousel issue. A crucial point Moeed raised earlier was that .product-badges might hide *all* product badges, not just the "Sold Out" ones. In Emily's case, this was acceptable, or perhaps the carousel only displayed the "Sold Out" badge. It's a good reminder to always inspect your elements and test thoroughly to ensure you're hiding exactly what you intend to!

Bringing It All Together: Your Options for Hiding "Sold Out"

So, what's the takeaway? You've got a couple of powerful options, depending on your theme and how widely you need the change to apply:

• For global or collection-specific hiding on main product pages: Moeed's theme.liquid method with conditional Liquid is a solid choice. It's a bit more "under the hood" but gives you broad control based on collections.
• For section-specific hiding (like carousels or specific blocks): v.marychenka's theme editor Custom CSS method is incredibly elegant. It keeps your changes localized and uses Shopify's built-in features, which can be safer for long-term maintenance.
• For ultimate control and scalability: Consider creating custom product templates for your sample products. This allows you to design a completely unique layout for them, including removing badges, purchase buttons, or anything else you don't want. Then, you can assign these custom templates to your sample products. This is often the "professional" path Moeed alluded to for a more robust, long-term solution, especially if you have many unique product types.

Ultimately, this community discussion highlights the flexibility of a platform like Shopify. Even when a direct setting isn't available, there are always clever ways to achieve your desired look and functionality, often with a little CSS magic and the collective wisdom of other store owners. Don't be afraid to experiment (on a duplicated theme, of course!) and tap into the vibrant Shopify community for insights. Happy customizing!