1.

On the Admin menu, select System > Configuration. Then in the panel on the left under Catalog, select Configurable Swatches.

2.

Click to expand the General Settings section. Then, do the following:

a.

Set Enabled to “Yes.”

b.

In the list of Products Attributes to Show as Swatches in Product Detail, select each attribute whose values you want to appear as a swatch.

The list includes only the attributes that can be used to create configurable products. The attribute must be the Dropdown type, and Use to Create Configurable Product must be set to “Yes.”

c.

Select the Product Attribute to Use for Swatches in Product Listing.

Because of the limited space in the product listing, only one attribute can chosen to appear as a swatch in the product list.

3.

To set the size of the swatches used on the product detail page, do the following:

a.

Click to expand the Swatch Dimensions on Product Detail Page section.

b.

Enter the Width and Height in pixels.

Just for reference, the swatches in the product page examples in this guide are 35 pixels square.

4.

To set the size of the swatches used in the product listing, do the following:

a.

Click to expand the Swatch Dimensions in Product Listing section.

b.

Enter the Width and Height in pixels.

5.

To set the size of the swatches used in layered navigation, do the following:

a.

Click to expand the Swatch Dimensions in Layered Navigation section.

b.

Enter the Width and Height in pixels.

6.

When complete, click the Save Config button.

7.

If prompted that the cache needs to be refreshed, click the Cache Management link in the message at the top of the workspace. Select the checkbox of each invalid cache. Then, with the Actions control set to “Refresh,” click the Submit button.

While you’re in Cache Management, notice the Flush Swatch Images Cache button in the Additional Cache Management section at the bottom of the page. If you ever need to update or replace existing swatches, this is how you can clear all cached swatches.

1.

Verify that the swatches work correctly from your storefront. Even without any swatch images, the text-based swatches should appear in the store, and work correctly.

2.

If any drop-down options from the configurable product are missing from layered navigation, do the following:

• Verify that the attribute frontend property, Use in Layered Navigation is set to “Yes.”
• Return to Cache Management and click the Flush Magento Cache button.