Configurable Swatches for Magento 1.9.1.0

I. Introduction

Configurable swatches optimize the way you present products on your site and boost conversion rates by offering shoppers quick access to information—like available colors, fabrics, sizes, and more.

Swatches can be used on the product page, product list, and in layered navigation. Clicking a swatch automatically updates the product image so shoppers see exactly what a color or fabric looks like, giving them confidence to proceed with their purchase.

Configurable swatches are available in Magento Enterprise Edition (EE) 1.14.1 or later and Magento Community Edition (CE) 1.9.1 or later.

II. Update Color Swatch code

Step 1: Download the updated code files

Download Color swatch files then Unzip package

Step 2 : Unzip download package and rename design pacakge and theme folder

Unzip download page , there are 2 folder: app and skin.
1.Change design package name of folder your_package under folder \app\design\frontend\ to your package.
For example : If you are using default package as image below:

Rename Package folder

then change your_package to default

2.Change design package name of folder your_package under folder \skin\frontend\ to your package.
For example : If you are using default package as image above, change your_package to default

3.Change theme name of folder your_theme under folder \app\design\frontend\{your_package} to your theme name.
For example : If you are using theme Megamall, please find the theme name as image below

Rename Theme folder

then change your_theme to jm_megamall

4.Change theme name of folder your_theme under folder \skin\frontend\{your_package} to your theme name.
For example : If you are using theme Megamall, please find the theme name as image above, change your_theme to jm_megamall

Step 3 : Copy updated code package then paste on {root} folder

III.Update template style

Step 1: Update catalog.xml

Open /app/design/frontend/{your_package}/{your_theme}/layout/catalog.xml
1. Find name="product.info.options.configurable" in block

<block type="catalog/product_view_type_configurable" name="product.info.options.configurable" as="options_configurable" before="-" template="catalog/product/view/type/options/configurable.phtml"/>

Replace with block code

<block type="catalog/product_view_type_configurable" name="product.info.options.configurable" as="options_configurable" before="-" template="catalog/product/view/type/options/configurable.phtml">
<block type="core/text_list" name="product.info.options.configurable.renderers" as="attr_renderers" />
<block type="core/text_list" name="product.info.options.configurable.after" as="after" />
</block>

2. Find <catalog_category_default
Before block

named product_list_toolbar (<block type="catalog/product_list_toolbar" name="product_list_toolbar" template="catalog/product/list/toolbar.phtml">)

Add code

<block type="core/text_list" name="product_list.name.after" as="name.after" />
<block type="core/text_list" name="product_list.after" as="after" />

3.Find <catalog_category_layered
Before block

named product_list_toolbar (<block type="catalog/product_list_toolbar" name="product_list_toolbar" template="catalog/product/list/toolbar.phtml">)

Add code

<block type="core/text_list" name="product_list.name.after" as="name.after" />
<block type="core/text_list" name="product_list.after" as="after" />

4. Find name="product.info.media" in

<block type="catalog/product_view_media" name="product.info.media" as="media"

Replace with the code

<block type="catalog/product_view_media" name="product.info.media" as="media" template="catalog/product/view/media.phtml">
<block type="core/text_list" name="product.info.media.after" as="after" />
</block>

Step 2: Update media.phtml

Open file /app/design/frontend/{your_package}/{your_theme}/template/catalog/product/view/media.phtml

1.Add code to end of the file media.phtml

<?php echo $this->getChildHtml('after'); ?>

2.Exclude images is color swatch image in thumbnail list.
Note: Please compare your file media.phtml with file media.sample.html in our updated package before update.
Out site of block code which generates thumbnail image list, add code

<?php if ($this->isGalleryImageVisible($_image)): ?>
<!-- The code to generate thumbnail images list go here.... -->
<?php endif; ?>

Step 3 : Update list.phtml

Open file /app/design/frontend/{your_package}/{your_theme}/template/catalog/product/list.phtml
1. Add attribute id to image tag with code below

<img id="product-collection-image-<?php echo $_product->getId(); ?>"

2. Inside  Grid & List mode code section , there is HTML tag which is used to show product name, please find HTML tag code  then add following code under it.

<?php
if ($this->getChild('name.after')) {$_nameAfterChildren = $this->getChild('name.after')->getSortedChildren();
foreach ($_nameAfterChildren as $_nameAfterChildName) {$_nameAfterChild = $this->getChild('name.after')->getChild($_nameAfterChildName);
$_nameAfterChild->setProduct($_product); 
echo $_nameAfterChild->toHtml();
}
}
?>			

3. Add code to end of the file list.phtml

<?php
// Provides a block where additional page components may be attached, primarily good for in-page JavaScript
if ($this->getChild('after')) {
$_afterChildren = $this->getChild('after')->getSortedChildren();
foreach ($_afterChildren as $_afterChildName) {$_afterChild = $this->getChild('after')->getChild($_afterChildName);
//set product collection on after blocks
$_afterChild->setProductCollection($_productCollection);echo $_afterChild->toHtml();
}
}
?>

Step 4 :Enable color swatch features

• Open backend then navigate System/Configuration/CATALOG/Configurable Swatches , change setting as image below

Enable ColorSwatch

• Clean the Magento cache