Get a Quote

Tutorial: Create Configurable Swatches in Magento 1.9.1

Share On Facebook
Share On Twitter
Share On Linkedin

Create Configurable Swatches in Magento 1.9.1

Creating color swatches on your Magento ecommerce website can be time-consuming, but it pays off with higher sales. You are more likely to make an online sale when options are right there on the product page. You will miss out on sales if you count solely on “related products.” Making individual products for each variation in color, fabric and size can be a maintenance nightmare. Configurable swatches in Magento 1.9.1 are a new feature, and this tutorial will walk you through setting them up.

You are not limited to just color, fabric and size. Configurable swatches in Magento can be any type of attribute, and you can create your own. You can use swatches on the individual product page, in the product lists and in layered navigation. When the site visitor clicks a swatch, the product image can update instantly to show exactly what the product looks like with that attribute. This helps increase sales by increasing consumer confidence in the appearance of the item. They know just what they are getting, and they trust that they have chosen the right item before they add it to the cart.

If you are using Magento Enterprise Edition (EE) 1.14.1 (or later) or Magento Community Edition (CE) (1.9.1 or later), you can use this tutorial on the best ways to make custom swatches. (If you are on an older version of Magento, try out Amasy’s Color Swatch Pro extension, which integrates well with their Improved Layer Navigation.)

How to Add Swatches to a Catalog Item

1. Make sure the attribute you want has been created. If not, make it now:

1.a Choose Catalog -> Attributes -> Manage Attributes
1.b The attribute must have the following properties:

  • Scope = Global
  • Catalog Input Type for Store Owner = Dropdown
  • Apply to = Configurable Product or All Product Types
  • Use to Create Configurable Product = Yes
If you need help with your Magento store, call 845-656-3000 or Contact us here »

2. Follow these steps to create an Attribute Set that has the options you want (such as yellow, red, blue etc.)

AttributeSet1

Manage the attribute set

2.a. Catalog -> Attributes -> Manage Attribute Set “Add New Set”

2.b. Name the attribute set appropriately e.g. “Canvas Posters”. The attribute set can inherit an existing attribute set’s properties (“Based On”). Save the attribute set.

AttributeSet2

Name and save the attribute set

2.c. Next, drag the Attribute created above (or already existing) to appropriate group on the left hand side and then save.

magento screenshot

Put the attribute into a set

3. Create a Configurable Product (Catalog -> Manage Products “Add Product”)
3.1. Set the attribute set to the Attribute Set you created above, ie. “Canvas Posters”. Set the Product Type to “Configurable Product” and continue.

magento swatches tutorial

Choose the attribute set and product type

3.2 Tick the boxes for the attributes that you want to be configurable and continue.

magento product

3.3 Next, you will need to create the base product that you want to be configurable. Fill out the following: Name, Description, Short Description, SKU, Status, Visibility (Catalog Search). Click save.

Configurable Product

Create the base product

3.4 Prices screen should load next, fill out the Price and Tax Class of the product.

3.5 Select Categories from the side bar. Tick the categories you want the configurable product to appear in.

Configurable Product

Choose the categories

3.6 If you have more than one store, click Websites and tick the webstores you would like the configurable product to appear on.

If you need help with your Magento store, call 845-656-3000 or Contact us here »

3.7 Click Inventory. At this point you can choose to either have each product managed individually or to have the products all be based off of the same inventory stock (ie., if a manufacturer had a white tee shirt that they dyed many different colors, as opposed to 10 blue, 5 red and 6 green shirts). To do the former, leave the default configuration settings and just change the “Stock Availability” to “In Stock”. Save.

ConfigurableProduct8

3.8 Next, you’ll need to create the Associated Products. The Name, and SKU for each associated product can be left to “Auto-generate”. Change the Status to “Enabled”, the Visibility to “Not visible individually”, and Stock Availability to “In Stock”. Enter the quantity. In this example, our swatch will be based on color. As such, the color field needs to be selected.

If you enter a price on this screen, it will add that to the price that was defined when you created the base product (picture 2/3). Click “Quick Create”. Add as many items as you wish, then click Save – otherwise the products will show as created in the Manage Products area but not be associated with the Main Product.

Configurable Product

Create the associated products

Configurable Product

Select the attribute (such as the color)

ConfigurableProduct12

4. Next, you’ll want to enable Configurable Swatches (System -> Configuration). Then under the Navbar header “Catalog,” select “Configurable Swatches.” Make sure that “Enabled” is set to “Yes”. Also make sure that “Product Attributes to Show as Swatches in Product Detail” includes the attribute that you are using. (In this example, it is color.) Save the Config.

Swatches

Check your settings

5. Add the swatches in. Go back to Catalog -> Manage Products -> (The Main Product You Created) -> Images

5.1 Upload the images that you want for the swatches. The images should be a .png file with the word -swatch afterwards — for example, Black-swatch.png or Blue-swatch.png

magento swatch file name

