The NRO Color Swatch Extension that was developed by NCR used a special image naming convention to dynamically parse color specific image file names for determing the color swatches to display on category and product pages.


The attached extension should be installed which greatly improves this logic by using the images from the associated simple products no matter what the image filename is called. This allows for special characters to be used in the image filename and eliminates any potential issues with filename parsing from the original NRO extension.


Once the extension has been installed it can be tested on the front end by going to a product page.

  • When you click on a color/style specific image it will automatically change the "Color/Style" dropdown to the associated color/style
  • If you select a color/style in the "Color/Style" dropdown the main product image will be changed to the color/style specific image


Installation Instructions


Delete the following NRO files:

  • app/code/community/NCR/GridProduct/* 
  • app/design/frontend/base/default/template/ncr_gridproduct/media.phtml
  • app/etc/modules/NCR_GridProduct.xml


Delete the following files if they exist

  • app/etc/modules/Ecomitize_ColorSwatches.xml
  • app/code/local/Ecomitize/ColorSwatches/*


Copy the following files from the attached extension:

  • app/code/local/Ecomitize/ImageSwatches
  • app/design/frontend/base/default/layout/ecomitize/image_swatches.xml
  • app/design/frontend/default/celebrity/template/catalog/product/view/media.phtml
  • app/design/frontend/default/celebrity/template/catalog/product/view/type/options/configurable.phtml
  • app/etc/modules/Ecomitize_ImageSwatches.xml
  • skin/frontend/base/default/js/ecomitize/image-swatches.js


Note: Make sure to modify the template file as needed for the website

  • app/design/frontend/default/celebrity/template/catalog/product/list.phtml



You also need to change images size in files app/code/local/Ecomitize/ImageSwatches/Block/Product/View/Type/Configurable.php and app/design/frontend/default/celebrity/template/catalog/product/view/media.phtml



Configuration Options

  • System -> Configuration
    • Catalog -> Catalog -> PDP Image Swatches
    • Product attribute ids for image swatch
      • List of comma separated configurable swatch attributes


The following setting is highly recommended for displaying the swatch (color) specific image in the Shopping Cart


  • System > Configuration > Sales > Checkout