Product Filters

Creating Individual Filters
Reordering filter groups or filters
 

Terminology

First things first. Product filters have two types of elements: a filter group and the filter itself.
  • - The filter group is what you probably initially think of as the filter: Colour, Size, Diameter, etc.
  • - The filter is the individual options/values that belong to a filter group. E.g. Red, or Blue, or Small, or US10.

How it works

Product Filters help website visitors to narrow down their search for a specific product based on options, tags and/or attributes such as size, colour, and category, among others.  This makes the user experience pleasant and helpful.
 
In the category page or the search page, if there are filters that are applicable to the current view, the filter panel will be shown.
image7

Clicking the checkboxes on the filter panel will update the current view/product list to exclusively display products that are qualified in the current filters selected. Note that if there are no filters applicable to the current view (e.g. if the products on a certain category don’t have options, tags or attributes), the filter panel won’t show.

Creating A Filter Group

A filter group contains multiple filters which are grouped together according to the context of the filters under it. Say if you have filters for Red, Blue and Green, these filters should be under the Colour filter group.
To create a filter group, go to Items > Product Filters in the back-end.
image6

The list of available/created filters will be shown.
image1

To create a filter, click Add Filter Group. Provide a name, select a type and additional settings and hit save.
image8

For Standard Filtering, it can be by Product Options, Product Tag or Product Attributes
 

Standard Filtering

Filter by Product Options

This allows shoppers to refine product searches based on multiple attributes like price, colour, or size. Say you have a Shirt product that has Colour and Size as options, this filter type can be used.
When this is selected, an Option Lookup will be shown. This contains all the available/created product options for the catalog. Match this filter against products with any of the following options shown by clicking the option, or by manually typing it and then pressing Enter.
image3

Filter by Product Tags

This narrows down search results based on the tags that have been added against the product. Say if you have a Sale tag for the products that are on sale, this filter type can be used.
 

Filter by Product Attributes

This refines the results based on the attributes that have been set against the product. Say if you have products with attribute Material and values Cotton, Polyester, this filter type can be used.
Again, when this is selected, an Option Lookup will be shown. This is all the available/created product attributes for the catalog. Match this filter against products with any of the following attributes shown by clicking the attribute, or by manually typing it in then pressing Enter.
image4

Filter by a Standard or Custom Product Field

This is very similar to filtering by product attribute, however, it uses actual fields from the websites product database. If every product in the website has certain specific data, we will add additional custom fields to the product database and filters can be set up to use this data in the same way it is used with product attribute data.
 

Combinations

Note: A filter group can be of multiple types and it will match products that have any of options, attributes, fields or tags that have been set up against a specific filter.
 

Filter by category

If you set the 'type' of a filter group to be 'Categories', you no longer have to specify any actual filters. The individual filters will be automatically generated based on the categories relevant to the products currently being displayed to the user. Note: You can only have 1 category filter configured for a website.
 

Creating Individual Filters

Once you have created a standard filter group (e.g. 'Colour'), you need to add filters (e.g. Red, Blue) to appear under that group. These are the options that are presented to the user with a checkbox next to them.
To create a filter, navigate into the filter group, and then click on the Add FIlter Value button.
image10

Depending on the filter type selected, respective filter value fields will be available.
For both Product Options and Product Attributes, a Field/Attribute Value Lookup section will be shown, respectively. This lists all option values/attribute values that have been created for the selected options/attributes. Add a value by clicking the option, or by manually typing it in and then pressing Enter.
image5

For Product tags, users need to type in the tag values.
image2
 

Reordering filter groups or filters

You can reorder both filter groups and filters simply by dragging and dropping their row into a new order position. This will control the order they are displayed on the front end of the website.