Skip to main content
GeneralMagento

Magento – colour swatch image not changing

By January 15, 2016June 2nd, 2016One Comment

Magento Community Edition (v1.9.1 +) and Magento Enterprise Edition (v1.14.1 +) allow you to create custom swatches without the need for a plugin.

To do this you’ll need to have set up a Attribute Set e.g. Colour, that is global and can be applied to Configurable Products or All Product Types. You’ll then need to set up a configurable product (this will have the main product details) and series of variant simple products (e.g. blue / green / black / white variations). These simple products will then be associated with the configurable product.

However, the set up of the product images and swatch colour patches isn’t clearly defined in Magento’s documentation or several online tutorials.

Colour swatch image not changing

Magento colour swatch

The example I’ll use is a real life example of some cuff links, that have different colour options, with a new photo for each.

Configurable Product

Let’s start with the configurable product. This should have one image, which will be the default image used in category listing pages. Upload an image and set it to be the Thumbnail, Small Image and Base Image. Set it to exclude to prevent an additional gallery thumbnail from appearing underneath.

Magento configurable product

Simple Products

Each simple product will have the alternate photo for that product. The example below has a black cuff link image, for the black simple product.

Magento simple product

If you continue to add one photo for each simple product, your category and product page should now show change every time you select a different colour swatch.

Magento colour swatch product image

Colour Swatch Images

If text is shown instead of colour boxes, your colour swatch images still need setting up. You can download a free 15×15 and 21×21 swatch set from the Ham Sandwich blog.

The paths to your swatches should be something like;

/media/catalog/swatches/1/21×21/media/[attribute-name].png

/media/catalog/swatches/1/15×15/media/[attribute-name].png

The [attribute-name] for my earlier example would have been black.png. You will need to add to this set to display additional attribute colour names, not in the set.

The 15px x 15px swatch images are used on the category listing pages and the larger 21px x 21px swatch images on the product page.

Colour Swatch Images Are Still Not Changing

If your colour swatch images are still not changing, I’d recommend;

  • Changing you theme to rwd and testing if the issue is theme related
  • Try to get the swatch working with one associated simple product
  • Use firebug to debug missing swatch image paths

I hope this article helps to resolve your missing or unchanging swatch image issue. Let me know in the comments if the post was useful.

Andrew Taylor

A senior UI designer with over 25 years of web design and web development experience working for some of the largest companies in the UK. An expert in all things Magento and WordPress.

One Comment

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.