Magento. How to use color swatches in layered navigation

This tutorial will show you how to use color swatches in layered navigation block of your Magento store.

Magento. How to use color swatches in layered navigation

1. First, you need to open Admin panel of Magento store and navigate to Catalog – > Attribute – > Manage Attributes Section. Add new attribute, for example color:

   

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

   

3. The next step is to create an Attribute Set.

   Navigate to Catalog > Attribute> Manage Attribute Sets.

   Add a 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. Navigate to the System > Configuration > Configurable Swatches and enable the module. The configuration enables swatches, and determines the swatch sizes used for the layered navigation:

   

6. In order to display swatches in layered navigation, you have to use global swatch images /media/wysiwyg/swatches on server or using the WYSIWYG Editor you can insert an image that resides on your computer, upload it to Media Storage with the same name as the Color attribute label. Use all lowercase letters and replace non-alphanumeric characters with hyphens.

   Open CMS – > Pages – > Home Page – > Content tab – > Insert image , upload image to the swatches folder:

   

7. Open Admin panel of Magento store and navigate to Catalog – > Manage products. Create a product or edit the existing one, and apply new color attribute to it:

   

8. Clear Magento cache to check the changes applied.

Feel free to check the detailed video tutorial below:

Magento. How to use color swatches in layered navigation