�ݺ�ߣ

Create a Color Switcher in Magento • Inchoo http://inchoo.net/ecommerce/magento/create-a-color-switche...

Home
Blog
Magento
WordPress
Online Marketing
Mobile development
Tools & Frameworks
Fun & Events
Portfolio
Magento Services
Inchoo
Contact

Get the most out of Magento
Over 140,000 people searching for Magento related solutions end
up on this site every month. See what we offer and discover why.
HomeBlogE-CommerceMagentoExtensionsCreate a Color Switcher in Magento

Create a Color Switcher in Magento
27th NOV 2012 | Posted by Zvonimir Buric in Extensions, Frontend, Magento, Products

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

1 of 16 01-12-12 01.18


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:

2 of 16 01-12-12 01.18


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:

3 of 16 01-12-12 01.18


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.

34
Top

Enjoyed this post?

Subscribe to our RSS Feed, Follow us on Twitter and spread it to your friends!

23

Tweet

6

Like

2

Author

4 of 16 01-12-12 01.18


Zvonimir Buric

Backend Developer

Zvonimir works in the Havana team. He is back-end Magento developer.

Other posts from this author

Related Posts

Kapitol Reef :: Magento store with 1 product
Adding product image lightbox effect using jQuery plugin (a better way)
Building a “Facebook Like” button extension for Magento in 15 minutes
Listing out Previous/Next products in Magento (Inchoo_Prevnext extension)
Getting selected simple product id in configurable product on client side.

Discussion 34 Comments

Add Comment

1. Sensi
13-10-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. =)

2. Andrea
21-10-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

3. Andrea
27-10-2008 at 15:49 | #

5 of 16 01-12-12 01.18


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

4. cooee
28-10-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.

5. Emilie
03-11-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 ?

6. cooee
07-11-2008 at 12:00 | #

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

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

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

6 of 16 01-12-12 01.18


9. oakRunk
13-12-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.

10. saturn185
14-02-2009 at 14:42 | #

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

11. MathieuF
16-03-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!

12. MathieuF
16-03-2009 at 4:00 | #

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

13. Twinkle
15-04-2009 at 8:39 | #

Hi,

7 of 16 01-12-12 01.18


You script has helped me a lot.

Good one. Thanks a lot.

14. GoshaDole
17-04-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.

15. Gui
22-05-2009 at 1:33 | #

Excellent tutorial, thanks!

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

17. Jon
30-09-2009 at 15:47 | #

Very helpful Magento Tip. Thanks

18. billy
16-10-2009 at 10:17 | #

8 of 16 01-12-12 01.18


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. Patrice
24-10-2009 at 18:31 | #

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

20. charismeki
09-12-2009 at 18:35 | #

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. Stefan
04-02-2010 at 14:56 | #

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. Ardin Furniture
14-05-2010 at 17:47 | #

thanks

Magento (ver. 1.4.0.1)

23. Tom
01-07-2010 at 12:10 | #

9 of 16 01-12-12 01.18


Hi Branko,

Could you please fix the problem with the screencast stopping?

Thanks, Tom

24. JUAN
03-07-2010 at 1:26 | #

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
28-09-2010 at 20:10 | #

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

Has anybody got any ideas?

26. Ankit Jadav
19-11-2010 at 12:36 | #

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

27. saurabh
31-03-2011 at 7:19 | #

Really Thanks a lot..!!

28. LEx

10 of 16 01-12-12 01.18


18-07-2011 at 15:43 | #

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
19-07-2011 at 11:51 | #

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
19-07-2011 at 12:54 | #

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. Partytentlover
07-12-2011 at 9:50 | #

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
22-10-2012 at 10:33 | #

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.

11 of 16 01-12-12 01.18


33. Toni Anicic
28-11-2012 at 8:43 | #

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

34. oracle
30-11-2012 at 6:03 | #

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

Add Your Comment

Name (required) Email (required) Website

Your Comment

Notify me of followup comments via e-mail

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

Search and you shall find...

Refine Posts by

News29
Starting up35
Marketing21
Products35
Search9
Frontend72
Checkout13
Administration39
Configuration20
Email13
Upgrading8

12 of 16 01-12-12 01.18


Orders21
Payment8
Shipping7
Extensions66
MVC9
Events & Observers8
Programming104
Database20
Debugging34
Integration25
Design11
Magento GO2

We can make your store more efficient

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

Learn more Get a quote

Hire Magento Developers

Teams of certified Magento developers are available to work on your next big thing!

Hire Magento Developers Get a quote

Our Latest Project

Australian Gifts

Magento Consulting, Magento Development, Magento Custom Design

See our work

13 of 16 01-12-12 01.18


The Inchooers

Meet The Inchooers, the funny bunch of magento developers.

Archive

New Comments

oracle on Create a Color Switcher in Magento:
Is that anyone tell me below method of magento stored in whi...
Qaisar Ashfaq on Related products, Up-sells, Cross-sells in Magento:
Hi, any one know how could i display recipes(in food website...
swapnil kene on Merging JavaScript in Magento:
what if the js file size goes approximately 700KB(after merg...
Mamta on How to set multiple websites with multiple store views in Magento:
is it same for magento 1.7 ? not working inmy case as m usin...
Sarvagya on How to generate your own reports in Magento:
Hi , i am trying to generate reports of transactions page an...
Josh Frank on Changing default category sort order in Magento:
Is there any way to change the name of "best value" to somet...
Brett Adams on Delete test orders in Magento:
Thanks for the script, it worked perfectly in ver. 1.7.0.2. ...

4826 Followers
Follow us

N/A Readers
Subscribe

2199 Likes
Find Us

14 of 16 01-12-12 01.18


394 Followers
Follow Us

378 Subscribers
Subscribe

Last Tweet

@designtodevelop fun times :D

Blog Categories

Magento
WordPress
Online Marketing
Mobile development
Tools & Frameworks
Zend
Fun & Events

Services

Magento Consulting
Magento Design
Magento Development
E-commerce Consulting
E-commerce SEO
E-commerce AdWords

Get a Quote

Its fast and easy, just tell us a little bit about your project

Name (required)

Email (required)

© Inchoo webappsolutions - Sitemap

Our Commitment

Since we’ve been with Magento from its very beginning, we built a very distinctive knowledge of it.
Besides being an Accredited Silver Partner,

we now have ten of our Developers officially Certified by Magento. In short, it means cost-efficiency and
a high-quality project outcome.

15 of 16 01-12-12 01.18


11x

16 of 16 01-12-12 01.18

�ݺ�ߣ

Create a color switcher in magento • inchoo

Recommended

More Related Content

What's hot (10)

Similar to Create a color switcher in magento • inchoo (20)

Create a color switcher in magento • inchoo