How to Add Swatches to your Layered Navigation

If you are using a filter in your layered navigation that is of a visual (e.g. Colour, Pattern, etc.) you may want to display a swatch in the layered navigation instead of just text. They can be very effective in grabbing a customers attention, by being at once both informative and attention grabbing.


How to Enable Swatches to Appear in Layered Navigation

  1. Navigate to System > Configuration > Configurable Swatches (under Catalog), and expand the General Settings.
  2. Within the General Settings set the following options:
    • Enabled: Set to Yes to enable configurable swatches.
    • Products Attributes to Show as Swatches in Product Detail: Select all the attributes from the list that you would like to use as swatches - all attributes which have been configured to be used as swatches will appear here.
    • Product Attribute to Use for Swatches in Product Listing: Select from the dropdown, the attribute that you would like to use in the product listing (space is limited here).

3. In the Swatch Dimensions on Product Detail Page, Swatch Dimensions in Product Listing & Swatch Dimensions in Layered Navigation enter the dimensions that you would like to see the swatches appear as in each of the listed places.

4. At this stage, you need to ensure that your attribute has been configured to be used in layered navigation. Within the attribute itself, the Use In Layered Navigation option needs to be set to Filterable (with results).


How to Name Swatch Image to be used in Layered Navigation

  1. The first step in the process is to properly name your swatches. Naming swatch images for layered navigation differs slightly from naming swatch images for product listings (configurable products, etc). Swatch used for layered navigation need to appear as attributeoption.png (lower case), see example below:

For the Colour attribute, if you wanted to add a swatch for the Blue attribute option, you would name the swatch image blue.png


How to Upload Swatch Images

  1. To upload swatch images, navigate to CMS > Pages > Manage Content.
  2. At this stage, you can click into any of the pages from the Manage Pages grid. 
  3. From within any of the CMS pages, you now need to launch the WYSIWYG by navigating into the Contents tab of the page and using the Show / Hide Editor button to ensure that the editor is showing (by default it will not show when page is first opened).
  4. Once the WYSIWYG editor is opened, find the 'Insert / Edit Image' button (is the small icon with a tree). 
  5. From within the Insert / Edit Image popup, you want to then click Browse button (to the right of the Image URL field.
  6. You should then be directed to a further Media Storage popup. From within the Media Storage popup, you then want to use the Browse Files to find your images, and the Upload Files button to upload them to the Media Storage

Note: It can be a good housekeeping practice to keep your swatch images stored in the separate folder from the main Storage Root folder. To add a new folder, click Create Folder... and giving the folder a descriptive name such as 'swatches'.

7. Once all files are uploaded, and all other configurations have been made you may find you are still not seeing your swatch images on the frontend. The final step here will be to clear any invalid cache via the Cache Management page (System > Cache Management) paying close attention to Flush Swatch Images Cache. Once all cache is flushed and a full refresh has been done on the frontend (clicking F5), you should then see your swatches appear in layered navigation.



Have more questions? Submit a request


Please sign in to leave a comment.