12

How do you convert the standard layered navigation to use checkboxes or multiple select inputs for attributes of type dropdown or multiselect?

For example if a user selects blue and red for the color attribute, the layered navigation shows all items matching either blue OR red.

See example in toolbar on this page:

  • How did you go with this one? What did you decide to use? – jharrison.au Mar 25 '13 at 0:07
  • @jharrison.au.. Well i have changed select drop down into COLOR SWITCHER and SIZE. Its not multiple yet. – Alizain Prasla Mar 25 '13 at 5:54
10

There are many extensions out there that will give you this functionality (search for "enhanced layered navigation"). I have tried all of the extensions listed below but my favourite is by Ecommerce Team - I like it for its minimalistic nature, it doesn't try to do too much but is very powerful and works well out of the box. It also has support for color swatches like you described.

Some others in no particular order:

  1. http://amasty.com/improved-navigation.html
  2. http://www.aitoc.com/en/magentomods_layered_navigation_pro.html
  3. http://www.manadev.com/seo-layered-navigation-plus
  4. http://www.gomage.com/extensions/gomage-advanced-navigation.html

Be aware these may cause conflicts with other third party modules.


If you are mainly looking to do this with color swatches I suggest you check out this extension by Chad Morgan.


Here's an article by Inchoo about keeping the unused filters visible.


If you're looking to code this yourself then I think the answer to your question might be too long for this forum. I don't have a link to a blog post/tutorial teaching you how to do this but I suggest starting with extending the layered navigation blocks.

  • 6
    I've used the Amasty module and would recommend checking it out. The Aitoc module, however, I would not touch with a 10' pole... or any of their modules for that matter. – davidalger Apr 22 '13 at 19:13
  • The Amasty module will not work with any custom attributes which use a source backed by a custom eav model. This was an issue for us since our attributes are populated via external api. – greatwitenorth Jul 6 '17 at 18:11
8

If you are only interested in converting default layered navigation to check boxes the solution is very easy and placing it here.

Edit the code of app/design/frontend/ourpackage/ourtheme/template/catalog/layer/filter.phtml file as follows:

<ol>
<?php foreach ($this->getItems() as $_item): ?>
    <li>
        <?php if ($_item->getCount() > 0): ?>
            <form>
                <span class="check-box">
                    <input type="checkbox" name="vehicle" onclick='window.location.assign("<?php echo $this->urlEscape($_item->getUrl()) ?>")'/>
                </span>
                <a href="<?php echo $this->urlEscape($_item->getUrl()) ?>">
                    <?php echo $_item->getLabel() ?>
                    <?php if ($this->shouldDisplayProductCount()): ?>
                    <span class="count">(<?php echo $_item->getCount() ?>)</span>
                    <?php endif; ?>
                </a>
            </form>
        <?php else: ?>
            <form>
                <span class="check-box">
                    <input type="checkbox" name="vehicle" onclick='window.location.assign("<?php echo $this->urlEscape($_item->getUrl()) ?>")'/>
                </span>
                <span>
                    <?php echo $_item->getLabel(); ?>
                    <?php if ($this->shouldDisplayProductCount()): ?>
                        <span class="count">(<?php echo $_item->getCount() ?>)</span>
                    <?php endif; ?>
                </span>
            </form>
        <?php endif; ?>
    </li>
<?php endforeach ?>
</ol>

The solution is improved version of this. So the credit goes to this person as well.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.