With the latest releases of Magento Community and Enterprise editions, color swatches are now available as part of Magento’s built-in functionality. Color swatches are becoming increasingly popular for online shopping because they allow shoppers to easily view a product in a variety of colors or textures from the grid or product view pages. Swatches are the best way for your customer to quickly compare product varieties.
For stores that require a simple and lightweight solution for color swatches, Magento’s new default swatches are a welcome addition to the existing framework. However, there are some limitations with the current release. While we anticipate Magento will address most of the quirks with upcoming releases, we’ve put together a general overview of our experience so far with Magento’s swatches.
Process of adding swatches & colors:
The process of adding swatches and colors is somewhat time consuming. To prepare, be sure to save out all of your products with separate swatch images for each product. Your swatch images need to be named specifically after the attribute name and the addition of “-swatch”. For example, your black swatch will be called Black-swatch.png. Be careful if your attribute has symbols. Extra dashes before “-swatch” will cause the swatch to break. If your attribute is “Black/Red”, then your swatch’s name would be “Black/Red-swatch”. The swatch images can be small, usually 50px or 40px works well.
You can use the product image as a swatch, but it usually looks better to use a close-up of the actual material. This gives your customers a better look at the variety you offer for each product and it’s a more bold & attractive way to encourage clicks.
We’ve written before about adding colors and swatches to your products using Magento’s default swatches. For a step-by-step tutorial, see Matt’s blog post.
Limitations and workarounds:
1. Image aspect ratio settings don’t work on grid view with swatched products
Magento allows you to enable or disable image aspect ratio on grid views, but this functionality does not work correctly for products that use Magento’s color swatches. We found that products with swatches would revert to a square aspect ratio once a color was selected.
Oddly enough, it worked as desired on the search results page, but not on grid view. We alerted Magento to the bug, but in order to get it working when needed, we had to pull larger small images, and then use CSS to stretch the images and hide the white space that was generated on either side.
2. You can’t use the same swatch for more than one product
By default, Magento’s swatches are not associated with an attribute, rather they are associated with a particular attribute as applied to a particular product. If you have 10 products with a red version, you need to update 10 different red swatches to 10 different products. This can get time consuming and it’s something we suspect Magento will address in future updates.
3. You can’t apply a swatch to more than one image or to a gallery of images.
Many Magento stores offer a variety of views for each product color. Unfortunately with Magento default swatches, you can’t associate a swatch with more than one color. If your site requires different galleries for each color, Amasty’s color swatch extension is a good option.
4. There is no fine control for the order of swatches
If you want your attributes to reflect a specific order, filling in the position field for Associated Products won’t work. This is more of a problem with configurable products, but if you want to re-order the swatches so that the options appear in a certain order for your customers, the only way is to clear the associated products and then re-add them based on the order that they need to appear.
Conclusion
Increasingly popular usage of color swatches has led Magento to adopt them as part of it’s default functionality on Community and Enterprise releases. While the swatch functionality has room for improvement, it’s a good simple solution for stores who need to simply display products in an array of colors.
Customer Success Manager
