[contact-form-7 id="24078" title="Feedback EN"]

Featured templates

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:

    Magento. How to use color swatches in layered navigation_1

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

    Magento. How to use color swatches in layered navigation_2

  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:

    Magento. How to use color swatches in layered navigation_3

  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:

    Magento. How to use color swatches in layered navigation_4

  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:

    Magento. How to use color swatches in layered navigation_5

  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:

    Magento. How to use color swatches in layered navigation_6

  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