title: Shopify: Show a message when selected variant is out of stock
body: <p>I need to add an out of stock message when a product variant(color &amp; size) is selected on my product's page.</p>
  
  <p>I've found this piece of code that does this but it only looks at the default product variant when first viewing the product's page and the message is static:</p>
  
  <pre><code>{% assign variant = product.variants.first %}
  {% if variant.inventory_quantity &lt;= 0 and variant.available and variant.inventory_management != '' %}
  &lt;p style="color:#ff0000" class="notice"&gt;This item is currently out of stock. I will take up to 3 weeks to ship.&lt;/p&gt; 
  {% endif %}
  </code></pre>
  
  <p>What I need this to do is have the message act according to the variant that is selected.</p>
  
  <p>I know that there's probably some java script involved but I'm but I'm fairly new to this.</p>
  
  <p>I've found an example website that has exactly what I'm looking for:
  <a href="http://www.missesdressy.com/dresses/designers/blush-by-alexia/9388_1?track=39549527.r.1" rel="nofollow">http://www.missesdressy.com/dresses/designers/blush-by-alexia/9388_1?track=39549527.r.1</a></p>
  
  <p>When the customer selects their size and color variant it shows a message if the item is ready to ship or requires a special order, also as well as showing the available/special order/sold out wording on the variant's drop-down selector.</p>
  
  <p>I would probably just be happy with just the message showing up accordingly though.  </p>
  
  <p>So this is the javascript that I found from my product_form.liquid in my theme that controls the variant selector.  Not sure how to modify it at this point.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    // &lt;![CDATA[  
      $(function() {    
        $product = $('#product-' + {{ product.id }});
        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;
  </code></pre>
  
  <p>And this is from my app.js.liquid that is maybe apart of the script too?</p>
  
  <pre><code>    }
  
  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('')
    } 
    $('.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(message);
    $('#add-to-cart', $product).addClass('disabled').attr('disabled', 'disabled').val(message); 
    $notify_form.fadeIn();
  }  };     
  </code></pre>