Adding Color Swatches to Magento Layered Navigation

I recently ran into an issue where I wanted to have color swatches in the Magento layered navigation, instead of the attribute color name. By default, the layered navigation displays the name of your attribute. In this case, the color of my store’s shirts. So, how do we make it so that it displays a color swatch instead?

First, I need to note that I was using the ColorSwatch & Zoom plugin for my Magento store. Well worth the cost. You also have to have layered navigation set to “Yes” per the category in the Magento backend.

Filterable layered navigation option in the backend

This is the layered navigation option in Magento’s backend admin panel for each category.

Once you have your color attributes displaying in the sidebar, its time to turn them into color swatches.

Color Swatch plugin in the backend

Color swatch plugin options in the backend of Magento.

I tried to do this by calling the gif I uploaded in the Colorswatch plugin, using PHP in the filter.phtml file, but decided to go a different route instead, by using CSS to style the swatch backgrounds to match our attribute images we uploaded in the backend. It works great, but had the drawback of having to edit the CSS background-color each time you add a new attribute.

The process went as follows:

Edit the Layered Navigation template

The file you will want to edit is filter.phtml, which will be located in app/design/frontend/default/YOUR_THEME_NAME/template/catalog/layer/filter.phtml
If your theme does not have this file, you will need to copy it from the core location, into your theme folder. The core file (never edit core files) is located in app/design/frontend/base/default/template/catalog/layer/filter.phtml

Again, don’t ever edit the core Magento files. You should copy that file into your theme directory (see above for location), and it will override your core file. This way, when Magento gets upgraded, your edits wont be overwritten.

Edit filter.phtml

In order to be able to target each of our color attribute list item’s that are displayed in layered navigation, we will have to set an ID. This id will be unique to each list item for our colors. We will them be able to set the styling for each of our color attributes. Heres the code from my filter.phtml file.

<ol>
<?php foreach ($this->getItems() as $_item): ?>
    <li>
        <?php if ($_item->getCount() > 0): ?>
			<a href="<?php echo $this->urlEscape($_item->getUrl()) ?>" id="a-<?php echo $_item->getValueString() ?>"><?php echo $_item->getLabel() ?></a>
        <?php else: echo $_item->getLabel() ?>
        <?php endif; ?>
        <?php if ($this->shouldDisplayProductCount()): ?>
			(<?php echo $_item->getCount() ?>)
        <?php endif; ?>
    </li>
<?php endforeach ?>
</ol>

Test the code

On the frontend, if you view the source, you will see that each list item anchor now has a class ID. This ID is the unique ID that Magento gave each attribute we entered in the backend.

Now, we just need to style these list items with some sweet ol’ CSS.

Style the layered navigation

Code for layered navigation color swatches in Firebug

The final source code for layered navigation color swatches in Firebug.

I need to mention that I disabled the attribute count, so it isn’t showing the number next to the attribute on the frontend. If you keep your item count showing, extra CSS will be needed.

You will notice in my CSS below I added “text-indent: -9999px;”. This is to hide the attribute text (white, black, green, etc), since we only want to show the swatch.

Now, we will target each of our attributes by setting a width and height, floating it left, and then targeting each class ID of our list item ahref. Heres my CSS from my style.css (skin/frontend/default/YOUR_THEME_NAME/css/styles.css) file in my theme…

.block-layered-nav dd.color ol li a{
text-decoration:none;
color:#333;
border:1px solid #C3C3C3;
height: 25px;
width:25px;
border-radius:2px;
float:left;
text-indent: -9999px;
margin-right: 6px;
margin-bottom: 10px;
}

/* Black */
.block-layered-nav dd.color ol li #a-100{
background-color: #000;
}

/* Brown */
.block-layered-nav dd.color ol li #a-101{
background-color: #6B3A20;
}

/* White and Red */
.block-layered-nav dd.color ol li #a-102{
background: url("/media/colorswatch/image/image_base/144/127/30x30/white_red.gif") no-repeat scroll 0 -5px transparent;
}

Final Product

Frontend color swatch in the layered navigation

Frontend color swatch in the layered navigation.

You will want to tweak the CSS to match your colors. You will also see that I added a gif image by using the link to the same image I uploaded in the color swatch attribute plugin in the backend of Magento.

Update

One of the guys at ExtensionMall, who makes this Magento extension, was gracious enough to email me with their color swatch article on how to create color swatches in the layered navigation sidebar. Thanks Milan!

Make it better?

Did I leave something out, or have you found a way to improve my code solution? Comment below and let me know. I’m interested to see if anyone else uses this to display color swatches as well.

3 Comments

  1. Vevek 01.26.15

    Hi,

    The color swatch by default shows vertically. How do I make it display horizontally instead of vertically. Please see screenshot at http://s28.postimg.org/54duixti5/colorswatches.png

    Regards,
    Vevek.

  2. Hello,
    a new version of Color Swatch module – version 5.0, comes with integrated module that will add swatches to layered navigation. Color Swatch module now allow you to display swatches on product details page, catalog pages, in search page results and layered navigation. Check our demo site: http://demo.extensionsmall.com/

    Cheers,
    Milan

  3. Branson Werner 03.31.16

    Hey Vevek. You will need to edit that in CSS. I typically use Google Chrome’s inspect element (right click on page, and select the Inspect option). This allows you to make CSS changes before you apply them in your sites CSS file. Try editing the color block element and adding the CSS… display: inline-block; float: left;


Leave a Response

* Name, Email, Comment are Required