Magento 1.9x RWD – Showing Color Swatches in Layered Navigation

There are a few steps to get Magento 1.9x default RWD Color Swatches to show in the layered navigation.

1. Go to your attribute and make sure it is set to global

attribute_global-300x118

2. Ensure that you know the exact name of your color that is listed in the Admin column and save your images with this file name

attribute_label-300x173

3. Save your image as a PNG file. If your Admin Label in step 2 contains any spaces or special characters, be sure to replace those with hyphens and replace uppercase with lowercase in the filename. (ie: Black Powdercoat should be black-powdercoat.png)

4. Now head over to edit any CMS Page or Static Block and Insert an image

cms-addimage-300x140

5. Be sure to click on the

1) root folder, then click

2) create folder, and create a

3) folder named “swatches” (all lowercase).

cms-createfolder-300x109

6. Upload your images…

cms-addimages-300x182

7. And there you have it…

layerednav-300x263