Really incredible support from the team at MANAdev. I was having some issues getting the Layered Navigation SEO Plus set up as my theme was causing a ... Read more

Jan 10, 2017 Chanette Kennedy

Certified Magento Enterprise developer Certified Magento developer Certified Magento theme developer Certified Magento specialist

Manadev is certified extension and theme
developer for Magento

Global Configuration

Global Configuration (MANAdev -> Global Configuration -> Layered Navigation)

Global Configuration

MANAdev -> Global Configuration -> Layered Navigation

In order to access global configuration, go to menu MANAdev -> Global Configuration -> Layered Navigation in Magento Admin Panel.

SEO Layered Navigation Global Configuration

Display Settings

Section defines how to show layered navigation in general. First four parameters sets up default templates for all filter types.

Later on, every specific filter can be customized in MANAdev -> Layered Navigation menu.

  • Show Category Filter As - default template for category filter. Below possible choices and preview are listed:

    • Text (One Item Can Be Selected At A Time) - list of subcategories is shown. Only one subcategory can be chosen at a time like only New Arrivals.

      Category Filter Display As Text

    • Parents and Children (One Item Can Be Selected At A Time) - categories, current category and direct child categories of current category are shown. Only one category or it's subcategory can be chosen at a time.

      Category Filter Display As Parents and Children

    • Tree - all categories and subcategories are shown as a tree.

      Category Filter Display As Tree

    • Tree (2nd level and down) - subcategories are shown as a tree:

      Category Filter Display As Two Level Tree

    • Radio Buttons - subcategories are shown as list of radio button options.

      Category Filter Display As Radio Buttons

    • Drop Down - subcategories are shown as drop down list.

      Category Filter Display As Drop Down

  • Show Price Filter As - default template for system attribute price filter. Below possible choices and preview are listed:

    • Text (Multiple Select Enabled) - price ranges will be shown as a list. Few price ranges can be chosen at a time.

      Price Filter Display As Text

    • Text (One Item Can Be Selected At A Time) - price ranges will be shown as a list. Only one range can be chosen at a time.

      Price Filter Display As Text

    • Checkboxes (Form Elements) - price range list with checkboxes is shown.

      Price Filter Display As Checkboxes (Form Elements)

    • Checkboxes (Images) - price range list with checkboxes is shown. Checkbox images will look the same way in different browsers.

      Price Filter Display As Checkboxes (Images)

    • Slider - price range can be modified by dragging thumbs.

      Price Filter Display As Slider

    • Range Inputs - min and max range values are edited manually.

      Price Filter Display As Range Inputs

    • Radio Buttons - price ranges are shown as list of radio button options.

      Price Filter Display As Radio Buttons

    • Drop Down - price ranges are shown as drop down list:

      Price Filter Display As Drop Down

  • Show Filters of Type 'Price' As- default template for all filters, based on price type attribute.

    • Text (Multiple Select Enabled) - price ranges will be shown as a list. Few price ranges can be chosen at a time.

      Price Type Filter Display As Text

    • Text (One Item Can Be Selected At A Time) - price ranges will be shown as a list. Only one range can be chosen at a time.

      Price Type Filter Display As Text

    • Checkboxes (Form Elements) - price range list with checkboxes is shown.

      Price Type Filter Display As Checkboxes (Form Elements)

    • Checkboxes (Images) - price range list with checkboxes is shown. Checkbox images will look the same way in different browsers.

      Price Type Filter Display As Checkboxes (Images)

    • Slider - range can be modified by dragging thumbs.

      Price Type Filter Display As Slider

    • Range Inputs - min and max range values are edited manually.

      Price Type Filter Display As Range Inputs

    • Min/Max Slider range can be modified by dragging thumbs.

      Price Filter Display As Min/Max Slider

    • Radio Buttons - range can be modified by dragging thumbs.

      Price Type Filter Display As Radio Buttons

    • Drop Down - range can be modified by dragging thumbs.

      Price Type Filter Display As Drop Down

  • Show All Other Filters As- default template for all filters, based on drop down or multiple select type filters.

    • Text (Multiple Select Enabled) - few options of the same filter can be chosen like Skirts and Dresses.

      Filter Display As Text

    • Text (One Item Can Be Selected At A Time) - only one filter option can be chosen at a time like only Skirts or only Dresses.

      Filter Display As Text

    • Checkboxes (Form Elements) - list with checkboxes is shown.

      Other Filter Display As Checkboxes (Form Elements)

    • Checkboxes (Images) - list with checkboxes is shown. Checkbox images will look the same way in different browsers.

      Other Filter Display As Checkboxes (Images)

    • Colors and Images (Horizontal) will show all swatches, placed horizontally:

      Filter Display As Colors and Images (Horizontal)

    • Colors and Images (Vertical) will place all color or images in a vertical order:

      Filter Display As Colors and Images (Vertical)

    • Colors and Images (with Labels) will show all swatches in a vertical line with names:

      Filter Display As Colors and Images (with Labels)

    • Colors and Images with Labels (One Item Can Be Selected At A Time)) ill show all colors in a vertical line with color names, but only one color can be selected at at time:

      Filter Display As Colors and Images (with Labels)

    • Slider - range can be modified by dragging thumbs.

      Other Filter Display As Slider

    • Radio Buttons - range can be modified by dragging thumbs.

      Other Filter Display As Radio Buttons

    • Drop Down - range can be modified by dragging thumbs.

      Other Filter Display As Drop Down

  • Sort Items By - default template for all drop down or multiple select type filters. Not applicable to category or price filters.

    • Position - filter options will be sorted by position.
    • Position (selected at the top) - same as previous, but currently selected options will be placed on top of the list.
    • Name - filter options will be ordered by translated name of options.
    • Name (selected at the top) - same as previous, but currently selected options will be placed on top of the list.
    • Count - filter options with bigger product count will be placed higher.
    • Count (selected at the top) - same as previous, but currently selected options will be placed on top of the list.
  • Show Product Count - global setting for showing or hiding product count near all filter options. Not applicable to sliders.

  • Filterable (no results) Links Are Not Clickable. If filter is set as Filterable (no results), it will list all options, even no products are available now for specific option. This parameter let to disable clicking on option, if there are no products suitable for this option.

    For example, field Use In Layered Navigation is set to Filterable (no results) for filter "Type":

    Attribute Filterable (no results)

    In layered navigation, options without available products will be non clickable, if this parameter is set to Yes:

    Filterable (no results) Links Are Not Clickable

  • Hide CMS Page Content When Filters Are Applied

    Layered Navigation can be added to any CMS page, including Home Page. In detail it is described in How to section: How to put Layered Navigation on Home Page (or Any CMS Page).

    Here is an example of CMS page with layered navigation, content and product list.

    CMS Page With Layered Navigation

    Sometimes it is not reasonable to show CMS page content, if customer start to search products by applying one or more filters. The parameter let you to hide page content block, if any filter option is selected.

    This parameter is global for all CMS pages. Therefore it is more suitable for small stores.

  • Hide CMS Page Product List When No Filters Are Applied. In some cases, when product list is huge, it is reasonable to hide products in CMS page, if no any filter applied.

    This parameter is global for all CMS pages. Therefore it is more suitable for small stores.

    If both parameters are set to Yes, CMS page layout will be changed dynamically:

    • If no any filter is applied, only layered navigation and CMS page content will be shown. Product list will be hidden.
    • If one or more filters are applied, layered navigation and filtered product list will be shown. CMS page content will be hidden.

    For specific CMS page both settings can be override by changing layout manually. In detail it is described in How to section: How To Customize Visibility Of Content Or Product List For Specific CMS Page.

  • Hide Filters With Single Visible Item. To have more compact layered navigation, it is possible to hide filters with one visible item, if parameter is set to Yes:

    Hide Filters With Single Visible Item

  • Item Limit - global parameter for showing filters with large number of items. Set up initial limit of visible item count. In case filter has more than specified number of items, only first items are displayed, as well as 'Show More' and 'Show Less' actions are available.

  • Reserve Additional Space for Not Visible Selected Items - global parameter for showing filters with large number of items. If set to Yes, will add additional space when user select more items than it set in Item limit parameter. Works for all methods of showing long lists. Best usage is when list is sorted with selected at the top options.

    • Yes will show all selected items in spite Item limit parameter value. For example, if Item limit equal to 4 and user has selected 6 items, all 6 selected items will be visible:

      Reserve Additional Space for Not Visible Selected Items -Yes

    • No will always limit visible item count to Item Limit parameter value in spite how many items are selected. For example, if Item limit equal to 4 and user has selected 6 items, only 4 selected items will be visible:

      Reserve Additional Space for Not Visible Selected Items -No

  • Expand/Collapse Time in Milliseconds - global parameter for showing filters with large number of items. Set up 'Show More' and 'Show Less' action duration in milliseconds. 'Preload All Items' parameter should be enabled.

  • Method of Showing All Items - global parameter for showing filters with large number of items. In case filter has more items, than number, set up in Item Limit parameter, only first items are displayed initially. There are several possibilities to show all items.

    • 'Show More' and 'Show Less' actions - 'Show More' link is visible initially. After Show More is pressed, full list is shown and 'Show Less' action appears:

    Filter Options With 'Show More'

    Filter Options With 'Show Less'

    • Scroll bar - all items can be accessed by manipulating the scrollbar:

    Filter Options With Scroll bar

    • 'Show More' popup - After Show More is pressed, full list is shown in separate popup window

    Filter Options With 'Show More' Popup