Best to add “-swatch” to the image file name, so you know what it is.

5.2 Set one of the images to defaults/depending on needs.

Swatches default

Choose default images

5.3 Label each image swatch as shown below. This will allow for changing of the product as a specific color is selected while viewing.

magento swatch labels

Label Each Image

5.4 Save.

6. Re-index and clear the cache.

For more information about Magento, contact us at 845-656-3000 or Get a Quote »

7. Repeat these steps for set of swatches you need.

Bonus tip: With swatches, you are not locked into just showing a solid colors. On the All3Sports.com website, the products are typically multi-colored. This high-end sports ecommerce website has an actual picture of the products in the swatches area. Check out these screenshots:

shoes-green

 

shoes-red

  • JacquieK

    This can be accomplished: Under System -> Configuration -> Sales -> Checkout -> Shopping Cart, set Configurable Product Image to Product thumbnail itself. Also, make sure you have an image for each of the associated simple products selected for Thumbnail.

  • David

    I can’t get the color picker option to change the base image. I have config product images as my swatches. Then for my simple products I have 1 image set as thumbnail. I have pretty much read all the tuts online and have not been able to get it to work.

    • David, This could be due to one of many issues. I would clear all of the Caches under System -> Cache Management. I would make sure to clear the Images Cache on that page as well. Then I would check that there is not another image conflicting with this for the base product.

      – Matt

  • Hey! Perfect tutorial. Is there a way to hide the out-of-stock options in the product listing page? It looks now that in the product list there are visible all options that are associated in the main (configurable) product. On the product page everything seems fine.

    • Hi Vaidas,

      This might be possible with a customization. When I set a configurable products option to out of stock, on the default RWD theme it appears to remove the option of adding that product to the cart.

      – Matt

      • Hey. It’s working perfectly in the product page. But I was referring to the product listing page. Have you manage to remove the out-of-stock options from there too?

        • Hi Vaidas,

          From what I can tell, this is not possible with native Magento functionality.

          – Matt

  • esolesek

    This doesnt even begin to outline how to to both sizes and colors at the same time with changing images, something most people want to do, and for some stupid reason, magento makes impossible beyond all reason, and then buries us with scads of incomplete tutorials, both in and out of house, just to do the most basic thing.

    • Hi esolesek,

      To do this, make sure you create a configurable product with both attributes selected (size and color). Next, create the base product. If I have a shoe – sizes 10,11,12 that comes in the color red. I will create an associated product for each of these instances. Then I save and go to each of those products and upload the image for that shoe and size.

      – Matt

      • esolesek

        THanks. I was trying to wrap my head around this. Figured maybe a configurable product (color) could be the parent to multiple configurable products (size), but I see the direction you’re going in (I hope).

        • Hi esolesek,

          Right, you’ll simply want to create the associated product with both attributes instead of creating a color configurable and trying to somehow add in sizes for it.

          – Matt

  • Avana

    Hi, My conf. swatches does not look like how you describe it above. I only have an option Yes/No to choose in “Product Attributes to Show as Swatches in Product Detail” unlike yours which is colors, etc. Am I missing something?

    • Filipe Marques

      Same problem here… any suggestions ? Avana, Did you fix it ?

  • Dominik Janßen

    Thanks a lot, nice Post! I have only one little Problem. On category List swatches are also shown for not in stock/deactivated Products. Does anyone have an idea how to hide swatches of deactivated products in category list?

  • Hi,

    I have some issue about doing this.

    Here is the example what I did: https://mag.outdoorequipped.com/brands/victorinox/victorinox-303337-werks-professional-advisor.html?___SID=U

    How we do with different products and different brands? Theu will use all the same swatch image?

    We are about to import a lot of products, how we need to do it?

    Kindly Simon

  • Yep that’s all true. but have you noticed even when you have chosen a
    “red” pair of shoes a green thumb is shown in cart.. This is the problem
    is make the system a problem for customers and customer service: http://cmsideas.net/magento-color-swatch-plus.html

  • derek

    Good explanation and examples. When I was uploading swatches for the first time I could not figure out how to make image change when specific combination is selected at the storefront. I’ve read in this post that each of simple products should have desired image assigned as Base.

  • Filipe Marques

    Whe I go to Configurable Swatches window no attributes are shown. What am I doing wrong ??? Thanks.

  • Adell

    Exactly this I was looking all this time! I can’t understand clear explanation of it. I know very good Magento 1.14.1. but with 1.9.1. I still have problems(

    There are so many articles about this via internet, but all of them are like reviews. For instance, this one http://sam-ecommerce.com/blog/view/magento-community-edition-1.9.1-download is great but it is only basics of it!

    Many thanks for this detalization! I an very greatful to you!

  • Great guide for the newbies.

  • iniesta

    Hey, is it possible to link to a particular colour option in anyway?

  • Amanda Hall

    I can either get the color swatches to show, or the color names to show in the dropdown, but not both.