Magento’s Configurable Swatches

Create the Attribute

Go to Catalog > Attributes and create the attribute to be used to create the configurable product. This would be typically something like “Colour”. Make sure “Use to create configurable product” is set to “Yes”.

In “Manage Label / Options” add the options for the swatch, E.g. “Red”, “Yellow”, “Blue”. Magento will use these values when looking for the image files for the swatches.

Setting Up The Swatches Config

Go to System > Configuration > Configurable Swatches and set “Enabled” to “Yes”, and select the newly created attribute to be used as a swatch. Set any of the swatch dimensions required if required.

Create the Products

Create the configurable product, and add associated products to it using the attribute we’ve created above. You should now find that when you view your product you get text links output as the colour swatches. This is because Magento currently can’t find any images to use for the colour swatch itself.

Add the Images

There are two ways to get Magento to show images as swatches. The first is to add global swatches which are simply images which are placed in Magento’s **Media/wysiwyg/swatches/” directory using the option label as the filename. So, for example, you may have “blue.png”, “red.png” etc. The extension for image files is PNG.

The second, and this will supersede the first, will allow the setting of a configurable swatch on the product level. To do this, upload images to the configurable product, and then set image’s label field to the attribute’s option value with the suffix “-swatch”, E.g. “blue-swatch”. This image will now be resized and used as the image for that option.

Using Magento’s Configurable Attribute Renderers

Magento decides whether to use a renderer instead of simply outputting configurable options as a select element in catalog/product/view/type/configurable.phtml:

  • All renderers are loaded from the text/list block product.info.options.configurable.renderers
  • Each product attribute is looped over, and each of the renderers are looped over within and checked whether it should be rendered for that attribute.
  • The shouldRender of the renderer object is passed in the attribute and jsonConfig. In the case of swatches, Magento returns true if the attribute in question has been defined as a swatch type in System > Configuration > Configurable Swatches > General Settings.

Using this method, we can add other renderers to the product.info.options.configurable.renderers block, implement the shouldRender method, and decide whether the use that renderer based on the attribute we’re passed in.