Advanced Display Settings

There are 2 different ways for showing Layered Navigation.

One is to use standard template, which comes together with the theme. It is stored in catalog/layer/view.phtml.

Another is extended with advanced features and located in manapro/filteradvanced/view.phtml. Depending on your design, this file may need to be adapted to your theme.

  • Enable Advanced Display Features parameter let to use a set of advanced features on store view.
  • Show 'Clear' Action. If set to Yes, 'Clear' action appears near the name of applied filter.

Show 'Clear' Action'

  • Group Filters By. Obsolete feature which let to group filter by attribute groups. If set to Attribute groups, filters will be grouped in the same way as attributes are grouped.

    • Don't group filters

    Don't group filters

    • Attribute groups

    Filter Options With 'Show Less'

  • Expand/Collapse Groups. This parameter controls the behavior of filter groups. It makes sense to use it only if Group Filters By is set to Attribute groups.

    • Expanded, not collapsible

    Expanded, not collapsible

    • Collapsible, initially collapsed

    Collapsible, initially collapsed

    • Collapsible, initially expanded

    Collapsible, initially expanded

  • Expand/Collapse/Dropdown Filters - global setting for showing filters. Could be modified for every specific filter.

    • Expanded, not collapsible

    Expanded, not collapsible

    • Collapsible, initially collapsed

    Collapsible, initially collapsed

    • Collapsible, initially expanded

    Collapsible, initially expanded

    • Dropdown

    Dropdown

    • Help Hint Popup Width - global parameter setting the width in pixels of all filter help hints. Help hints are explanations for the filter and are set on filter level. In the example below for Size filter Help Tooltip is provided.

    Help Hint Popup Width

