Create a Color Switcher in Magento

Magento color switcher

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.

The idea is to have a dropdown box from which you choose a color, and, based on the color you selected, product image changes. This should be based on some simple JavaScript (in my case, jQuery).

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.
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 here head.phtml).

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.

51
Top

Care to rate this post?

Author

Zvonimir Buric

Ex. Inchooer

Zvonimir worked at Inchoo in 2012 and 2013 as a backend developer.

Other posts from this author

Discussion 51 Comments

1 2
Add Comment
  1. Ben

    Hi,
    You may also be interested in this extension which changes automatically product main image

    http://www.extensions.sashas.org/configurable-image-swticher.html

1 2

Add Your Comment

Please wrap all source codes with [code][/code] tags.
Top