How to hide unavailable product variants in Shopify with multiple options?

[Brandon-Flexi]

Hello Shopify Community, 

I'm currently editing a clothing-based Shopify site that has uses two options containing different variant buttons. I want colors and sizes to be disabled or "greyed out" when they are not available.  If I have a product with only one option, the variants are "greyed out" but as soon as I create a product with two options (see example below) the"greyed out" feature fails to work.

E.g. 

Option 1:

- White

- Black

- Yellow

Option 2:

- Small

- Large

- Medium

For more context, the variant buttons use the following code from a file called variant-button.liquid 

{%- for value in option.values -%}
      {%- assign product_available = true -%}
       {%- if product.options.size == 1 -%}
        {%- assign product_available = product.variants[forloop.index0].available -%}
      {%- endif -%} 
      <div
        class="variant-input"
        data-index="option{{ option_index }}"
        data-value="{{ value | escape }}">
        <input type="radio"
          {% if option.selected_value == value %} checked="checked"{% endif %}
          value="{{ value | escape }}"
          data-index="option{{ option_index }}"
          name="{{ option.name }}"
          class="variant__input-{{ section_id }}{% unless product_available %} disabled{% endunless %}{% if is_color %} variant__input--color-swatch-{{ section_id }}{% endif %}"
          {% if is_color %} data-color-name="{{ value | escape }}"{% endif %}
          {% if is_color %} data-color-index="{{ color_option_index }}"{% endif %}
          id="ProductSelect-{{ section_id }}-option-{{ option.name | handleize }}-{{ value | url_encode }}">
        {%- if is_color -%}
          {%- assign color_image = value | handle | append: '.' | append: swatch_file_extension | asset_img_url: '50x' | prepend: 'https:' | split: '?' | first -%}
          {%- assign color_swatch_fallback = value | split: ' ' | last | handle -%}
          <label
            for="ProductSelect-{{ section_id }}-option-{{ option.name | handleize }}-{{ value | url_encode }}"
            class="variant__button-label color-swatch color-swatch--{{ value | handle }}{% unless product_available %} disabled{% endunless %}"
            style="background-image: url({{ color_image }}); background-color: {{ color_swatch_fallback }};"
          >
            {{ value | escape }}
          </label>
        {%- else -%}
<!--         <option disabled="disabled"> not available </option> -->
          <label
            for="ProductSelect-{{ section_id }}-option-{{ option.name | handleize }}-{{ value | url_encode }}"
            class="variant__button-label{% unless product_available %} disabled{% endunless %} variant-greyed-out">{{ value | escape }}</label>
        {%- endif -%}
      </div>

