To display the filter on the catalog page, you must first create the attributes by which the filtering will be performed in the product template and fill in the values of this attribute for the products.
Please note: to set up filters, you need to create attributes with the type Number, Selection from list or Yes/No.
Selecting filters on the catalog page
To set up filters on the catalog page:
In the Website → Pages section, select the catalog category for which you want to configure the filters and click the gear icon to enter the settings.
In the Filters section, from the drop-down list, select the attributes that you want to filter by on the catalog page.
Set the order in which filters are displayed on the page by dragging them in the list.
Click Save.
In addition to the unique filters by attributes that are created in your product templates, you can display filters by system attributes on category pages:
Product stickers;
Brand;
Price;
Color.
Any selected filters will be displayed only if the products have the corresponding attribute values filled in.
Displaying filters on the site
Filters on subcategory pages
The filters configured for a category will be displayed in all nested subcategories, unless those have filter selection configured for them.
If the parent category and at least one of the subcategories have different templates, then only system attributes filters can be selected in the parent category.
Filters on the search page and brand pages
The search results page and pages in the Brands section will display filters that are configured for the Catalog root page.
Filters appearance
There are three options for displaying filters on the catalog page:
Slider — for attributes of the Number type.
Checkboxes — for attributes of the Choose from a list or Yes/No type.
Color Icons — only for the Color system attribute.
In the design editor, you can change the display type and some filter parameters. To do this, go to the Website → Design → Design editor section of the admin panel, expand the Category page section, and click the Filter tab.
Let's take a closer look at the available settings.
Vertical filters
By default, filters are displayed vertically. You can configure one of three display element sizes for vertical filter — S, M, and L.
We recommend choosing the size based on the number of parameters and values: the more values, the smaller the size of the elements to keep the filter compact and easy to read.
Horizontal filters
Optionally, you can switch to the horizontal display of filters in one line with sorting. This option is not universal, you need to make sure that all the parameters fit in one line.
Collapsed/expanded filters
You can also turn on the ability to collapse filters and customize the number of filters that will be displayed on the catalog page in expanded form.
Limiting visible values of a filter parameter
In the filter, you can customize the number of values to be displayed. The remaining values will be available either in a scroll or by clicking on the Show More button by your choice.