Layered Navigation

 

Working with Layered Navigation

The layered navigation displayed in the left column on category pages helps shoppers find the right product to meet their needs. Filter by brand, price, color, size, etc. You can define an unlimited number of attributes for each product.

What Are Attributes?

Simply put, an attribute is defined as any property of a product. This includes product sku, product title, images, description ... just about everything that describes your product!  Although this may seem a bit abstract, it’s also one of the most powerful concepts in NRO and provides an almost limitless ability to control the products.

Creating New Attributes

If you have gridded items defined in NCR Counterpoint, each grid dimension – color, size, pattern, width, etc. – automatically displays as an attribute in the layered navigation. Brands and prices also automatically appear as layered navigation filters. You can optionally hide any attributes from the layered navigation if you wish (see 1. Clean Up Your Data below).

You can also create additional attributes directly in NRO under Catalog / Attributes / Manage Attributes. View the Creating Attributes tutorial >

If you wish to utilize NCR Counterpoint fields for your item attributes and maintain all your data on the NCR Counterpoint side, you can utilize NCR Counterpoint profile fields or item attributes. Our Professional Services team can create a custom mapping file which facilitates how and where the NCR Counterpoint-driven attributes display in your storefront. Contact us for more information.

 

In plain English, please:

If you just want to understand the basics of how to get more filters in the left column on category pages, think about it this way:

Example Scenario: All my shoes are in a category named 'Shoes'. How can I add filters in the left column for Mens, Womens, and Kids?

  • Option 1 (easiest): If you simply want new/different/more sub-category groupings in the left column, in Counterpoint select Setup / Ecommerce / Categories and add new sub-categories according to your desired groupings.
    • Although you can add many levels of sub-categories, normally ~3-4 levels deep should be enough (any more than that just means it's too many clicks for a shopper to get to your products).
  • Option 2 (medium): Add more item attributes, and then flag products accordingly.  For example, you would create an attribute named Gender with options for Mens, Womens, and Kids, and then assign products to each option.
    • You can add as many attributes as you want directly through NRO: see Creating Additional Attributes for the Purpose of Layered Navigation. Quick Steps:
      • In NRO, select Catalog / Attributes / Manage Attributes and create a new attribute named gender with the following settings (other settings would be configured per your needs):
        • 'Catalog Input Type for Store Owner' = Multiple Select; use Multiple Select if a product could be assigned to more than one gender, such as a hat that could be for both Men and Women; other valid options would be Dropdown or Price
        • 'Use In Layered Navigation' = Filterable (with results)
        • 'Use In Search Results Layered Navigation' = Filterable (with results)
        • Click Manage Label/Options on the left, and enter desired values and optional sort order (i.e., position)
      • Be sure to add your new attribute to one or more attribute sets under Catalog / Attributes / Manage Attribute Sets
      • In most cases, you may need to re-index your data under System / Index Management
      • Next, select Catalog / Manage Products and flag items as Mens, Womens, Kids, etc. Tip: use the Bulk Update Attributes tools to flag many similar products at once. Where the new field displays depends on where you added it under Catalog / Attributes / Manage Attribute Sets. For example, if you added the Gender attribute to the General tab, then that's where it will be located under Catalog Manage / Products.
    • Or, if you want to maintain that data on the Counterpoint side, you would also need an Item Attribute Mapping file 
  • Option 3 (medium / may need extra professional services assistance with configuration): Once you start adding lots of data to the left column, then you may start to get a really long left column, and may desire some additional cleanup efforts to make it look better. That’s when you want to explore Improved Layered Navigation add-on, which helps you auto-collapse less important filters, or set display limits (like just show the first 10 things on the list with a link to show more), etc. You can even add icons to the left nav for Mens, Womens, and Kids, instead using traditional text labels.
  • Option 4 (advanced): If you're sending product feeds to Google Shopping or Bing Shopping, etc., then you are already using nro_custom_gender for Gender. If desired, you can optionally configure this gender information to display in the left column of your category pages by setting 'Use In Layered Navigation' = Filterable (with results)

 

5 Ways to Balance Long Left Columns

The more attributes you have, the longer your page will be. Here are a few tips to balance a long left column:

1. Clean up your data

Combine similar attributes when possible and remove alternate spellings and duplicates. Edit the attribute settings under Catalog / Attributes / Manage Attributes in the NRO Admin Panel, and then select Manage Labels / Options to edit the individual attributes.

For attributes based on grid cells defined in NCR Counterpoint — for example to combine colors named black, blk, and JETBLACK with Black – contact your NCR Counterpoint Partner for assistance with SQL scripts to help clean up your data.

For any section you don't want to display, you can hide it from the layered navigation. For example, to remove Brands from the layered navigation on category pages, select Catalog / Attributes / Manage Attributes and select the Brand attribute. On the Frontend Properties tab, change Use In Layered Navigation and Use In Search Results Layered Navigation fields to No.

2. Increase the number of thumbnail products per page

By increasing or decreasing the number of product thumbnails on category pages, you can better balance the lengths of the left and right columns. Select System / Configuration / Catalog / Catalog > Frontend in the NRO Admin Panel to change the number of products displayed per page – change the grid view, list view, or both depending on your list mode setting.

3. Add a content block at the top of the category page

Add a content block to the top of your category page to increase the length of the right column. First, create a new content block under CMS / Static Blocks, then assign the static block to the top of the appropriate category page under Catalog / Manage Categories. Select a category and on the Display Settings tab, change the display mode to Static block and products and select a static block to display above the product thumbnails.

4. Modify your CSS to add scrollbars to the attribute sections

By specifying a max-height property for the attribute sections on the left, you can easily shorten long lists of attributes by incorporating scrollbars. You can start with the sample code below and edit to suit your needs, then incorporate into your existing CSS file:

/*  Left Column Scrollbars */
DL#narrow-by-list { background-color: transparent; }
DL#narrow-by-list ol { background-color: transparent; max-height: 250px; overflow: auto; border: 1px solid #ccc; border-top: 0px; }
DL#narrow-by-list ol li { background-color: transparent; }
.block-layered-nav dt { border: 1px solid #ccc; border-bottom: 0px; background-color: #e7e7e7; padding: 2px 5px; margin: 0px; font-size: 11px; text-transform: uppercase; }
.block .block-content li { border-color: #FFF; }
.block .block-content .actions { margin-bottom: 10px; }

Not sure how to work with CSS? Our Professional Services team can assist. Contact us for more information.

 

 

5. Purchase Improved Layered Navigation for NRO

Improved Layered Navigation for NRO adds a number of powerful features to help you control the way your data displays in the left column. For example, you can:

  • Replace color names with image swatches, or incorporate other kinds of icons, with or without text labels
  • Display one or more attribute sections as dropdowns instead of a list
  • Replace the 'shop by price' list with a price slider – also supports other numeric sliders
  • Add limits to long lists – for example, limit the list of sizes to only display the first 10 sizes with a link to display more
  • Auto-collapse attribute sections