Adding facets

Facets are used to filter through your products in the product list (Figure 1.1).

Figure 1.1 Facet filters in action

These are created in Settings > Product Catalog > Product fields using the New field button (Figure 1.2).

Figure 1.2 Create new product fields

You must:

  • Name it appropriately (name, system name, and template tag)
  • Select the field type and fill out the necessary options (e.g. list boxes and checkboxes need fitting labels and values) (Figure 1.3)
Figure 1.3 Example of options for field types

Then, go to your Products repository and to your index. Under Fields, you must add a new field for each facet you want to create (Figure 2.1).

Figure 2.1 Add custom index fields

Name the field and set the source to your custom product field (e.g. “CustomField_MyFancyFacetField”) (Figure 2.2).

If it is a text-based facet, the field should be stored and indexed, but if it is a number-based facet (e.g. a weight facet), the field should only be indexed.

Figure 2.2 Set up custom index fields using the product fields as source

Then, save your index and build it afterwards (Figure 2.3). This will add the newly created fields to the Schema extender fields.

Figure 2.3 Save and build the index

Now, go to your query and add a parameter for each facet (Figure 3.1). The parameter should have the appropriate type (string[] or Boolean[]).

Figure 3.1 Add parameters for each facet

Under Expressions, add a new expression for each facet (in the outer group with the And group operator) (Figure 3.2) and select the right field, operator (In for strings and Equal for booleans), and parameter using the pencil icon.

For instance, with a Material facet, select the:

  • Material_Facet field (comes from your custom index fields)
  • In operator
  • Click the pencil icon and select Parameter > Material (the parameter you just created above)
Figure 3.2 Add expressions with the matching field, operator and parameter

Save and close the query. In the repository toolbar, click Add Facets (Figure 3.3). Name it and select your products query.

If you’ve already set up facets, you can skip this step and jump to the next.

Figure 3.3 Add Facets to your repository

Then, add a field facet for every facet you want to add (Figure 4.1).

Figure 4.1 Add field facet

For each facet, you must (Figure 4.2):

  • Name it
  • Select your custom index field (e.g. “Material_Facet”)
  • Select your query parameter
  • Choose a render type (checkbox, color, tags, and weight)
Figure 4.2 Set up the field facets

Save the Facets. The last step is to render the facets in your product list. Go to your paragraph edit the app settings for the Product Catalogue app. Under Index, move your facets to the selected facet groups (Figure 4.3).

Figure 4.3 Move your facets to the selected facet groups

The facets will now be rendered as filters in the product list.

For configuration options regarding facets in the product list, see this article about the website settings.

Every time you edit a product / the information in the product fields or add new products / product fields, you must build the index to render the changes in frontend.

You can set up your repository to build the index automatically upon changes using tasks or directly on your shop.