Create a Color Switcher in Magento

Posted by Branko Ajzele under Magento @ 30th SEP 2008

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

Enter your email address to subscribe to new posts:

15 Responses to “Create a Color Switcher in Magento”

Bob Brodie Said on 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 Said on 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 Said on 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 Said on October 21st, 2008 at 18:25

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

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

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

cooee Said on 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 Said on 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 Said on 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 Said on October 30th, 2008 at 14:26

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

Emilie Said on 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 Said on 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.

Justin Said on 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!

Leave a Reply