Filter Positioning

This section describes the place and position of Layered Navigation filters.

  • Show Filters - default filter position on the page. In general, Layered Navigation could be placed on the left, right column or above product list. Several or even all options can be selected at at time. To select several options, keep Ctrl key pressed and click on the desired option. For each filter, positioning could be set individually.

    • In Left Column - Layered Navigation filters are shown in the left column
    • In Right Column - Layered Navigation filters are shown in the right column
    • Above Product List - Layered Navigation filters are shown above product list.
  • Show Applied Filters in Left Column. If some filer options are selected by the customers, they can be displayed in Currently Shopping by section. This parameter let to show or hide this section on the left column.

    Show Applied Filters in Left Column

    • No - applied filters will not appear in the left column
    • Yes, Show All Filters Applied On Whole Page - applied filters will appear in the left column.
    • Yes, But Only Filters Applied In This Block - obsolete parameter.
  • Show Applied Filters in Right Column. This parameter let to show or hide applied filters on the right column.

    • No - applied filters will not appear in the right column
    • Yes, Show All Filters Applied On Whole Page - applied filters will appear in the right column.
    • Yes, But Only Filters Applied In This Block - obsolete parameter.
  • Show Applied Filters Above Products. This parameter let to show or hide applied filters in the Layered Navigation block above the product list.

    • No - applied filters will not appear above the product list
    • Yes, Show All Filters Applied On Whole Page - applied filters will appear above the product list.
    • Yes, But Only Filters Applied In This Block- obsolete parameter.
  • Categories Block Position. Applicable only to category pages. Let to show sub category list in separate block.

    Categories Block

    • Hide - do not show categories block. Instead of it, more powerful category filter can be used.
    • In Left Column - show categories block in left column.
    • In Right Column - show categories block in right column.

    When categories block is shown in left or right column, it is recommended to disable category filter. In order to do it, go to menu MANAdev -> Layered Navigation in Magento Admin Panel, find category filter and select No for parameters In Category and In search:

    How To Switch Off Category Filter

  • Show 'Above Products' Filters As parameter defines how layered navigation above product list should looks like.

    • Defined in Current Theme - reserved value

    • Horizontally Laid Filters - filters are placed one by one horizontally.

      Horizontally Laid Filters

    • Drop Down Menu - filters are collapsed to drop down menu

      Drop Down Menu

  • Show 'Shop By' Text - to show or hide text Shop By. Applicable Only to Layered Navigation 'Above Products'. Particularly important for one column layout.

  • Show 'Currently Shopping By' Text - to show or hide text Currently Shopping By. Applicable Only to Layered Navigation 'Above Products'
  • When CMS Static Block Is Shown, Position Top Layered Navigation . Parameter sets up layered navigation position relative to CMS static block. Applicable to category pages only, if category Display Mode parameter is set to Static block and products' andCMS Block` is selected.

    • Before static block - layered navigation positioned before CMS static block in category page.

      Layered Navigation Positioned Before CMS Static Block

    • After static block - layered navigation positioned after CMS static block in category page.

      Layered Navigation Positioned After CMS Static Block

