Enhance Shopify UX: Visually Mark Out-of-Stock Variants on Product Pages

Hey there, fellow store owners! Let's talk about something super common that can make or break a customer's experience on your product pages: clearly showing what's in stock and what's not. We recently saw a fantastic discussion pop up in the Shopify Community, started by kinddogshop, a store owner running a charming dog-themed shop with their Retina theme. Their challenge? When customers clicked through different sizes and colors of a sweater, it was hard to tell which combinations were actually available. Sound familiar?

This isn't just a minor detail; it's a crucial part of user experience. Imagine a customer falling in love with a product, only to click through variants and realize their preferred size and color isn't available, with no clear visual cue. Frustrating, right? That's exactly what kinddogshop was trying to fix, and the community rallied with some excellent solutions. At Shopping Cart Mover, we understand that every detail contributes to a seamless shopping journey and ultimately, higher conversions. Let's dive into how you can solve this for your own store, drawing on the wisdom shared by our peers.

Start with the Basics: Your Theme Settings

Before you even think about code, the first place to check, as Maximus3 wisely pointed out in the thread, is your theme settings. Many modern Shopify themes offer built-in options for how out-of-stock variants are handled. You'll usually find these under your theme customizer, likely in a "Product" or "Product Pages" section.

kinddogshop confirmed that for their Retina theme, the "Hide sold-out variants" option was already set to "Disabled" (which is what you want if you wish to show the variants but visually mark them as unavailable). This is a great starting point, as it ensures all options are visible, even if out of stock. If your theme has a similar setting, make sure it's configured to not hide sold-out variants if your goal is to grey them out or strike them through. If you hide them, customers won't even know that particular variant ever existed, which can also be a missed opportunity for future stock notifications.

The Code-Savvy Approach: Custom CSS for Visual Cues

For those comfortable with a little bit of code, CSS offers powerful and flexible ways to visually communicate variant availability. The Shopify Community provided excellent snippets that leverage modern CSS selectors.

Method 1: Greying Out Unavailable Variants (Opacity)

The simplest and most common visual cue is to reduce the opacity of out-of-stock options, making them appear greyed out. This was the initial solution that Moeed and tim_1 provided, and it's incredibly effective.

The core idea is to target the HTML element that represents your variant option (often a `label` or a `button`) and apply an `opacity` style when it contains an input field with the `data-variant-option-available="false"` attribute. This attribute is a standard way Shopify themes mark unavailable variants.

Where to Add This CSS:

1. Theme Customizer's Custom CSS: Most Shopify themes have a dedicated "Custom CSS" field within the theme editor (Online Store > Themes > Customize > Theme settings or a specific section). This is the cleanest place for simple CSS additions.
2. `theme.liquid` file: For broader compatibility or if your theme lacks a Custom CSS field, you can add it directly to your `theme.liquid` file. Navigate to Online Store > Themes > Actions > Edit Code. Find `theme.liquid` and paste the code just above the `` closing tag. Wrap it in `

   Explanation: The `:has()` pseudo-class is a powerful CSS selector that checks if an element contains another element matching a specific selector. Here, it looks for a `label` that contains an element with the `data-variant-option-available="false"` attribute. `opacity` then makes it semi-transparent.

   Method 2: Adding a Strike-Through Line

   For an even clearer visual cue, you can add a strike-through line. This often requires a bit more advanced CSS, utilizing pseudo-elements.

   Where to Add This CSS:

   This CSS snippet might not work in all "Custom CSS" fields due to its complexity (using `position: absolute` and pseudo-elements). It's best placed in a "Custom Liquid" section on your product page template or directly in the `theme.liquid` file, wrapped in `

   Explanation: We make the `label` `position: relative` so its `::after` pseudo-element can be absolutely positioned relative to it. The `::after` element then creates an invisible layer over the label, and a `linear-gradient` is used to draw a diagonal black line across it. You can change `black` to any color you prefer.

   Combining Both Methods for Maximum Clarity

   For the best of both worlds, you can combine the opacity and strike-through methods. This ensures that the unavailable option is both faded and clearly marked with a line, leaving no room for customer confusion.

   The No-Code Solution: Shopify Apps

   If diving into code isn't your preference, or if you need more advanced customization and features, a Shopify app is an excellent alternative. As zulfali suggested in the thread, apps like Rubik Variant Image & Swatch can handle this seamlessly.

   These apps typically offer:

   • Visual indication for out-of-stock variants: Grey out, strike-through, or even hide options with simple toggle switches.
   • Customization options: Change the color of the strike-through line, adjust opacity, or choose different visual styles without any coding.
   • Compatibility: Designed to work smoothly with most Shopify themes.
   • Enhanced functionality: Often include features like variant image display, color swatches, and more, centralizing your product variant management.

   For stores looking for a quick, robust, and feature-rich solution without touching code, an app is a highly recommended path.

   Why This Matters for Your Shopify Store

   Implementing clear visual cues for out-of-stock variants is more than just a design tweak; it's a strategic move for your e-commerce business:

   • Improved User Experience (UX): Reduces frustration and saves customers time by immediately showing what's available.
   • Increased Trust: Transparency builds confidence in your brand. Customers appreciate knowing the exact stock status.
   • Reduced Cart Abandonment: Prevents customers from adding an item to their cart only to find it's unavailable at checkout.
   • Better Conversion Rates: A smoother, less frustrating shopping experience often leads to higher conversion rates.

   Whether you choose to implement custom CSS or opt for a dedicated app, making your out-of-stock variants visually distinct is a small change that can yield significant positive impacts on your store's performance and customer satisfaction.

   At Shopping Cart Mover, we specialize in ensuring your Shopify store is optimized for success, from seamless migrations to fine-tuning every aspect of your customer's journey. If you're looking to enhance your store's functionality or considering a migration to Shopify, our experts are here to help you achieve a flawless and high-performing online presence.