# Swap Multiple Images with Configurable Swatches

I've got a question about the new lovely feature Configurable Swatches.

I am setting up a configurable product with Colour and Size options, and I have set it up so that when a Colour is selected in the options, the Base image is changed.

I have added two images to the Configurable product, and two images for every Simple product (for each and every size), hoping that when selecting a Colour option, both images for the Configurable product would change to the two images connected with the specific Colour option.

Unfortunately this does not work, only the first image of the Simple product is displayed, and I can still see the two Configurable images in the thumbnails.

What I would like is that, when selecting a Colour option, all images are replaced by the images I have uploaded for that specific Colour option. Does anyone know if this is possible?

I should add that I am working with the new Magento CE 1.9.1 with the default RWD theme.

I have built this, in a modular way. Will post the code on github soon.

It triggers on a JavaScript call and fetches the images with Ajax. So it does not effect page speed or caching system.

PM me if you want the code asap. Otherwise follow me on Twitter @willemwigman to hear when I post the code.

Edit: I've put the code on github https://github.com/wigman/AjaxSwatches

• Hi Willem, I would love to receive the code asap if possible! – Naeem Dec 11 '14 at 1:32
• Alright, I have to make some additions to make it plug and play. Will contact you later today. – willem wigman Dec 11 '14 at 10:40
• Hi Naeem, I've posted the code here: github.com/wigman/AjaxSwatches Please let me know if you run into any problems. – willem wigman Dec 11 '14 at 14:15
• Hi Willem! I tried to use the code, however it does not seem to work on my shop. Where should I upload the different images? I have added the option specific images to the simple products and two other images to the configurable product. The big product image changes when I select an option, however the "More views" area remains the same. Link to product page – Naeem Dec 11 '14 at 15:31
• Hello Naeem, You stated you were using the new 1.9.1.0 RWD theme, but you aren't. You are using another theme with the use of the Easylife_Switcher extension. If you activate the RWD theme, you can simply keep all my files in the same location (/app/design/frontend/RWD and /skin/frontend/rwd/) – willem wigman Dec 11 '14 at 16:00

https://github.com/wigman/AjaxSwatches

There is some problem with this extension in Magento 1.9.3.x.

I have to modify this function _loadOptionLabels in app/code/community/Wigman/AjaxSwatches/Model/Resource/Catalog/Product/Attribute/Super/Collection.php to make it work.

protected function _loadOptionLabels()
{
}


I recommend you this extension.
One of its features is what you need. It allows you to change the whole media section when you change the color (or any other attribute) displaying the images for the simple product.
See the documentation for the configuration to see how you can achieve this.
The extension was build for versions between 1.7 and 1.9.0.1. It works on 1.9.1.0 also. But I recommend disabling the core Color Swatches functionality if you use this extension.

• Hi Marius, Thank you for the tip. Do you know how to display the price value from the Select dropdown that is turned into labels by the modules? I'd like to display the full prices next to the colours, not the difference in price. – Naeem Dec 11 '14 at 18:53
• That is a totally different question. Don't mix them. Ask a new question please. – Marius Dec 11 '14 at 19:21
• @Marius is it possible to show listing page in this swatch imgae – Magento 2 Nov 30 '16 at 9:31

And Magento community to the rescue!

This Module adds an Ajax event to the new ColorSwatches in Magento 1.9.1.0 When the event ConfigurableMediaImages.updateImage fires up, the original updateImage() function is executed. After this we make an AJAX request to [baseurl]+'ajaxswatches/ajax/update' requesting the MediaGallery images.

• Thanks Ben! I hope it's useful. I needed the functionality myself few days ago, so why not share? :) – willem wigman Dec 11 '14 at 16:09

Does anyone know if this is possible?

Yes, but it will require customization. The degree of customization is something I do not know.