Create a Color Switcher in Magento

Create a 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.

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.

You made it all the way down here so you must have enjoyed this post! You may also like:

Sorry, we can’t ship there Sasa Brankovic
Sasa Brankovic, | 12

Sorry, we can’t ship there

Shell script for converting configurable to grouped products Tsvetan Stoychev
Tsvetan Stoychev, | 5

Shell script for converting configurable to grouped products

Kapitol Reef :: Magento store with 1 product Tomislav Bilic
, | 7

Kapitol Reef :: Magento store with 1 product


  1. Hi,

    I am using magento, variant product and color switcher not wokring. Attributes showinmg in dropdown but not switching on select.

    Can any body help me.

  2. var $j = jQuery.noConflict();
    $j(‘.product-custom-option’).change(function() {
    var option = $j(this).find(‘option:selected’).text();
    var jlink = $j(‘a[title=”‘+option.trim()+'”]’);
    var target = $j(‘#image-‘ +‘image-index’));
    if(jlink.length !== 0 && target !== 0){

    1. System > Configuration > Sales > Checkout > Shopping Cart

      and set Configurable Product Image to Product Thumbnail Itself and hit the Save Config button. You may need to refresh cache as well…

      After this, the image of the selected color option should be displayed in the cart.

  3. I just made a brand new magento CE 1.8 Install and then I uploaded there the files I downloaded here but it didn’t work. The product images gets on the middle of the page when I substitute the original Magento media.phtml to the one I downloaded here:

    The other way I tried is to add the code of the media.phtml that I downloaded here to the bottom of Magento original media.phtml file but i get the same results.

    Any idea on how to fix this and make the color switcher work?

  4. I have implement that extension in magento 1.9 its working fine but i need selected image is not going to the cart .it is picking up default image on cart page.Please help me

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.

Tell us about your project

Drop us a line. We'd love to know more about your project.