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.

Interested in hiring us?

Have a chat with us. You would be surprised how small changes can make your business even more successful.


55 comments

  1. Hi Guys,

    I added this code in to my site successfully. It works for all the custom drop-down products with the price option. It works in 1.7. Thanks for the nice post by Inchoo.

  2. 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).—–no find JQUERY CODE

  3. Hello,
    This code is working only for one product . I want this working for all products. can you help me?

  4. Hi,

    This code worked perfect for me.

    My Client wants to reflect the color image on the cart page too..

    Can I ask for some help here…

  5. Hello the code update allows your to use more than a single word in the options descriptions, so before you could only use “red” but now you can have “shiny light red” id you want to. Basically the jquery break with more than one word with the old code.

  6. Thanks Phill! Can you share how it improves the code? Does it affect functionality or just better code? I real lame in coding.

  7. Hello I improved your code a little.

    Firstly in the header file. Replace the path to jquery with a generic one.

    Then to alow lables and options for mutiple words in ie. “Dark Blue”… before jQuery(“#productImg” + optionValueText).show();

    add

    //removes spaces
    optionValueText = optionValueText.replace(/\s+/g, ”);

    then in the media.phtml file replace on line 7 htmlEscape($_product->getName()) ?>

    with

    htmlEscape($_product->getName())) ?>

  8. Is that anyone tell me below method of magento stored in which file ?
    setCheckoutState()

  9. Hello Branko Ajzele, I have done it quite perfectly. Working here very nicely. Thank you for putting this post. I really appreciate your stuff, your thinking.

  10. Hi all,

    We are rebuilding our website to Magento and i have strucked on a problem. I want to create a group bundle for simple products but they need to choose a color within the groupbundle. Is this possible within Magento?

  11. For sure, if you can’t program then you have few options.

    Temgra’s extension looks great but the main issue I have with it is that it loads each image via Ajax, which mean’s that when you click on a thumbnail there is a delay until the image has loaded (for me it was around 5 seconds).

    People just don’t wait that long.

  12. This lets you change the image depending on your selection in drop-down.

    Ideally, it also needs to do the opposite, i.e. change the selection in the drop-down when you select a thumbnail image.

  13. Hello. Yes, I need this for 1.4. Every solution I’ve tried doesn’t work.

    Has anybody got any ideas?

  14. Hello all,
    I finally got this to work following the instructions… but the problem I’m running into is when I set a different price for the different colors, the photo doesn’t show anymore. It seems like since the photo swap is related to the name, when you increase the price through the custom options it adds the price to the end of the tag name and the code can’t find a photo related to it.

    Have any of you ran into this issue, any solutions?

    Thanks, Juan.

  15. Thanks for the information, I’ll need this soon and then I’m going to find out if it still works. If it doesn’t work, thanks anyway, maybe you’ve set me on the right track.

  16. Hi at all,

    thanks for the description! it works well so far. but how to take over a different colour than the default simple product image one into the shopping cart? I have jquery installed and i do not have any idea how to do this. any tips are welcome. even how to get the colour id or information for the respective t shirt model. i have not found any hint in all the boards.

    thanks and best regards,
    c–

  17. there is a little problem here.
    in the media.phtml file, the default img tag id is defined as fixed. it’s called ‘productImgDefault’.
    so, if my default img label is not named with ‘default’, the img can not be shown.

  18. GoshaDole:
    Here is how to bring the defaul image back:

    // Show the image based on selected value
    // Whatch out, case sensitive…

    if(optionValueText == “Choose option…”) {
    jQuery(“#productImgDefault”).show();
    } else {
    jQuery(“#productImg” + optionValueText).show();
    }

  19. Hi, I was wondering if there was any way to bring back the default product image (.show) when you select choose option from a dropdown.

  20. Hi, I’m currently setting up magento and this feature is a must for us.

    I got it to work with your great tutorial.

    One downside, we’re setting up a French/English site and labels are not a good option as Black is Noir in French. You have a solution to this by any chance ?

    Thanks again!

  21. I second what Justin says =)

    I’m currently trying to adapt a solution that will work on configurable products…even if it is only the color attribute as opposed to style.

    Thanks for posting this – it gives me some hope that I may soon come up with (or simply find) a solution.

  22. Hi – great post/tutorial.
    I’ve got this all working, but here’s what I would really love to do with this:-

    1. User selects “Style” drop-down option and the image is updated to show the chosen style
    2. User then selects “Color” (just like in this tutorial) and the previous “Style” image is then updated with the chosen color (overlayed, possibly).

    Really what I’m asking is for a way to get multiple drop-down selectors to interact in terms of updating the image.

    Can you see this as being possible? If so, I would love to learn how to do it!

  23. nice tutorial.

    it’s seems to work perfectly. but what’s about number of #select ? how can i use this function with different products ?

  24. Hi there, I like your approach to the problem, however, hardcoding the name of the into the bit of Javascript into head.phtml does not seem to be a good solution. Whenever one adds another product and applies custom options, the name will change.

  25. I wonder if the color switcher change the core of Magento. I am not programmer, so I don’t want to have problems on any upgrade if I put the code and alter the functions.
    Thank you very much

  26. Thank you very much. :)
    Following your tutorial -and learning jQuery- I have made a case-insensitive script that works great while keeping the zoom and the “more views” default functions (but when you click on them with javascript enabled their image fade in within the zoom, rather than in a popup window, and a relevant label -e.g.: Color : Blue- is displayed underneath). The script search for the Color term [$this__(‘Color’)] in an array made of the terms found in the select label/title in order to get ride of the hard coded/dynamically created select id, instead it add a class to the select if the color term is found. I have now just to add some reset/dynamic selection for the form/select, turn the script into a module, and I may be able to get ride of the configurable products for my current project. Thank you again. =)

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> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.