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
    Magento Color Attribute Labels for color swatches
  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
    Magento Color Attribute Labels for color swatches
  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
    magento cms upload images
  5. Be sure to click on the 1)root folder, then click 2)create folder, and create a 3)folder named “swatches” (all lowercase).
    Magento CMS add media folder
  6. Upload your images…
    Magento CMS Add Color Swatches
  7. And there you have it…
    Magento layered navigation color swatches