title: How can I create "smarter" swatches for a shopify theme
body: <p>I am adding swatches to my shopify site via this tutorial and I think they are great, but I was hoping to have them be a bit "smarter".</p>
  
  <p><a href="http://docs.shopify.com/manual/configuration/store-customization/add-color-swatches-to-your-products#Demo" rel="nofollow">http://docs.shopify.com/manual/configuration/store-customization/add-color-swatches-to-your-products#Demo</a></p>
  
  <p>If I have a hat with 4 variants -- sm/red, md/red, sm/blue, md/blue  -- 4 buttons show up on the product page. 2 on top, 1 that says "sm" and 1 that says "md"
  Below those 2 buttons are 2 buttons for the color, 1 that is red and 1 that is blue.</p>
  
  <p>Lets say I have everything in stock except for sm/red. The customer clicks the button "sm" and then sees that there are two color options below it. Unfortunately, they click red, and find out it is sold out by "add to cart" button changing to say "sold out".</p>
  
  <p>I would PREFER if the user clicked the "sm" button, that the red swatch greyed out or got an X, so that the user immediately received feedback on availability.</p>
  
  <p>How hard would it be to make this happen?</p>