Facets (the term "filters" is often used as synonym) in product listing pages such as category listings or search result pages are allowing shoppers to narrow these listings by different product attributes.
Nosto is automatically selecting which facets to show based on the products in the search results page or in a category page. It will only return relevant facets based on shared attributes of the most relevant products in a specific listing.
As soon as a user selects a facet value, Nosto updates the available facet options based on their current selections. This helps users avoid dead-end searches with no results and ensures that only relevant facets are displayed.
Creating facets
You can set up and configure facets for Nosto Search and Categories via the facet manager in the Admin UI. All activated facet groups will be returned by Nosto if they are relevant to a specific result set.
When creating a new facet group you need to specify the following:
Product attribute (e.g. price, brand, color, ..)
Display name (how it will appear in your shop)
Facet type (select range for price filters)
Sorting type (choose count if you want to show more relevant facet values first)
Note: Any field passed to Nosto can be used to create a facet. There are no limitations on which fields are eligible. If the field is present in the product catalog, it can be configured as a facet for filtering.
Facets order
You can also pin facets to make sure they are always shown on top. Use the drag&drop handle to change the position of pinned facet groups.
Dynamic facets
In order to improve the specificity and performance of our API, an algorithm selects the most relevant facets based on how well they reflect the current result set. The amount of returned facets per response is limited to 15 facet groups.
If you want to select some facet groups that should always be returned, you can achieve this by passing the ID of the specific facet group in the request. Please do not forget to add a * to the facet selector to ensure that other facets are returned as well.
Facets look & feel guidelines
We recommend that facets look the same way both in search and category pages. Users shouldn’t feel a difference exploring products as both search & categories help users find products, and experiences should be aligned.
Here are some best practices for creating a relevant and user-friendly frontend UI for faceted navigation:
Show counts next to facet values so users can expect how many results will be returned if they click on it. This makes them trust facets more and use them more often;
Opt for Multi-Select Options: Allow users to select multiple values within a facet to create more precise search results. This enables users to filter products by multiple colors, sizes, or brands simultaneously.
Show Selected Filters: Clearly display the user's selected filters, so they know what criteria their search results are based on. Provide an easy way to remove these filters, such as an "X" icon next to each selected filter.
Responsive Design: Ensure your faceted navigation is easily accessible and functional on all devices. Consider using an expandable filters menu on mobile devices to conserve screen space and prevent clutter.
Use Clear Visual Cues: Use icons, colors, and typography to distinguish different facet types and selections. This helps users quickly understand the available filters and their current selections.
Collapsible Facet Sections: Consider using collapsible sections to save space and minimize visual clutter for some facet types. This allows users to expand and collapse facets as needed, making navigating through the available filters easier.
Use Familiar UI Patterns: Stick to familiar UI patterns for facet controls, such as checkboxes for multi-select facets, radio buttons for single-select facets, and sliders for continuous values (e.g., price ranges). This makes it easier for users to understand how to interact with the filters.
Accessible Design: Ensure that your faceted navigation design is accessible to all users, including those with disabilities. Use proper contrast ratios for text and background colors, provide alt text for icons, and ensure keyboard navigability.
By focusing on these design and UI elements, you can create a visually appealing and easy-to-use faceted navigation system that enhances your eCommerce site's search experience and helps users quickly find the products they're looking for.
Data extractor
The Data Extractor feature enables you to convert complex or nested product data into clean, usable custom fields. These extracted fields can then be leveraged in facets, merchandising rules, or to improve search relevance.
This is especially useful when product attributes are not separated properly such as being stored in tag fields, mixed strings, or JSON arrays, which normally prevents them from being used effectively in filtering or merchandising.
Learn more about Data extractor.