How to Set Up Configurable Swatches in Magento?

15 Jun 2016

A while ago, we announced that Magento will present configurable swatches as an out of the box functionality. And indeed, it happened as version 1.9.x revealed this amazingly useful functionality that made it possible for sellers using Magento for their online business, to truly bring their amazing products even more closer to their customers.

As we promised, part two is here – a more in-depth overview of swatches spruced up with product presentation tips and some, ever useful, how-to guide.

It was long time ago that avid Magento users surpassed problems related to displaying different variations of one product.

With configurable products, it is incredibly easy to join products with different attributes into one product with multiple variations, while keeping track of things truly important to store owners – stock number and price, to name the few.

Instead of having dozens of identical simple products all showing on your storefront simply because they have different attributes (whether it is size, colour or something third) Magento store owners can easily integrate them and allow seamless experience for their visitors.

The fact that you can use swatches to present not only different colours, but different sizes and textures, makes them ideal addition to your online store’s product pages.

After all, having rows and rows of identical products doesn’t seem quite right.

Product list

Now, with configurable swatches, Magento store owners can go one step further, and what is even better – offer great experience to their customers, while completely bypassing third party applications/modules/extensions, whose misconfiguration often causes headaches to store owners.

It’s an out of the box solution, it works great and it’s rather easy to set up!

Lines below will hopefully give you a better insight into colour swatches in Magento as we will try to simplify and explain the entire procedure for your better understanding.

Back to basics

Configurable swatches are nothing but a way to display all available variations of your product.

Taking only “out of the box” solutions into consideration, up until now, you could offer identical functionality to your customers, but with one significant difference – options were listed in form of a dropdown menu, letting users choose product variation they wish to take a closer look into.

Which is great.

But as usual, there is a better way, widely used across eCommerce websites. And what is even better – the only thing you will need is Magento version that is above 1.9.1.

Before we start showing you how to set up your amazing new colourful thumbnails, let’s explore other prerequisites you need to fulfil.

Needless to say (although we will for all the novices out there), they are related to configurable products only.

Setting up attributes and attribute sets in Magento

Start setting up swatches by logging into administration panel of your online store.

Note that swatches are closely related to managing attributes on your store, so your first step needs to be navigating to Catalog and choosing Manage Attributes.

Here is how it looks like:

Setting up attributes in Magento

Setting up your attributes properly is a critical part of the process, as misconfiguring them will lead to your attributes not showing as available to set up on product detail page – which is exactly where you need them.

  • make sure your scope is set to Global.
  • select Apply to Selected Product Types.
  • mark Applied to Simple Products.
  • field Use to Create Configurable Products should be marked with “Yes”, as seen in the screenshot above.

Also, make sure you choose Dropdown for Catalog Input Type for Store Owner.

There is another important part of configuring your attribute, and we suggest you set them up as shown on the screenshot below.

Setting up frontend properties for attribute in Magento

Moving on, you should enter labels for all the swatches you wish to use on your product page.

Adding values to attributes in Magento

Another thing you need to do in order to set up your colour swatches properly is to assign your attribute to an attribute set by simply dragging and dropping it.

In case you still have a dilemma on how to assign attribute to attribute set – take a look at our detailed tutorial on the topic.

Next, you need to determine size of your swatch. Usually, swatches are no bigger than 20px, but of course, you should adapt everything to your needs.

You will have to determine size of the swatch that will appear both on:

  • product listing page
  • product detail page and
  • layered navigation.

Setting up configurable swatches in Magento

You are almost ready!

Navigate to System and choose Configuration. On the left hand side choose Configurable Swatches.

How to set up configure swatches in Magento

First things first – you should know that, by default, Configurable Swatches in Magento are disabled.

So, in case you have set up everything and already started despairing, turning to websites with questions ready to shoot at the entire community, check if you have enabled them in the first place.

Next, we have – Product Attributes to Show as Swatches in Product Detail , which is rather long, but also rather self explanatory. It is the field that will determine which attribute will you show in form of a swatch.

Now that you have everything set up, you can go ahead and start adding your swatch images.

Open your configurable product and add swatch images to your product. There is one more thing you need to be careful about when setting up your products though.

Adding swatch images in Magento

Colour swatch images will not show on your store’s front end unless you add label to them.

Your label should be exactly the same as the label you previously wrote down as your attribute’s values.

Here is how it will look like:

Product page with swatches


That is it, your products are ready to shine!

Make sure you let us know how the entire process looked from your point of view – in case you need some help, we are here!

  • Was this helpful?
  • Yes   No
  • Back