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.

Recently I’ve made a screencast on my site on this subject, with somewhat different title. The idea is to have a dropdown box from which you choose a color and based on the color selection product image changes. All of this is to be based on some simple javascript (in my case, jQuery).

Before we continue, you might want to see color switcher in action. We used this solution on our Kapitol Reef project.

First you need to upload some images to your product and give them some meaningful names like Red, Blue, Green depending on your product color. When I say give them name, I mean on label values. Same goes for creating custom attribute. You create a dropdown selection box and create the same amount of dropdown options as you have images, giving them the same name Red, Green, Blue… and so on. Here are some images for you to see what I’m talking about:

After this is done we go to the code part. There are three things you need to do here.
Upload the jQuery and save it into the /js/jquery/jquery.js. One important note on jQuery; for some reason I had to use jQuery 1.2.3 to get this example working. Latest version 1.2.6 (as of time of this writing) did not work. You can see the exact error it gave me on my screencast.
Now you need to modify /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 JS to do the switching (you can download my version of file here head.phtml)
And finaly, you need to modify the /template/catalog/product/view/media.phtml file to grab all of the product images and dump them into some div. Here is my sample (media.phtml) so just copy paste the code.

And some additional screenshots for you to see final result

After some additional styling you can get some impressive results for this. Hope you find it useful.

You can see complete screencast at:
http://activecodeline.com/wp-content/uploads/videos/MagentoProductColorChooser.swf

By Branko Ajzele from Inchoo.net

Related posts:

1. How to change background color of product image placeholder?
2. Tips For Creating Dynamic Category Landing Pages
3. Create a new Magento theme
4. Magento Vertical Category Menu
5. Simple product with custom options in grouped product in Magento