Magento – Magento 1.9.2.4 configurable swatches don’t change main image

configurable-productmagento-1.9productproduct-attributeswatches

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 ?

Best Answer

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

Related Topic