When using the responsive design, the left navigation filters are located at the bottom of the screen in order to maximize the screen real estate. Using a simple jQuery script, you can add a button to the top of the category page so shoppers can immediately access the filters, withouts scrolling.

For more information about creating static blocks and widgets, see this article in the NRO Knowledge Base. Note that CSS and jQuery are advanced skills. If you require assistance, our professional services team can configure you site in just a few hours ($150/hour).

 

Steps to Add a Jump to Filter Button

  1. Create a static block (CMS / Static Blocks) which will include jQuery to add a button link to display the filters.
  2. Copy and paste the following code snippet into the text editor (not the WYSIWYG editor):

    <div id="filter-jump">
       <a href="#filters-block"><button class="button" title="go to filters"><span><span>go to filters</span></span></button></a>
    </div>
    <script>
    jQuery(document).ready(function($) {
        $('#filter-jump').prependTo('.category-products > .toolbar');
        $('.col-left').prepend('<a name="filters-block">&nbsp;</a>');
    });
    </script>



  3. Create a widget (CMS / Widgets), and attach the static block created above to the new widget on the Widget Options tab. On the Frontend Properties tab in the Layout Properties tab, choose to display the static block on the 'Page Bottom' of Anchored Categories, Non-Anchored Categories, and the Advanced Search Results page.


  4. Add the following to the Misc Scripts field (System / Configuration / General / Design / HTML Head > Misc Scripts), or incoroprate the styles into your CSS file:

    /* THUMBNAIL PAGE - JUMP TO FILTERS */
    @media only screen and (min-width: 1051px) {
        #filter-jump {display:none;}
    }
    @media only screen and (max-width: 1050px) {
        #filter-jump {display:none;}
    }
    @media only screen and (max-width: 768px) {
        #filter-jump {width:100%;display:block;}
        #filter-jump button {width:100%; margin:0; padding:0; }
        #filter-jump button span {display:block;width:100%; background-color:red; padding:0; margin-bottom: 15px; }
        #filter-jump button:hover span {background-color:#eee !important; color: black;}
        a.filters-block {height:0;}
    }    a.filters-block {height:0;}
    }

  5. Be sure to clear your cache if prompted (System / Cache Management).