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. Sensi

    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. =)

  2. Andrea

    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

  3. Andrea

    Do you know how to build color squares to change the image instead of dropdown menu?

  4. 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.

  5. Emilie

    nice tutorial.

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

  6. Hi there, I think I figured it out:
    http://www.magentocommerce.com/boards/viewthread/18696/

  7. Justin

    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!

  8. Pingback: Magento Themes Tutorial » Blog Archive » Magento Color Swatch Tutorial

  9. 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.

  10. saturn185

    Color Swatches are implemented and available for buying here http://www.temgra.com/index.php/color-swatches-magento-extension.html

  11. 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!

  12. stupid me… add the image twice with 2 labels! haha… getting late

  13. Twinkle

    Hi,

    You script has helped me a lot.

    Good one. Thanks a lot.

  14. GoshaDole

    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.

  15. Gui

    Excellent tutorial, thanks!

  16. 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();
    }

  17. Jon

    Very helpful Magento Tip. Thanks

  18. billy

    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.

  19. I try this mod but where is the other image for (alternative view) it seem to be desapeared….

  20. 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–

  21. 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.

  22. thanks

    Magento (ver. 1.4.0.1)

  23. Tom

    Hi Branko,

    Could you please fix the problem with the screencast stopping?

    Thanks, Tom

  24. JUAN

    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.

  25. chonkton

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

    Has anybody got any ideas?

  26. Thanks for the solution. But I am getting a different id for the color option drop-down for different products.

  27. Really Thanks a lot..!!

  28. LEx

    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.

  29. sonatasky

    This is all fine, but since I’m not a programmer,I found one for myself here http://www.magentocommerce.com/magento-connect/filter/tag/color%20swatch/

  30. LEx

    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.

  31. 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?

  32. Kaushal

    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.

  33. Hey everyone, the post is now updated and works with latest version, cheers!

  34. oracle

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

  35. Thanks for sharing the informative post!! Very useful for beginners in designing…

  36. Thank you for good tutorial.It’s very clear to understand.

  37. Phill

    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())) ?>

  38. Stan

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

  39. Phill

    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.

  40. Gondaliya Niranjan

    You script has helped me a lot.

    Good one. Thanks a lot

  41. It save me a day working on color for product, thanks a lot Zvonimir Buric

  42. B

    how do i make this work for magenta go

  43. Well wisher

    Its very nice script.. It helps me a lot..

    Thanks.. :)

  44. Naresh

    Hi

    thanks for your code

    But its not working in ce1.7

    Thanks.. :)

  45. Aryan

    Hey is it possible in listing page

  46. Raghu

    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…

  47. cant integrate the code in to the 2 files to save my life. Running 1.7

    Any help would be appreciated.

    Thanks

  48. Kamal

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

  49. HUANG

    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

  50. Prabhu

    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.

1 2

Add Your Comment

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