Create a Color Switcher in Magento

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

Before we continue, you might want to see color switcher in action. We used this solution on our Kapitol Reef project.

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

There are 27 comments (Add Yours +)

Bob Brodie Says
October 8th, 2008 at 19:26

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
Sensi Says
October 13th, 2008 at 1: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. =)
Andrea Says
October 21st, 2008 at 16:53

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
Branko Ajzele Says
October 21st, 2008 at 18:25

No, it made NO changes to core. Only 2 of the template files.
Andrea Says
October 21st, 2008 at 19:28

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?
Branko Ajzele Says
October 22nd, 2008 at 8:24

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.
Andrea Says
October 27th, 2008 at 15:49

Do you know how to build color squares to change the image instead of dropdown menu?
cooee Says
October 28th, 2008 at 11:04

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.
Tomislav Bilic Says
October 28th, 2008 at 11:25

I updated the original post a little. You can now see color switcher in action on Kapitol Reef Snorkel page.
cooee Says
October 29th, 2008 at 15:55

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?
Andrea Says
October 30th, 2008 at 14:26

Tomislav, where did you update the original post? Have you made changes in the screencast?
Emilie Says
November 3rd, 2008 at 16:53

nice tutorial.

it’s seems to work perfectly. but what’s about number of #select ? how can i use this function with different products ?
Sherrie Says
November 3rd, 2008 at 17:12

@Tomislav – Can you explain how you made the example you just showed? Am also looking to enable the color swatches to change the image.
cooee Says
November 7th, 2008 at 12:00

Hi there, I think I figured it out:
http://www.magentocommerce.com/boards/viewthread/18696/
Justin Says
November 12th, 2008 at 12:24

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!
Magento Themes Tutorial » Blog Archive » Magento Color Swatch Tutorial Says
November 27th, 2008 at 17:46

[...] 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 [...]
oakRunk Says
December 13th, 2008 at 9:56

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.
saturn185 Says
February 14th, 2009 at 14:42

Color Swatches are implemented and available for buying here http://www.temgra.com/index.php/color-swatches-magento-extension.html
vijay Says
February 23rd, 2009 at 10:43

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;)
MathieuF Says
March 16th, 2009 at 3:56

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!
MathieuF Says
March 16th, 2009 at 4:00

stupid me… add the image twice with 2 labels! haha… getting late
Nando Says
April 3rd, 2009 at 16:37

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?
Twinkle Says
April 15th, 2009 at 8:39

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.
shiv Says
May 14th, 2009 at 14:06

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”
***********************************************************
Gui Says
May 22nd, 2009 at 1:33

Excellent tutorial, thanks!
Matt Says
June 4th, 2009 at 18:07

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