I've been stuck for hours on this one.
Product I'm working on: this site
I've made this configurable product, enabled swatches and added photos for each of those associated products. However when I click on color and size, can't get main image to change.
How do I fix it ?
Many times theme not configured with RWD color swatch , if the theme is not design by taking base of RWD theme then it may possible that your swatch want wont work,
or may be if you have installed some gallery extension then also main image wont change.
You can try below solution for this problem
1) rename your default media.phtml and put rwd theme media.phtml and check.
2) you miss this js/lib/elevatezoom/jquery.elevateZoom-3.0.8.min.js file in your header for product page , please add this line in your local.xml file
<catalog_product_view>
<reference name="head">
<action method="addItem"><type>skin_js</type><script>js/lib/elevatezoom/jquery.elevateZoom-3.0.8.min.js</script></action>
</reference>
<reference name="product.info.media">
<block type="core/text_list" name="product.info.media.after" as="after" />
</reference>
</catalog_product_view>
in your head section of product page.
3) also add below code in your local.xml
<default>
<reference name="head">
<action method="addJs"><script>lib/jquery/jquery-1.10.2.min.js</script></action>
<action method="addJs"><script>lib/jquery/noconflict.js</script></action>
<action method="addItem"><type>skin_js</type><name>js/lib/modernizr.custom.min.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/lib/selectivizr.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/lib/matchMedia.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/lib/matchMedia.addListener.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/lib/enquire.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/app.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/lib/jquery.cycle2.min.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/lib/jquery.cycle2.swipe.min.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/slideshow.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/lib/imagesloaded.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/minicart.js</name></action>
</reference>
</default>
If files were missing then copy those files from RWD theme to your theme
Check this URL to configure magento default swatch properly : Change product image for configurable products
Note : If the theme is not designed based on RWD theme or if you have installed any module/extension for swatch then it may possible that your default magento swatch will not work.
