how to create a color swatcher in Magento

Here is a step by step tutorial that will guide you on how to create a color swatcher for magento. This tutorial is all about by hook by crook . My attempt is just to make sure that i have color swatcher in place of drop down on product detail page. When you finished steps by steps process, you should have a running color swatcher on your magento store. If you know magento little bit this blog will help you on how to customise. Its relatively easy, free and you don’t need to purchase some of those expensive commercial magento color swatcher extensions.

Note: In step 4 you may find some syntax error, please fix them, editor limitation.

Quick 5 steps to create color swatch in magento

Step 1: We have two choice either create new attribute for color or use default color attribute provide by magento. If you going for default color attribute then you may skip step 1. If you wish to create new color attribute you can refer the default attribute settings just make sure it has unique “attribute_code”

Step 2: Once attribute is ready then add color like blue, red and green. If you have created new attribute then add that attribute to the appropriate attribute set so that it appears while creating a product.

Step 3: Create a directory “swatcher” inside “media” folder (parallel to app in magento root directory.) and save all thumbnail images (20 x20 or 30×30) e.g. “red.jpg”, “blue.jpg” & “green.jpg”.

Step 4:Now we will show these thumbnails on product detail page in place of color swatcher dropdown. Open the file “configurable.phtml” from path app/design/frontend/currentTheme/template/catalog/product/view/type/options/configurable.phtml.

Search for following code

foreach($_attributes as $_attribute)
<dt><label><em>*</em> echo $_attribute- &gt; getLabel()  </label></dt>
<dd>
<div>
<select name="super_attribute[echo $_attribute->getAttributeId()]" id="attribute echo $_attribute->getAttributeId() ">
<option> echo $this->__('Choose an Option...') </option>
</select>
</div>
</dd>
endforeach;

Now add small condition to the existing code

if($_attribute->getLabel() == "color") {
// set following style for select drop down list.
// style='display:none'
// create UL list to show all available color for products.$product = $this->getProduct();
$attrs = $product->getTypeInstance(true)->getConfigurableAttributesAsArray($product);
// Get Media folder path
$mfpath = Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA);
foreach($attrs as $attr) {
if(0 == strcmp("color", $attr['attribute_code'])) {
$options = $attr['values'];
foreach($options as $option) {
//print_r($option[store_label]);
  echo "";
}
}
}
}

Now apply display none style to the color dropdown div using id. This will remove the magento dropdown and will show the image

Step 5: Oh yes, don’t forget to trigger the click event for old color dropdown. It means. When user clicks on any color image it will set the same value selected for default magento dropdown. You must be wondering why we are doing this. This is small hack. When user clicks on add to cart magento refers these hidden dropdown .

You are done.