Grayed out product variation boxes not working

Store Design

Topic summary

A user is experiencing issues implementing visual indicators for out-of-stock product variations on their Shopify store using the Cozy theme.

Current Problem:

  • All size variation swatches appear available regardless of actual stock status
  • Customers can only discover out-of-stock items after clicking “Add to Cart”
  • Attempted CSS classes (‘outofstock’, ‘instock’) are not applying correctly to variants

Desired Solution:

  • Gray out unavailable size swatches
  • Optionally make them unclickable and gray out the ATC button when selected
  • Ideally show a hover popup with restock notification option

Technical Details:

  • Product template code available via CodeShare link
  • Products have 2 variations (Size & Color), with Color being singular per product
  • Inventory tracking is enabled; “Continue selling when out of stock” is unchecked
  • Tested liquid code conditions using variant.available and current_variant.inventory_quantity both fail to properly detect stock status

Current Status:
One community member suggested checking {% if variant.available %} and {% if product.available %}, but the original poster reports this causes all variations to receive the same class regardless of individual stock levels. The issue remains unresolved.

Summarized with AI on November 25. AI used: claude-sonnet-4-5-20250929.
1

Site with issue: https://locapica.com/products/salopeta-eleganta-dora-albastra-cu-pietre-si-un-umar-gol

Current behavior:

When a variation (in my case, Size) is out of stock there is no visual cue for the visitor, so they are able to click the ATC button, only then finding out that the size they wanted is not available, via a popup.

Desired behavior:

Out of stock sizes appear grayed out.
Optional cues:

  • swatch is not clickable/selectable
  • ATC button is grayed out when out of stock size is selected (unless we disable it as above)
  • ultimate: an informational popup appears above the size swatch on hover with a message and a link (useful for dropping an email address to be notified if back in stock).

I know there are apps that provide back-in-stock email notification options, so this is not my main concern.
My problem is that all the sizes LOOK like they are in stock and I need to change that.
No matter what I’ve tried, I can’t get them to work and I haven’t found a solution on forums so far.

You can find my product-template.liquid code here: https://codeshare.io/K84ezX
Using Cozy theme.

Thanks for any help!

2

Hi @Attrexx , it’s not working because you are not checking:

{% if variant.available %}

Only

{% if product.available %}

Hope this helps!

3

If I use that for conditioning the addition of the ‘outofstock’ class I made, all the variations, regardless of stock, get that class.

4

I tried this:

class="{% if current_variant.inventory_quantity > 0 %} instock {% else %} outstock{% endif %}"

but all variants now have the ‘instock’ class, even though only one of the 3 variants has stock.
Same goes for:

class="{% if variant.available %}instock{% else %}outstock{% endif %}"

I have ‘Track quantity’ checked on the variations.

I did not check ‘Continue selling when out of stock’.

I do use 2 variations per product (Size & Color) but the Color is only one per product so it’s always the default.

Why doesn’t the stock status get sent?