ColorSwatch

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.

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.

Notice:

Labels/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”.

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

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



• 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”



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

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

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

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: