So you are about to grab Magento extension ColorSwatch for your eCommerce Magento store. ColorSwatch is an extension for configurable products presenting how a product looks like in different colors. This also shows the relationship between your product size and stock.

This documentation will guide you step by step to install and configure Slideshow. Let’s get started.

Configurable Products let your customers select the variant they desire by choosing options. Say you sell shoes in two colors and three sizes; you would need to create six variants as individual products (with their own skus) and then add these six to a configurable product from where customers can choose size and color, then add to cart.

In this guide, the product named “Saucony Progrid Omni” in demo will be used as sample.

Firstly, you need to know relationship of Configurable Products and Associated Products and how to create them.

Magento ColorSwatch

1. Creating a Configurable Product

There are a few steps involved:

  • Create the attributes that will be configurable by the user -- for our example they will be Size
  • Create the attribute set that will be assigned to the variant products -- for our example, we’ll call it “Default”
  • Create the configurable product, and add the “Default” attribute set
  • Add the individual variants to this configurable product
  • Create the individual variant products

Creating Product Attributes

Below are screenshots of how the configurable attribute “Size” is set up.

Product attributes


The “Catalog Input Type” is set to dropdown -- this is required for the attribute to be compatible with configurable products.

The Scope is also set to Global.

The Use To Create Configurable Product must be set to Yes.

Required is also set to “Yes”.


Size Options

Creating Product Attributes

Now we’re ready to create an attribute set called “Default” to start using for this product.

Go to “Catalog -> Attributes -> Manage Attribute Sets” and press “Add New Set”.

Attribute set

In our example, the name is “Default” and we’re basing it on the default set:

Attribute configuration

Creating the Configurable Product

  • After making all the variants, navigate to “Catalog -> Manage Products”
  • Press “New Product”
  • Select ‘Configurable’ based on the “Default” attribute set
  • Create new attribute

  • The next screen lets you pick which attributes you want to associate. It picks attributes from the set that are Input Type: Dropdown, Scope: Global, and Use To Create Configurable Product: Yes
  • Select “Size” and press “Continue”
  • Choose Size

  • The general tab used for the sample product looks like this:
  • General settings

The next page is the regular create product page, with the addition of the “Associated Products” tab at the bottom.

2. Creating Associated Products

Finally, let’s take a look at the “Associated Products” tab to know how to quick create associated products

Associated Products

After adding products, they will be listed at the listing below:

Associated Lists

When you’re done with all this, associate the product with a store and front-end category, and you’ll be able to find it in the front-end. You’re done!

Here’s a section from the front-end for this configurable product, done and ready to use:


Secondly, you should view the relationship between products has multi-color. In this case, it’s actually related productsM


After creating more products in different colors as configurable product, go to {Related Products} tab of Product Information and select all configurable products of this product which have different colors.

Related List

Here’s a section from the front-end for this related products, done and ready to use:

Multi color at Details page:

Detail page

Multi color thumbnail at Product List:

List Thumbnail