The request was to have an extensive online store solution with multiple customers groups. Those groups should have different product prices and different payment options. Magento seemed like a great solution for such a request, although the initial concern was if it might be an overkill considering the fact we only have one product to start with?

When the development started to roll out, the concern was no more. This will work superbly. We give you the new Magento store that uses a combination of WordPress and Magento. Magento portion of the site is visible from the Online Store tab.

You may also notice a styled color switcher feature we developed for this project. As this product comes in various colors, we decided to spice up the product info page and style the color choosing to replace the default select box.

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