Magento. How to add and manage Configurable Swatches

In this tutorial you will learn how to use swatches to make the presentation of configurable products more appealing and informative in Magento store.

Magento. How to add and manage Configurable Swatches

Swatches provide an alternate way to display the selection of options for configurable products. Rather than choosing an option from a drop-down list, customers can make their selection by clicking a swatch.
Swatches make the presentation of configurable products more appealing and informative.

1. First, let’s create our attribute.

   Go to Catalog > Attribute > Manage Attributes.

   Add new attribute, for example color:

   

2. Select Manage Label / Options tab to add your color values:

   

3. Next step is to create an Attribute Set.

   Got to Catalog > Attribute> Manage Attribute Sets.

   Add new attribute set, for example color.

4. From the Unassigned Attributes column, find our newly created attribute color and drag it to the left column:

   

5. Go to System > Configuration > Configurable Swatches to enable the module.

   The configuration enables swatches, and determines the swatch sizes used for the product and product list pages, and layered navigation:

   

6. Now we can create our Configurable Products.

   Go to Catalog > Manage Products and click on Add Product button.

   For the Attribute Set select the one that you’ve created:color.

   For the Product Type select Configurable Product:

   

7. Select attributes in Configurable Product Settings which you wish to use for this product.

   Note: you will not be able to change it later:

   

8. Now simply add the product information same as for simple products:

   

   

   

   

   

9. Go to the Associated Products tab to add our product variants.

   Using Quick simple product creation option, we can add our product variants:

   

10. This will create a simple product associated with our configurable product.

    Click to edit each variant:

    

11. We need to add image(s) for each product (variant). Go to the Images tab:

    

12. Do this for each product variant and then go back to the main product (configurable product).

    Go to the Images tab.

    We need to add product image(s) and also images for your color attributes (color swatch).

    Note: we must specify the Label. It should consist of the Attribute + “-swatch”. For example: blue-swatch:

    

13. Save the product when done editing and go to your site frontend to see the changes.

14. Swatches can be used on product pages, in product listings, and layered navigation:

    

    

Thank you for reading this tutorial. Now you know how to add and manage configurable swatches in Magento template(s).

Feel free to check the detailed video tutorial below:

Magento. How to add and manage Configurable Swatches