Mobile Layered Navigation

This section contains settings affecting layered navigation view and behavior on mobile devices.

In general, with today's responsive theme popularity pages on mobile devices look and feel differently from their desktop counterparts, some blocks are moved to new positions, some might be hidden, some new blocks might be shown, design is changed in order to be more comfortable to be used on narrow touch screens, like:

  • Two or three column page layout is transformed to one column page layout.
  • Menu, search, account and cart blocks collapse to look like buttons.
  • Product filters are shown just above products.

One of possible transformations from normal to mobile design is presented below.

Page with layered navigation on wide screen:

Page With Layered Navigation

The same page on mobile device:

Page With Layered Navigation On Mobile Device

In SEO Layered Navigation Plus there is a feature which allows transforming layered navigation into mobile-friendly filters above products. To enable this feature:

  • set Hide If Body Width Is More Or Equal To to maximum number of pixels on mobile devices, 751 is a good starting value.
  • set Left and Right Column Filters to Move to mobile layered navigation.

Mobile Layered Navigation settings:

  • Hide If Body Width Is More Or Equal To. If body width is more or equal this number of pixels, mobile layered navigation block will be hided. Leave empty to disable mobile layout feature. Note that mobile layout may require theme-related CSS changes.

  • Left and Right Column Filters. Into the mobile layered navigation block all visible filters from left and right columns can be added.

    • Leave in columns. Left or Right filters are shown in separate blocks and not included into Mobile Layered Navigation

      Leave In Columns

    • Move to mobile layered navigation. Left or Right filters are included into Mobile Layered Navigation and not shown separately

      Move To Mobile Layered Navigation

    • Copy to mobile layered navigation. Left or Right filters are shown in separate blocks and included into Mobile Layered Navigation

      Copy To Mobile Layered Navigation

  • Behavior Every filter block can be:

    • Initially collapsed, expanded manually
    • Initially expanded, collapsed manually
    • Accordion: one filter expanded at at time
  • Whole Block Is. Mobile Layered Navigation block can be

    • Initially collapsed
    • Initially expanded
  • Effect Duration. Expand/Collapse effect duration in milliseconds

  • Slider Style. Slider elements can be adjusted for touch screens:

    • Same as desktop
    • Hide slider, leave only input fields/labels

'Above Products' Filters As Drop Down Menu Options

If 'Above Products' Layered Navigation block is set as drop down menu, it is possible to set the min and max width of one drop down block:

'Above Products' Drop Down Filter Width

  • Min Width. Value in pixels (only number). Applied to a part with options which drops down
  • Max Width. Value in pixels (only number). Applied to a part with options which drops down.
  • Show Sliders - the way of showing slider filters in 'Above Products' drop down:

    • In Drop Down

      Show Sliders In Drop Down

    • In Menu Line, Near Filter Name

      Show Sliders In Drop Down

'Above Products' Filters As Horizontally Laid Filter Options

If 'Above Products' Layered Navigation block is set as 'Horizontally Laid Filters', it is possible to configure the way of showing filters for different content column width. It is especially actual for responsive design themes. Filters can be arranged in two, three, four and five elements in one row. Five column layout is used by default.

'Above Products' As Horizontally Laid Filters

  • Minimum Filter Height - minimal height for every filter in horizontally laid layered navigation. Value in pixels (only number). Use it if your filters will wrap into two or more rows, so the second and other rows flow nicely. Leave blank if filters always fit into one row.
  • Two Columns Mode Maximum Width. When horizontal layered navigation is wider than specified number of pixels, this mode is not used. Leave empty to disable this mode. If none of width modes is used, five column layout is used.
  • Three Columns Mode Maximum Width. When horizontal layered navigation is wider than specified number of pixels, this mode is not used. Leave empty to disable this mode. If none of width modes is used, five column layout is used.
  • Four Columns Mode Maximum Width. When horizontal layered navigation is wider than specified number of pixels, this mode is not used. Leave empty to disable this mode. If none of width modes is used, five column layout is used.

