create a color switcher in magento • inchoo

HomeBlog

MagentoWordPressOnline MarketingMobile developmentTools & FrameworksFun & Events

PortfolioMagento ServicesInchooContact

Get the most out of MagentoOver 140,000 people searching for Magento related solutions endup on this site every month. See what we offer and discover why.

HomeBlogE-CommerceMagentoExtensionsCreate a Color Switcher in Magento

Create a Color Switcher in Magento27th 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 moreprecise, 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

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

1 of 16 01-12-12 01.18

goes for creating custom attribute. Simply create a dropdown selection box and create the same amount ofdropdown options as you have images, giving them the same name Red, Green, Blue, etc. Here are someimages 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 ifyou can code the same logic into it) and write down few lines of JavaScript to do the switching (you candownload 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 productimages 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. Thisis because the original article was posted in 2008 by Branko Ajzele.

34Top

Enjoyed this post?

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

Tweet

23

2

Author

6

Like


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 productAdding product image lightbox effect using jQuery plugin (a better way)Building a “Facebook Like” button extension for Magento in 15 minutesListing 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

Sensi13-10-2008 at 1:26 | #

Thank you very much. Following your tutorial -and learning jQuery- I have made a case-insensitive script that works greatwhile keeping the zoom and the “more views” default functions (but when you click on them withjavascript enabled their image fade in within the zoom, rather than in a popup window, and arelevant 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 ofthe hard coded/dynamically created select id, instead it add a class to the select if the color term isfound. I have now just to add some reset/dynamic selection for the form/select, turn the script into amodule, and I may be able to get ride of the configurable products for my current project. Thankyou again. =)

1.

Andrea21-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 tohave problems on any upgrade if I put the code and alter the functions.Thank you very much

2.

Andrea27-10-2008 at 15:49 | #

3.


5 of 16 01-12-12 01.18

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

cooee28-10-2008 at 11:04 | #

Hi there, I like your approach to the problem, however, hardcoding the name of the into the bit ofJavascript into head.phtml does not seem to be a good solution. Whenever one adds another productand applies custom options, the name will change.

4.

Emilie03-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 withdifferent products ?

5.

cooee07-11-2008 at 12:00 | #

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

6.

Justin12-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 style2. User then selects “Color” (just like in this tutorial) and the previous “Style” image is then updatedwith the chosen color (overlayed, possibly).

Really what I’m asking is for a way to get multiple drop-down selectors to interact in terms ofupdating the image.

Can you see this as being possible? If so, I would love to learn how to do it!

7.

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


6 of 16 01-12-12 01.18

oakRunk13-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 onlythe 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) asolution.

9.

saturn18514-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

10.

MathieuF16-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 isNoir in French. You have a solution to this by any chance ?

Thanks again!

11.

MathieuF16-03-2009 at 4:00 | #

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

12.

Twinkle15-04-2009 at 8:39 | #

Hi,

13.


7 of 16 01-12-12 01.18

You script has helped me a lot.

Good one. Thanks a lot.

GoshaDole17-04-2009 at 0:35 | #

Hi, I was wondering if there was any way to bring back the default product image (.show) when youselect choose option from a dropdown.

14.

Gui22-05-2009 at 1:33 | #

Excellent tutorial, thanks!

15.

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

16.

Jon30-09-2009 at 15:47 | #

Very helpful Magento Tip. Thanks

17.

billy16-10-2009 at 10:17 | #

18.


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.

Patrice24-10-2009 at 18:31 | #

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

19.

charismeki09-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 thedefault simple product image one into the shopping cart? I have jquery installed and i do not haveany idea how to do this. any tips are welcome. even how to get the colour id or information for therespective t shirt model. i have not found any hint in all the boards.

thanks and best regards,c–

20.

Stefan04-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 itdoesn’t work, thanks anyway, maybe you’ve set me on the right track.

21.

Ardin Furniture14-05-2010 at 17:47 | #

thanks

Magento (ver. 1.4.0.1)

22.

Tom01-07-2010 at 12:10 | #

23.


9 of 16 01-12-12 01.18

Hi Branko,

Could you please fix the problem with the screencast stopping?

Thanks, Tom

JUAN03-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 seta different price for the different colors, the photo doesn’t show anymore. It seems like since thephoto swap is related to the name, when you increase the price through the custom options it addsthe 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.

24.

chonkton28-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?

25.

Ankit Jadav19-11-2010 at 12:36 | #

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

26.

saurabh31-03-2011 at 7:19 | #

Really Thanks a lot..!!

27.

LEx28.


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 athumbnail image.

sonatasky19-07-2011 at 11:51 | #

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

29.

LEx19-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 meit was around 5 seconds).

People just don’t wait that long.

30.

Partytentlover07-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 agroup bundle for simple products but they need to choose a color within the groupbundle. Is thispossible within Magento?

31.

Kaushal22-10-2012 at 10:33 | #

Hello Branko Ajzele, I have done it quite perfectly. Working here very nicely. Thank you for puttingthis post. I really appreciate your stuff, your thinking.

32.


11 of 16 01-12-12 01.18

Toni Anicic28-11-2012 at 8:43 | #

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

33.

oracle30-11-2012 at 6:03 | #

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

34.

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

News29Starting up35Marketing21Products35Search9Frontend72Checkout13Administration39Configuration20Email13Upgrading8


12 of 16 01-12-12 01.18

Orders21Payment8Shipping7Extensions66MVC9Events & Observers8Programming104Database20Debugging34Integration25Design11Magento GO2

We can make your store more efficient

Have a chat with our Magento Consultants. You would be surprised how small changes can makeyour 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 FollowersFollow us

N/A ReadersSubscribe

2199 LikesFind Us


14 of 16 01-12-12 01.18

394 FollowersFollow Us

378 SubscribersSubscribe

Last Tweet

@designtodevelop fun times :D

Blog Categories

MagentoWordPressOnline MarketingMobile developmentTools & FrameworksZendFun & Events

Services

Magento ConsultingMagento DesignMagento DevelopmentE-commerce ConsultingE-commerce SEOE-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 anda 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

Documents