Troubleshooting Magento Configurable Swatches

Things work great until they don’t.

Configurable color swatches are nothing new to the eCommerce industry. The ability to show customers how different colors or patterns actually look on a product can certainly help to improve conversion rates. We’re living in a visual world. Would you really want to order that orange/slime/green pair of shoes if you couldn’t see what those colors looked like on the actual shoe?

Magento, one of the premier choices for eCommerce solutions, now provides configurable color swatches as an out-of-the-box feature (previously, you needed an extension to get this functionality). There is a fantastic tutorial on how to set up these color swatches in the Magento Knowledge Base.

We recently launched our first Magento website that utilizes these new configurable swatches. Set up was pretty easy, and the swatches instantly provided a wonderful user experience. With just a click of a button, you can watch the pattern change before your eyes.

Things worked great for several months. Then we ran into a bit of a mystery. A new configurable product, set up exactly the same as the other products on the site, wasn’t swapping out the different patterns. Clicking on the swatch icons did nothing. The other products were still working as before, but the new one wouldn’t swap no matter what we did.

We tried deleting it and recreating it. We reread the documentation. We looked at the code. There didn’t seem to be any logical reason why this particular product wasn’t swapping images. Other products using both Size and Pattern attributes were swapping fine.

Then I noticed something different. It seemed rather minor, and I was sure it wouldn’t make a difference. One of the products used non-alphanumeric characters within the Size attribute (" for inches). Not convinced it would solve the problem, I went ahead and changed the " to in, then refreshed the cache. Sure enough, the images were swapping out just as they should.

What’s particularly odd here is that the thing preventing the images from swapping was not directly tied to the attribute associated with the configurable swatches (we are using the Pattern attribute for the swatches, not the Size attribute).

There are times when you may want to use other characters in your attributes, so we hope Magento resolves this little bug in the future. In the meantime, Magneto configurable swatches are a great way to improve the appearance and usability of your products. By giving your customers better visualization of your product options, you should be able to increase your conversions and sell more products.