title: How do I tweak this in Shopify to hide variants that aren't available?
body: <p>Let's say we have shirt products.</p>
  
  <p>Variant is style/size.</p>
  
  <p>Men: L</p>
  
  <p>Men: XXL</p>
  
  <p>Men: XL</p>
  
  <p>Women: Small</p>
  
  <p>Women: XL</p>
  
  <p>Women: L</p>
  
  <hr>
  
  <p>Right now in default Shopify no matter what you select on style you'll still be able to choose any of those sizes even if it's not available for that style. How do you force this check to happen based on your style selection?</p>
  
  <hr>
  
  <p>I believe the theme is using a modified version of this technique: <a href="http://wiki.shopify.com/Tutorial_on_editing_existing_theme_to_use_products_with_multiple_options#4._Instantiate_Shopify.OptionSelectors_javascript" rel="nofollow">http://wiki.shopify.com/Tutorial_on_editing_existing_theme_to_use_products_with_multiple_options#4._Instantiate_Shopify.OptionSelectors_javascript</a></p>
  
  <p>How do I modify this to hide the options, not just show sold out if it doesn't match?</p>
  
  <p>Real code on theme:</p>
  
  <p>app.js</p>
  
  <pre><code>  selectCallback = function(variant, selector) {
      var $product = $('#product-' + selector.product.id);
      var $notify_form = $('#notify-form-' + selector.product.id);
  
      if (variant) {
        var $thumbs = $('.flex-control-thumbs img', $product);
        var optionValue = variant.options[$('form.product_form', $product).data('option-index')];
        $.each($thumbs, function(index, value) {
          if($(value).attr('alt') == optionValue &amp;&amp; !$(value).hasClass('flex-active')) {
            $(value).click();
            return false;
          }
        });
      }
  
      if (variant &amp;&amp; variant.available == true) {
        if(variant.price &lt; variant.compare_at_price){
          $('.was_price', $product).html(Shopify.formatMoney(variant.compare_at_price, $('form.product_form', $product).data('money-format')))        
        } else {
          $('.was_price', $product).text('')
        } 
        $('.sold_out', $product).text('');
        $('.current_price', $product).html(Shopify.formatMoney(variant.price, $('form.product_form', $product).data('money-format')));
        $('#add-to-cart', $product).removeClass('disabled').removeAttr('disabled').val('Add to Cart');
        $notify_form.hide();
      } else {
        var message = variant ? "{{ settings.sold_out_text }}" : "Out of Stock";    
        $('.was_price', $product).text('')
        $('.current_price', $product).text('')
        $('.sold_out', $product).text(message);
        $('#add-to-cart', $product).addClass('disabled').attr('disabled', 'disabled').val(message); 
        $notify_form.fadeIn();
      }
    };          
  });
  </code></pre>
  
  <p>product-form.liquid:</p>
  
  <pre><code>{% assign option_to_match = settings.option_to_match %}
  {% assign option_index = 0 %}
  {% for option in product.options %}
    {% if option == option_to_match %}
      {% assign option_index = forloop.index0 %}
    {% endif %}
  {% endfor %}
  
  {% if product.available %}
    &lt;form action="/cart/add" method="post" class="clearfix product_form" data-money-format="{{ shop.money_format }}" data-option-index="{{ option_index }}" id="product-form-{{ product.id }}"&gt;
      {% if product.options.size &gt; 1 %}
        &lt;div class="select"&gt;
          &lt;select id="product-select-{{ product.id }}" name='id' class='hi'&gt;
            {% for variant in product.variants %}
              &lt;option value="{{ variant.id }}"&gt;{{ variant.title }}&lt;/option&gt;
            {% endfor %}
          &lt;/select&gt;
        &lt;/div&gt;
      {% elsif product.options.size == 1 and product.variants.size &gt; 1 %}
        &lt;div class="select"&gt;
          &lt;label&gt;{{ product.options[0] }}:&lt;/label&gt;
          &lt;select id="product-select-{{ product.id }}" name='id'&gt;
            {% for variant in product.variants %}
              &lt;option value="{{ variant.id }}"&gt;{{ variant.title }}&lt;/option&gt;
            {% endfor %}
          &lt;/select&gt;
        &lt;/div&gt;
      {% else %}
        &lt;input type="hidden" name="id" value="{{ product.variants.first.id }}" /&gt;
      {% endif %}
  
      {% if settings.display_product_quantity %}
         &lt;label for="quantity"&gt;Quantity:&lt;/label&gt;
         &lt;input type="number" min="1" size="2" class="quantity" name="quantity" id="quantity" value="1" /&gt;
      {% endif %}
      &lt;div class="purchase clearfix {% if settings.display_product_quantity %}inline_purchase{% endif %}"&gt;
        {% if settings.cart_return == 'back' %}
          &lt;input type="hidden" name="return_to" value="back" /&gt;
        {% endif %}
        &lt;input type="submit" name="add" value="Add to Cart" id="add-to-cart" class="action_button" /&gt;
      &lt;/div&gt;  
    &lt;/form&gt;
  
    {% if product.variants.size &gt; 1 or product.options.size &gt; 1 %}
      &lt;script type="text/javascript"&gt;
        // &lt;![CDATA[  
          $(function() {    
            $product = $('#product-' + {{ product.id }});
            if($('.single-option-selector', $product).length == 0) {
              new Shopify.OptionSelectors("product-select-{{ product.id }}", { product: {{ product | json }}, onVariantSelected: selectCallback });
  
              {% if product.available %}
                {% assign found_one_in_stock = false %}
                {% for variant in product.variants %}
                  {% if variant.available and found_one_in_stock == false %}
                    {% assign found_one_in_stock = true %}
                    {% for option in product.options %}
                      $('.single-option-selector:eq(' + {{ forloop.index0 }} + ')', $product).val({{ variant.options[forloop.index0] | json }}).trigger('change');
                    {% endfor %}
                  {% endif %}
                {% endfor %}
              {% endif %}
            }
          });
        // ]]&gt;
      &lt;/script&gt;
    {% endif %}
  {% endif %}
  </code></pre>