Sample code for Stack Overflow question about using colour swatches in a Shopify theme (http://stackoverflow.com/questions/19227823/how-can-i-create-smarter-swatches-for-a-shopify-theme)

README.md

This is for a Stack Overflow question about using colour swatches in a Shopify theme. It extends the code provided in this tutorial on the Shopify wiki to grey out the unavailable colours (not available or sold out) when a size is selected by a customer.

Stack Overflow question: How can I create “smarter” swatches for a shopify theme

Shopify tutorial: Add color swatches to your products

product.liquid

...

var selectCallback = function(variant, selector) {

  ...

  var selectedSize = jQuery('.size.options li.selected span').text();

  if (selectedSize.length > 0) {
    var variants = selector.product.variants;
    var variantTitles = [];
    var i;

    for (i = 0; i < variants.length; i++) {
      variantTitles.push(variants[i].title);
    }

    jQuery('.color.options li').each( function() {
      var variantTitle = selectedSize + " / " + jQuery('div', this).text();

      // if variantTitle is a valid variant & not sold out, remove unavailable class
      var variantIndex = jQuery.inArray(variantTitle, variantTitles);
      if (variantIndex != -1 && variants[variantIndex].available == true) {
        jQuery('span', this).removeClass('unavailable');
      }
      // if not a valid variant or sold out, add unavailable class
      else {
        jQuery('span', this).addClass('unavailable');
      }
    });
  }
};

...

swatches.liquid

<style>
...
.unavailable { opacity: 0.2; }
</style>
...