I am working on the layered navigation menu. For the attribute color, I would like to get 2 columns of labels. There is 10 differents colors so, it would be 5 labels/column.

Could anyone help me to figure this out? The menu I have to implement will look exactly like this one.Layered-nav-menu

Here is a part of "filter.phtml":

<ol class="m-filter-item-list <?php echo $this->getFilterOptions()->getIsReverse() ? 'm-reverse' : '' ?>"
<?php foreach ($this->getItems() as $_item): ?>
    <?php if (!$this->getFilterOptions()->getDisableNoResultOptions() || $_item->getCount() > 0 || $_item->getMSelected()): ?>

      <?php if ( $_item->getMShowSelected() ): ?> 
         <a href="<?php echo $_item->getRemoveUrl() ?>" title="<?php echo $this->__('Remove This Item') ?>" >
            <input type="checkbox" class="checkbox" value="lien" name="rou" checked="checked" />
            <?php $img = $_item->getValueString(); ?>
    <?php $path = Mage::getDesign()->getSkinBaseDir(); 
    if (is_file($path . DS . 'images/layer/' . $img . '.png')): ?>
    <img src="<?php echo $this->getSkinUrl('images/layer/' . $img . '.png') ?>" alt="frame shape" /> 
    <?php endif; ?>
            <?php echo $this->escapeHtml($_item->getLabel()) ?>

Here is the code of the CSS file "style.css" using the current class in <ol>:

.m-filter-item-list a {
   text-decoration: none !important ;
   text-shadow: 0px 0px 1px  #c0c0c0 ;
   color: #c0c0c0 ; 
   font-size: 0.86em;}
.m-filter-item-list li {
padding-bottom: 3px; }


  • do you mean you'd like to organize the filter in swatches?
    – Cristi
    Dec 1, 2014 at 14:36
  • I updated my original post with a picture.(a website template of the menu I have to implement) Thnaks for your help.
    – Jukemax
    Dec 2, 2014 at 11:34

1 Answer 1


you just need to style the li's properly. in filter.phtml, add this to the ol:

<ol class="filter-<?php echo trim(preg_replace('/[^a-z0-9]+/', '-', strtolower($this->getName())), '-'); ?>">

then in your css, use this class name for styling the li's (i'll assume the classname is gonna be "filter-color").

ol.filter-color li {float: left; width: 45%;}
ol.filter-color li:nth-child(odd) {clear: left;}

and if you need swatches, you can use css too adding an extra span with the class name set to the color (filter value).

  • Your solution doesn't work. I am working on a file which has been already customized. The easiest way to understand is to give you a part of the code in "filter.phtml" (I updated the post)
    – Jukemax
    Dec 3, 2014 at 1:07
  • you just need to float those li's. so you need to be able to identify the ol which needs to have floated li's. Which means, the ol needs the name of the filter variable as a class or id. i haven't tested the code above, but i've done this things a dozen times so I know it works - maybe "getName" is incorrect or the css doesn't get applied.
    – Cristi
    Dec 3, 2014 at 14:02
  • I don't get it. How do I know if getName is incorrect? This function is used in "view.phtml". I replaced the whole "ol" code line in "filter.phtml" by your code. And in the CSS, I added your code and removed the CSS lines I wrote in this post. The result on the frontend is that my previous design rules disappeared and the color section didn't change.
    – Jukemax
    Dec 3, 2014 at 15:46
  • i can't provide the exact code, you'll need to do some testing and digging yourself, but that's the general idea. try the same code, but instead of $this->getName use $this->_filter->getRequestVar()
    – Cristi
    Dec 3, 2014 at 17:10
  • Thanks, it works when I use $this->_filter->getRequestVar(). Do you know a code in CSS to include all the attributes instead of writing "ol.filter-style li, ol.filter-shape li, ...)?
    – Jukemax
    Dec 3, 2014 at 18:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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