How to Set up a Configurable Image Switcher

Magento swatches is the way to visualize configurable product selections. Configurable Swatches was a recently added feature in Magento Enterprise Edition (EE) 1.14.1 (or later) or Magento Community Edition (CE) (1.9.1 or later), which allowed for the main configurable image to switch depending on the selecting of the simples when configuring the product.


How to Enable Swatches for Configurable Products

The first step here is to enable this functionality (which by default is disabled).

1) Navigate to System > Configuration > Configurable Swatches (under the Catalog section)

2) Click first into the General Settings tab and set the Enabled field to Yes where you would like this feature enabled. In the Product Attributes to Show as Swatches in Product Detail field, you will also need to highlight which attributes you want to use configurable swatches for (e.g. Colour).

*The additional tabs within the Configurable Swatches section control the appearance of these swatches, so you may want to come back and amend these should you feel the dimensions of these swatches is not quite right.


How to Configure Images to be used as Configurable Swatches

1) The first thing here is to appropriately name your images. Images need to be named with the relevant attribute option followed by '-swatch' afterwards, and saved as a .png

For example, if you had a bbq that came in 3 colours (Black, Blue & Polkadots) you would want to follow the below naming conventions for the 3 images that you were to assign to the configurable (representing each of the choices):




2) Once images are saved appropriately to the above format, they can then be uploaded against the configurable product and saved.

3) Once saved, the Label of the image needs to also be reflective of the Attribute Option (exactly as it appears within the Attribute) for each of the relevant simples.

For example, if the options are again Blue, Black and Polkadots the Image label for each needs to reflect the relevant Attribute Option.

4) Once all image labels have been done, click Save and you are done!

Have more questions? Submit a request


Please sign in to leave a comment.