Grey Out Sold-Out Variants: The Easy Way to Improve Your Shopify Store's UX

Making Sold-Out Variants Clearer: A Community Discussion

Hey everyone! I was browsing the Shopify Community forums the other day and came across a really common question: how to visually indicate sold-out variants on a product page. User @kinddogshop, who runs Red Bark Shop, a dog-themed store, was having this exact issue with their Retina theme. They wanted to make it super clear to customers which sizes and colors of their sweaters were currently unavailable. Let's dive into the solutions the community offered!

The problem, as @kinddogshop described it, was that customers had to click through all the variants to see what was actually in stock. Not a great user experience, right?

Here's the original question:

I’m using the Retina theme and run a dog themed shop where there are sizes and colors for a certain sweater.

It’s really hard for a visitor to identify visually what is in stock by clicking on the variants. Is there a way to either grey out or strike out availability when something is out of stock?

Let's see what the community came up with.

Theme Settings and Quick Fixes

First off, @Maximus3 suggested checking the theme settings. This is always a good first step! Many themes have built-in options for handling sold-out variants. They even included a screenshot of a setting that looked promising:

Turns out, @kinddogshop already had the "Hide sold-out variants" setting disabled, which is what they wanted (they didn't want to hide them, just visually indicate they were out of stock).

Then, @oscprofessional chimed in, confirming that the Retina theme doesn't handle this visually by default and suggested a CSS tweak. They recommended keeping "Hide sold-out variants" off and adding CSS to grey out or strike out the options. Here's the initial CSS snippet they suggested:

.options-selection__option-values .options-selection__option-value:last-child {
  display: none;
}

However, this code didn't quite solve the problem, as @kinddogshop was looking for a way to grey out or strike out the unavailable options, not hide them completely.

CSS Solutions for Greying Out and Striking Through

This is where things got interesting! @Moeed provided a CSS solution to grey out the unavailable variants. They suggested adding this code to the bottom of the theme.liquid file, just above the tag:

This code targets the labels of variant options that are not available and reduces their opacity, effectively greying them out. @kinddogshop confirmed this worked perfectly!

But the solutions didn't stop there! @tim_1 offered an alternative CSS snippet that could be added to the "Custom CSS" section of the theme settings (or a "Custom code" / "Custom liquid" section):

label:has([data-variant-option-available="false"]) {
  opacity: 0.25;
}

This achieves a similar effect to @Moeed's code, but it's a bit more concise. @tim_1 also provided code to add a diagonal line through the unavailable options:

And, if you're feeling fancy, you can combine both the opacity change and the strikethrough!

Using Apps for More Control

Finally, @zulfali suggested using the Rubik Variant Image & Swatch app. This app offers a lot of customization options, including the ability to visually indicate out-of-stock variants, change the color of the strikethrough line, or remove it altogether. It's a great option if you want more control over the look and feel of your variant selectors.

Key Takeaways

So, what did we learn from this community discussion? First, always check your theme settings! You might be surprised at what's already built in. Second, CSS can be a powerful tool for customizing your store's appearance. And finally, there are apps available that can provide even more control over your variant selectors.

Ultimately, the best solution for you will depend on your specific needs and preferences. But hopefully, this overview of the community's suggestions has given you a good starting point for making your sold-out variants clearer and improving your store's user experience. Good luck!