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 and give them some meaningful names like Red, Blue, Green depending on your product color. When I say give them name, I mean label values. Same goes for creating custom attribute. Simply 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, etc. Here are some images for you to see what I’m talking about:
After this is done, we go to the code part.
The final step is 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 and 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 how it works in a video bellow:
Note! This article was revised on Nov 27, 2012. You will notice that some of the comments are older. This is because the original article was posted in 2008 by Branko Ajzele.