Greying out unavailable variants in Debut theme

Highlighted
Shopify Partner
9 1 0

Hi.

 

I am using the Debut theme and was informed by a programmer helping me look into this issue that it is no longer possible to grey-out unavailable/sold-out variants for multiple options. It is only possible for the first option. (Apparently this was possible before recent Shopify updates)

 

Below is what I'm hoping to achieve

 

Sold out variants 'greyed-out'  and can't be selected but still visibleSold out variants 'greyed-out' and can't be selected but still visible

 

Would Shopify consider re-enabling this feature? It is important for us to be able to show the unavailable variants. I was told that the alternative is to hide those variants, while that is a last resort fix for us, it's not a preferred one. 

 

Hope someone can advise? Thank you!

 

regards,

Adrian

0 Likes
Highlighted
Shopify Staff
Shopify Staff
2 1 1

Hi Adrian,

 

Have you looked into using the Variant object instead of the array of Options returned by the Product object? E.g. (quick & dirty example)

 

 

    	<select name="option1">
      	{%- for variant in product.variants -%}
   		 <option value="{{ variant.id }}" {% if variant.available != true %} disabled{% endif %}>
           {{ variant.option1 | escape }}
          </option>
    	{%- endfor -%}
    	</select>

 

Of course, you'd have to style it accordingly for your theme - instead of the disabled attribute, you'd use a class or other property - but this should replicate the functionality you're after, e.g.

 

23-25-lmb19-27gq6

 

Regards,

 

Matt

0 Likes