Search Engine Optimization

A lot of information about SEO strategy and it's implementation can be found here: SEO - Search Engine Optimization Settings.

In this section NOINDEX, NOFOLLOW or FOLLOW instruction rules for web robots can be set in order to give priority and highest rank to most valuable pages of the store.

  • Search Engines Do Not Index Any of These Pages. Let to limit depth of indexing by adding NOINDEX, NOFOLLOW into robots meta tag

    • Any filter applied
    • >= 2 options in the any filter applied
    • >= 3 options in the any filter applied
    • >= 2 filters applied
    • >= 3 filters applied
    • >= 2 options in the same filter applied
    • >= 3 options in the same filter applied
    • Slider filter applied
    • Second and further pages
  • Search Engines Do Follow Links on Any of These Non Indexed Pages. Let robot to gather links from non-indexed pages by changing NOFOLLOW to FOLLOW in robots meta tag

    • Any filter applied
    • >= 2 options in the any filter applied
    • >= 3 options in the any filter applied
    • >= 2 filters applied
    • >= 3 filters applied
    • >= 2 options in the same filter applied
    • >= 3 options in the same filter applied
    • Slider filter applied
    • Second and further pages

Session Settings

Features, which let to store applied filters and apply, if possible, on other pages.

For example, if size filter is marked as Globally Applied Filter and Remember Applied Category Filters is set to Yes, once customer had applied size filter on one category, he will found it set with the same value in another category page.

  • Remember Applied Category Filters. If set, system remembers filters applied to each category so when customer navigates to a category to which he/she had applied filters earlier, those filtered are still applied
  • Remember Applied Search Filters. If set, system remembers filters applied on search page so when customer uses search, those filtered are still applied.
  • Remember Applied CMS Page Filters. If set, system remembers filters applied to each CMS page containing layered navigation, so when customer navigates to a CMS page to which he/she had applied filters earlier, those filtered are still applied.
  • Globally Applied Filters. One or more filter codes separated by comma (','). If not empty, specified filters are remembered globally across different categories, CMS pages and search.

Colors and Images

There are two different sections in layered navigation, that can be configured: Picker and State. Picker is a palette of all possible colors or options, while State contains information about selected elements:

Colors Picker Sections)

Default size and border radius for all color swatches can be set.

  • Width (Picker) - width in pixels of color swatch.
  • Height (Picker) - height in pixels of color swatch.
  • Border Radius (Picker) - border radius in pixels of color swatch.
  • Width (State) - width in pixels of state element
  • Height (State) - height in pixels of state element
  • Border Radius (State) - border radius in pixels of state element

Show More Popup

A number of parameters can define visualization of 'Show More' popup:

Filter Options With 'Show More' Popup

  • Number of Rows in Popup. If elements in popup are arranged into more rows, scroll bar appears.
  • Number of Columns in Popup- how many columns of options.
  • Show 'Please Wait' - obsolete setting.
  • Show Network Errors in Frontend - obsolete setting.

Category Tree

If category is show as a tree - Show Category Filter As is set to `Tree', it is possible to set how it should be visible on page load.

  • Expand All Tree Items on Initial Page Load. Tree remembers collapsed/expanded state of each category, so on subsequent page loads remembered collapsed/expanded state is restored and not touched items are processed as specified here.

    • Yes

      Yes

    • No

      No

  • Expand Currently Applied Item on Initial Page Load

    • Yes

      Expand Currently Applied Item on Initial Page Load

    • No -currently applied item is expanded/collapsed based on the above setting

Radio Buttons

  • Show 'All' option - It is possible to show or hide 'All' option:

    Other Filter Display As Radio Buttons

Sliders

  • Style - style of all sliders can be set

    • Style 1

      Style 1

    • Style 2

      Style 2

    • Style 3

      Style 3

    • Style 4

      Style 4

Other Settings

  • Adjust Configurable Product Price Filtering. If enabled, additional price tags of configurable product options are additionally checked.
  • SOLR Maximum Number of Counted Options. Leave empty to use SOLR server default setting (usually equals 100).

We Accept: PayPal Visa MasterCard American Express Discover