Creating Color Switcher in Magento

Magento comes packed with a lot of options. But, no matter how many options you put into some product, you can never cover all of them. One of such options (for now) is a color switcher in Magento. To be more precise, an image switcher based on color selection. Firstly, you need to upload some images to your product.

Here are the steps:

• Login to you Magento admin panel.
• Add New Product with Images & give them some meaningful names like Red,Green,Blue,White depending on your product color.
• When I say give them name, I mean label values.check the below Screenshot: 

• Similarly you have to do it in Custom options.Choose Custom options tab from the list.
• Click on the Add new Option tab in the right Corner.
• Enter the Title as Color.Select input type as drop-down & create the same amount of drop-down options as you have images, giving them the same name Red, Green, Blue,white etc. Here are some images for you to see what I’m talking about:

• After this is done, we go to the code part.
• You need to modify your /template/page/html/head.phtml file to include the jQuery script (or any other if you can code the same logic into it) and write down few lines of JavaScript to do the switching (you can download my version of file) i.e. head.phtml.
•  After that, modify your /template/catalog/product/view/media.phtml to include all of the product images and dump them into some div. Here is the media file: media.phtml.
• Clear the Cache & go to front end to check you product .you'll see something like this: