How to Flawlessly Hide "Sold Out" Buttons on Specific Shopify Products

Hey there, fellow store owners! It's your Shopify migration expert here at Shopping Cart Mover, 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!

Why Would You Need to Hide "Sold Out" Selectively?

Emily's use case with samples is perfect, but there are many reasons why a Shopify merchant might need this:

• Product Samples: Like Emily, you might offer samples for customers to view or order, but not purchase directly from the product page.
• Informational Products: Products that are part of a catalog, portfolio, or gallery, meant for display only.
• Discontinued Items for Reference: Keeping old products visible for historical data, customer support, or SEO, but clearly not for sale.
• Upcoming Products: Teasing new items before they're available, without displaying a "Sold Out" badge that implies they were available.
• Configurable Products: Where a base product isn't sold individually, but its variants are.

Initial Approaches & Where They Fell Short

The community, as always, jumped in with ideas. Moeed, a Shopify partner, offered an initial code-based solution. 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 approach has its merits. It targets specific collections and hides the .product-badges__badge element. However, Emily quickly discovered a limitation: while it worked on some product views, the "Sold Out" button still appeared in carousel sections, like featured collections on individual product pages. This highlighted a common challenge with global CSS injections – they don't always cover every instance, especially when themes use different classes or structures in various sections.

Moreover, editing the core theme.liquid file directly can be daunting for non-developers and carries a higher risk of breaking something if not done carefully. The !important tag, while effective, is generally best used sparingly as it can make future CSS debugging more complex.

The Elegant Solution: Theme Editor's Custom CSS

The real breakthrough came from v.marychenka, who provided a much cleaner and safer solution. Instead of modifying core theme files or injecting global CSS, the trick is to leverage Shopify's built-in theme editor and its "Custom CSS" feature for specific sections.

This method is superior because:

• Scoped Application: The CSS you add only applies to the specific section you're editing, not the entire website. This prevents unintended side effects.
• No Direct Code File Editing: You don't need to touch theme.liquid or other Liquid files, reducing the risk of errors.
• User-Friendly: It's accessible directly within the visual theme editor, making it easier for merchants without coding experience.
• Template-Specific: You can apply different rules to different product templates, giving you granular control.

Step-by-Step Guide to Hiding "Sold Out" Buttons

Here’s how you can implement this elegant solution for your Shopify store:

1. Duplicate Your Theme (Safety First!)

Before making any changes, always duplicate your live theme. This creates a backup you can revert to if anything goes wrong. Go to Online Store > Themes, find your current theme, click Actions > Duplicate.

2. Navigate to the Theme Editor

Once duplicated (or if you're confident working on a non-live theme), click Actions > Customize on your chosen theme to open the theme editor.

3. Select the Correct Product Template

In the theme editor, use the dropdown menu at the top (usually showing "Home page") to navigate to the product template used by your specific products (e.g., "Products > Default product" or a custom template like "Products > Sample Product Template"). If your sample products use different templates (like Emily's Venetian and Textured samples), you'll need to repeat this process for each one.

4. Identify the Section with the "Sold Out" Badge

Once on the product page template, look at the left-hand sidebar. This lists all the sections that make up your product page. Click on the section where the "Sold Out" button appears. This could be a "Product information" section, a "Featured collection" carousel, or another product-related section.

5. Access Custom CSS

After clicking on the relevant section, scroll to the very bottom of its settings panel in the left sidebar. You should find an option labeled "Custom CSS" or similar.

.product-badges { display: none; }

6. Paste the CSS Code

In the "Custom CSS" field, paste the following simple line of code:

.product-badges { display: none; }

This CSS targets the common class .product-badges (or sometimes .product-badge or .product-badges__badge depending on your theme) that wraps the "Sold Out" text and visually hides it. The specific class might vary slightly between themes, but .product-badges is a widely used one and worked for Emily's case.

7. Save and Test

Click the "Save" button in the top right corner of the theme editor. Then, navigate to one of your target product pages on your live store (or preview the theme) to ensure the "Sold Out" button is no longer visible.

8. Repeat if Necessary

If you have other product templates or other sections (like different carousels) where the "Sold Out" badge still appears, repeat steps 3-7 for those specific templates and sections.

Beyond "Sold Out": Other Applications of Section-Specific Custom CSS

This technique isn't just for hiding "Sold Out" badges! It's a powerful tool for making targeted design tweaks without deep coding knowledge. You can use it to:

• Hide other product badges (e.g., "New Arrival," "On Sale") on specific products.
• Adjust spacing or alignment within a particular section.
• Change text color or font size for a specific element in a section.
• Temporarily remove elements for A/B testing on certain pages.

The flexibility of Shopify's theme editor, combined with a little bit of targeted CSS, empowers merchants to achieve a highly customized store experience without needing a developer for every minor tweak. If you're looking to start your own online store or migrate an existing one, the robust features and customization options make Shopify an excellent platform choice for businesses of all sizes.

Conclusion

Dealing with the "Sold Out" button on products that aren't actually for sale can be a minor annoyance that impacts customer experience. Thanks to the collaborative spirit of the Shopify community, we have a clean, effective, and relatively code-free solution. By utilizing the Custom CSS feature within your theme editor's sections, you can precisely control your product page display, ensuring your informational products serve their intended purpose without confusing customers.

If you're grappling with more complex Shopify customizations, considering a platform migration, or just need expert advice to optimize your store, don't hesitate to reach out to us at Shopping Cart Mover. We're here to help you navigate the e-commerce landscape with ease!