From my limited research, it seems the issue is because the options don't talk to each other and liquid cannot handle this type of logic (because the variants would need to refresh when a new variant button is selected). I'm assuming we would need to use JS and query selectors to build this function. Since Shopify moved to store 2.0, I have not been able to find any solutions up to date. If you are looking to help tackle this problem with me, please help in this discussion forum (: 

Thanks to anyone who takes time out of their day to help a fellow developer out!!!

[PaulNewton]

Hello @Brandon-Flexi 

---

@Brandon-Flexi wrote:

Since Shopify moved to store 2.0, I have not been able to find any solutions up to date. If you are looking to help tackle this problem with me, please help in this discussion forum (: 

---

OS2.0 does not mean older , vintage, themes have stopped working. See any of the free vintage themes(Debut,simple,etc) besides dawn for examples of variant dropdown implementations.

For OS2.0 approaches see the dawn reference https://github.com/Shopify/dawn 

I'm assuming we would need to use JS and query selectors to build this function.

https://shopify.dev/themes/product-merchandising/variants#variant-selection 

  If I have a product with only one option, the variants are "greyed out"

Because this line {%- if product.options.size == 1 -%} immediately checks for availability when there is only 1 option.

Greyed out is normally due to that variant not being available: sold out with no inventory, an invalid option combination, etc.

https://shopify.dev/api/liquid/objects/product#product-available 

https://shopify.dev/api/liquid/objects/variant#variant-available 

Getting used to the product>variants>options system and making UI's that that system it is one of the stumbling blocks you'll hit learning shopify themes and most tutorials tend to gloss over it just slapping in premade code such as from slate.VariantOptions, or dawn, or the options_selection.js. 

If you need to know it intimately the only way is to debugging an existing theme to use to implement a reduced test case(no fancy stuff like swatches). You'll notice standard themes use a master select behind the scenes to build buttons/dropdowns and interoperate with javascript; so when a theme veers from that building it's own options-buttons system your on your own in making advanced changes.

This vid talks about master selects https://www.youtube.com/watch?v=BaDbmXQXpxA&t=642s 

[SeaSalty]

Completely unhelpful response. From a UX perspective, NOT having an easy option to hide irrelevant variants IS ancient. Shopify need to update this asap.

[fenixk]

From my limited research, it seems the issue is because the options don't talk to each other and liquid cannot handle this type of logic

Here you are absolutely right.

I'm assuming we would need to use JS and query selectors to build this function.

You are right here also 🙂 And this leads us to the tricky part. As we need to use javascript and liquid, the code will depend a lot on which theme you are using. Each theme has a different structure, CSS classes and javascript for handling the "variant picker" section. 

Couple of questions:
1. You asked about unavailable variants. Did you mean unavailable or sold-out? They are sometimes confused. Unavailable is a variant combination that doesn't exist, which is a bit different than sold-out. 

2. You mention hiding and greying out. Which would you prefer? I recommend fully hiding unavailable variants but only greying out out-of-stock variants.

Unfortunately, good free options are very hard to find, especially since this great tutorial stopped working due to sectioned theme updates.  In that link it Shopify employee writes "Consider hiring a Shopify Expert"

I have tried multiple free code snippets and have not had luck with those. Here in the community, and via Google you may try to search for code snippets specific for your theme. I have a free tutorial for hiding the variants – however it only works for 1 level, not multiple options like you asked and thus wouldn't solve your problem. 

If you're willing to spend a few dollars, here are 3 easy solutions

1. Easy option for non-developers is Shopify Variant Hider  (I made this). Works for Dawn, Sense, Ride, Taste etc. Works for multiple variants like you asked. Greying out, hiding or custom style. 
2. There's an app called AutoHide Soldout Products – $4.90/month. 7-day free trial.
3. Another app called Camouflage –  In your question you were clear you had multiple options like size AND color, so free plan wouldn't be enough – $7/month

In the forums people have mentioned people on Fiverr can hide unavailable variants service. I once tried one of them and had an ok experience. I won't share a direct link (not to be too spammy).

It looks like something like this might be worked on in the  Github for Dawn Theme.  Let's hope it would soon be released so we'd have a built-in solution!

[PeterCousins]

Not sure if this is a bump on an old topic or if anyone else found the same solution as me, I am far from a coder and HTML expert but I have dabbled in editing some stuff on my website. After searching an entire day and looking at apps, alternatives and code snippets from a bunch of different people. I found a really stupidly simple solution, I can't verify if this works on all themes but it did on mine: Refresh V11

To hide unavailable option pills/ buttons, (note that this hides sold out variants too, have not looked into if you can determine what is sold out vs unavailable yet) you need to do the following:

1. Find what tag is being used to mark it as unavailable, my theme puts a line through and greys out the pill options like this:

Right click on the greyed out option, select inspect and you want to make sure the unavailable option is highlighted so you know you are looking at the right element:

You then want to click on "Computed" at the top of the page:

You are looking for the style of your button, mine has a strikethrough line so I am looking for the element "text-decoration-line"

 There should be a small arrow next to this, press it to take you back to the elements page where this is originating from in your HTML:

I can now see that the following line is what is generating the effect of greying out and striking my unavailable options, the line: ".product-form__input input[type=radio].disabled+label" is responsible for these buttons appearing and being styled this way. Now we know where to look, we can start adding changes to this such as display:none.

Go to your main-product.lquid or similar file, this will be different depending on your theme and scroll down to "{%- endstyle -%}". Above this line, type in the following:

.product-form__input input[type=radio].disabled+label{
display:none;

}

And press save, this should hide your unavailable/sold out pill buttons from your page. Please note that your theme may not use the exact same div class to edit so you will need to follow the above steps if this does not work for you.

This does not work for dropdown menus sadly, I have not figured out how to remove the option entirely and this will likely need some scripting trickery that is way too advanced for me. Hope this helps someone out there struggling on this like I did.