Boost Your Shopify Ritual Theme: Clear Visuals for Sold Out Products

Hey fellow store owners!

Have you ever noticed how a sold-out product on your collection page can look exactly like one that’s in stock? It’s a common challenge, and it can be a little frustrating for customers who click on an item only to find it unavailable. That's why I loved seeing a recent discussion in the Shopify community about how to visually "grey out sold out products on the Ritual theme." It's a small detail that makes a big difference in user experience.

The conversation kicked off with corviday, who had recently switched to the Ritual theme and wanted a clear visual cue for unavailable products. This is a brilliant idea for improving clarity, and the community quickly jumped in with some excellent solutions. Let’s explore what we learned and how you can implement this for your own store.

Why Visually Indicating Sold Out Products Is Key

When customers browse your collections, clear visual cues prevent wasted clicks and reduce frustration. By greying out sold-out items, you immediately manage expectations and subtly guide them toward available products. It’s a simple yet powerful way to enhance your store’s user experience and encourage longer browsing sessions.

Community Insights: Solutions for the Ritual Theme

The Shopify community is a goldmine of shared knowledge! Titan from Shopplaza initially pointed out that themes like Ritual often have specific classes for sold-out badges. This means you can target them with CSS, often using the powerful :has() selector, without needing complex JavaScript. Titan also shared a crucial tip: use your browser's "Inspect" tool (right-click on the element) to find the exact class names for your theme.

v.marychenka then offered a concrete CSS snippet for the Ritual theme, suggesting it be added to the theme's Custom CSS field:

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

This code greys out the product images while keeping the "Sold out" badge visible. A vital piece of advice from v.marychenka, which I can't stress enough, is to always duplicate your theme first before making any code changes. This safeguards your store in case anything goes awry.

While some initial attempts didn't work for corviday, Ploqo provided a comprehensive, step-by-step guide that proved highly effective, complete with helpful screenshots. Ploqo's method involves adding a "Custom Liquid" section, which is a great way to inject custom CSS or Liquid code without directly editing core theme files, offering better resilience against future theme updates.

Step-by-Step: Greying Out Sold Out Products on Ritual Theme

Here’s the most robust and recommended approach, based on Ploqo's detailed instructions, to achieve this effect on your Ritual theme.

Important Pre-Step: Back Up Your Theme!

Before you touch any code, go to Online Store > Themes, find your current theme, and click Actions > Duplicate. This creates a safe copy you can revert to if needed.

Method: Using a Custom Liquid Section

This method is generally preferred as it isolates your custom code in a dedicated section.

1. From your Shopify admin, go to Online Store > Themes and click Customize on your Ritual theme.

   

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

   

3. Select Custom liquid from the section options.

   

4. Paste the following CSS code into the Liquid box:

   

5. Click Save.

   

You’ll now see your sold-out products clearly greyed out, making navigation much smoother for your customers. Here's a quick visual of the difference:

Before:

After:

Alternative: Using the Theme's Custom CSS Field

If you prefer a quicker route for small snippets, you can use your theme's dedicated Custom CSS field. Remember its character limit and that theme updates might sometimes affect it.

1. Go to Online Store > Themes and click Customize on your Ritual theme.
2. In the theme editor, click Theme settings (often a gear icon) then navigate to Custom CSS.
3. Paste this code:

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

4. Click Save.

It's worth noting that corviday eventually found success by adding a slightly different selector to the bottom of their base.css file: .card-gallery--badge-top-right:has(.color-custom-badge-sold-out) .product-media__image. This just goes to show that theme versions can vary, and sometimes a little experimentation with your browser's inspect tool is key to finding the perfect selector!

Wrapping Up: Small Tweaks, Big Impact

This community discussion perfectly illustrates how even small visual adjustments, like greying out sold-out products, can significantly enhance your store's professionalism and customer experience. The collaborative spirit of the Shopify community is truly powerful, empowering store owners like you to continually refine your online presence.

Always remember to back up your theme, and don't hesitate to use your browser's developer tools to understand your theme's structure. These thoughtful details contribute to a successful journey on Shopify. Keep exploring, keep optimizing, and keep making your stores stand out!