How to Visually Grey Out Sold-Out Products on Your Shopify Ritual Theme

Hey everyone! As a Shopify migration expert and community analyst, I spend a lot of time digging through the forums, and let me tell you, it's a treasure trove of practical solutions. Recently, I stumbled upon a fantastic discussion that tackled a common, yet often overlooked, UX challenge: how to visually distinguish sold-out products on your store, especially for those of you rocking the Ritual theme.

Our friend corviday kicked off the thread, asking for a way to "grey out sold out products in product/collection grids to make it more obvious something is no longer available." And honestly, it's such a smart move! Nothing's more frustrating for a customer than clicking on an item, falling in love with it, only to find out it's gone. A clear visual cue upfront saves everyone time and improves the shopping experience. It's a small detail, but these are the kinds of refinements that really elevate a store.

Why Greying Out Sold-Out Products Matters

Think about it: when a product is out of stock but still looks vibrant and available, it can lead to confusion and disappointment. By greying out or dimming these items, you immediately signal to your customers that while the product exists, it's not currently purchasable. This subtle visual cue improves your store's user experience (UX) by:

• Reducing Frustration: Customers won't waste time clicking on unavailable items.
• Improving Clarity: It makes product availability instantly clear at a glance.
• Maintaining Aesthetic: You can keep sold-out products on display without cluttering your active inventory, perhaps to show off your range or hint at future restocks.

The Community's Insight: Leveraging CSS and the :has() Selector

What I loved about this thread was how quickly the community converged on a robust CSS solution, specifically using the :has() selector. This is a relatively newer CSS pseudo-class that allows you to select an element based on whether it contains (or "has") a specific child element. In our case, it lets us target a product card only if it contains a "sold out" badge.

Several community members chimed in with variations, highlighting that the exact class names for the product card, image, and sold-out badge can sometimes differ slightly between theme versions. This is why it's always good to have a few options up your sleeve!

Method 1: The Robust "Custom Liquid" Section Approach (Recommended)

One super helpful user, Ploqo, provided an incredibly detailed, step-by-step guide that worked beautifully on the Ritual theme. This method involves adding a "Custom liquid" section, which is a great way to inject custom CSS without directly editing your theme's core files, making it a bit safer for future theme updates.

Here's how Ploqo laid it out, complete with visual aids:

Before & After: A Visual Difference

First, let's see the impact. Here's what a sold-out item looked like before any changes:

And here's the "After" – much clearer, right?

The Steps:

1. Go to your Shopify admin, navigate to Online Store > Themes. Find your Ritual theme and click Edit theme.

2. In the left sidebar, scroll down and click Add section.

3. From the list of available sections, pick Custom liquid.

4. Paste this code into the Liquid box:

5. Click Save.

Method 2: Using the Theme Settings "Custom CSS" Field

Another excellent suggestion came from v.marychenka, who pointed out that for small snippets, you can often use the theme's built-in "Custom CSS" field. This is usually found under Online Store > Themes > Customize > Theme settings > Custom CSS.

The code they provided was slightly different but achieved a similar effect:

product-card:has(.color-custom-badge-sold-out) img {
  filter: grayscale(1);
  opacity: 0.6;
}

This snippet specifically targets only the card images, leaving the "Sold out" badge itself untouched, which can be a nice aesthetic touch.

Method 3: Direct Edit to base.css (Use with Caution)

Corviday, the original poster, actually found a solution that worked for them by adding code to the bottom of their base.css file. This is another valid approach, but it requires digging into the theme code directly. If you go this route, be aware that theme updates could potentially overwrite your changes or introduce conflicts. The code they used was:

.card-gallery--badge-top-right:has(.color-custom-badge-sold-out) .product-media__image {
  opacity: 0.3;
  filter: grayscale(1);
}

Important Considerations from the Community

No matter which method you choose, there are a couple of crucial pieces of advice that came up in the thread:

• Duplicate Your Theme First: Always, always, always duplicate your live theme before making any code changes. This gives you a safe rollback point if anything goes awry.
• Shopify Support: As v.marychenka rightly pointed out, "Shopify Support won’t troubleshoot forum code." Custom code is your responsibility, so proceed with care.
• Theme Updates: Be mindful that a theme update can sometimes stop custom CSS from working, especially if you're editing core files or if the theme's underlying structure changes. Give your product grids a quick check after any theme updates.

This community discussion really highlights the power of shared knowledge. While the exact CSS selectors might vary slightly depending on your theme version or even specific page elements, the core principle of using :has() with filter: grayscale() and opacity is a solid approach. A big thanks to Ploqo, v.marychenka, shopplaza_team (Titan), and corviday for their contributions! It's these kinds of collaborative efforts that make the Shopify community so invaluable for store owners looking to fine-tune their online presence.