Create a Color Switcher in Magento

40 Comments 30th SEP 2008 | Posted by Branko Ajzele 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.

Recently I’ve made a screencast on my site on this subject, with somewhat different title. The idea is to have a dropdown box from which you choose a color and based on the color selection product image changes. All of this is to be based on some simple javascript (in my case, jQuery).

We used this solution on our Kapitol Reef project. Unfortunately, the client switched Magento with some other solution, so the site we developed is no longer active there.

First 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 on label values. Same goes for creating custom attribute. You 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… and so on. Here are some images for you to see what I’m talking about:

After this is done we go to the code part. There are three things you need to do here.
Upload the jQuery and save it into the /js/jquery/jquery.js. One important note on jQuery; for some reason I had to use jQuery 1.2.3 to get this example working. Latest version 1.2.6 (as of time of this writing) did not work. You can see the exact error it gave me on my screencast.
Now you need to modify /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 JS to do the switching (you can download my version of file here head.phtml)
And finaly, you need 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 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 complete screencast at:
http://activecodeline.com/wp-content/uploads/videos/MagentoProductColorChooser.swf

If you like what you read, please share it.

  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Yahoo! Bookmarks
  • Reddit
  • Technorati
  • Twitter
  • StumbleUpon
  • LinkedIn
  • Netvibes
  • NewsVine
  • Sphinn
  • Tumblr
  • Posterous

To post code in comments, place your code inside [code] and [/code] tags.

There are 40 comments (Add Yours +)

  • Hello,

    We started on our site in Magento 1.0 and I don’t believe custom options were available. Is there a way to do this on configurable products?

    Thanks,
    Bob Brodie

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

  • 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

  • No, it made NO changes to core. Only 2 of the template files.

  • Another question. Sorry but I’m not a programmer. This is usefull when you have several color sets or only when you have the same colors for all your products?
    For example, if I have black and white, I have to put this in the media.phtml file? And what to do when I don’t know wich colors will have the product?

  • Use JS (jQuery or Prototype) to trim the empty text values from string. If you were to set the fixed price on one of those custom options your

    field value would look like “Some Cool Color +99,99″. You need the JS to cut of the +99,99 and make the rest into “somecoolcolor” then use the script as before.

    What exactly are “several color sets”??? Play with the script. It’s more of a JS problem, and tweaking then Magento at this point. So I suggest you try to ask for help with some of the JS guys and girls :)

    I have made the more advanced JS for final product, will be online in couple of days.

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

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

  • I updated the original post a little. You can now see color switcher in action on Kapitol Reef Snorkel page.

  • I just noticed that in the screencast you just skipped the part when you wanted to explain how to get the internal attribute number of the select … what a shame ;-) Any chance you could post this somewhere?

  • Tomislav, where did you update the original post? Have you made changes in the screencast?

  • nice tutorial.

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

  • @Tomislav – Can you explain how you made the example you just showed? Am also looking to enable the color swatches to change the image.

  • 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!

  • [...] seeks to walk you through this process in 3 easy steps. This solution is loosely based on the Inchoo Posting, with some variations. The first notable change is we use the built-in prototype library to perform [...]

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

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

  • hi,
    i did as per ur tutorial every thing is working fine but after selecting the color the image goes invisible it doesnt display on screen and when i see the source code its show display=”none” for all images for option even for the selected color also. pls help me out.
    and srry frm my english;)

  • 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!

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

  • Hi,
    We are interested in some developement for product image change on color selection, similar to this in GAP web:
    http://www.gap.com/browse/product.do?cid=14495&pid=644658&scid=644658012

    Is there anybody who can work this for us?

  • Hi,

    You script has helped me a lot.

    Good one. Thanks a lot.

  • GoshaDole Says

    April 17th, 2009 at 0:35

    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.

  • hi

    these extension is goods what my need change image color by drop down with price and click on “more views” image will we changed and price change in cart

    ***********************************************************
    “can any body help me”
    ***********************************************************

  • Excellent tutorial, thanks!

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

  • [...] is my original article that I wrote for company I work for, [...]

  • This article is nice but a bit old. Is there any ways we could get an updated tutorial on doing this with the latest Magento? or 1.3.2.3? I’d like to get this working with configurable products and making the image change with the simple-product dropdown.

  • Very helpful Magento Tip. Thanks

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

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

  • 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–

  • Thank you for taking the time to write this up. However for some reason the screen cast only shows the first 1/4 then freezes, is there another link from which I can review this material or is there a link from which I can download the jquery file to review the code?

    Thank you
    Eirik

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

  • thanks

    Magento (ver. 1.4.0.1)

  • Hello Branko ,
    Your screencast link http://activecodeline.com/wp-content/uploads/videos/MagentoProductColorChooser.swf STOP workig at 2:32

    Please advice .
    Thanks

  • Hi Branko,

    Could you please fix the problem with the screencast stopping?

    Thanks, Tom

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

  • not working with magento 1.3.2.4 version

Leave a Comment

Please wrap all source codes with [code][/code] tags.
Magento Design and Development | Magento SEO | iPhone Application Development Web Application Development with ZEND | WordPress Ecommerce | WordPress development
Sitemap

Inchoo - webappsolutions | 2009