For each category configured for your tenant’s product suite, you can define a set of facets that filter the site product results. You can define facets based on the following sources:
- Product categories, which show subcategory values
- Price, which can show a range of values or discrete values
- Product attributes, which are associated with a product type and show a range of values or discrete values
This guide details how facets work and how to manage facets via the Facets UI.
Facet Values
Facets have values, which allow shoppers to narrow products within the facet itself.
For example, you have a Men's Clothing category, which contains a Jeans subcategory. The Men's Clothing category appears as a facet on your site, and the Jeans subcategory appears as a facet value of Men's Clothing.
Similarly, you have a Color attribute that has a value of Purple. The Color attribute appears as a facet on your site, and Purple appears as a facet value of Color.
Facet Types
There are two types of facets:
- Element facets: Consist of product categories, subcategories, and product price.
- Attribute facets: Consist of product properties, extras, and options associated with product types.
Element Facets
Attribute Facets
Facet Example
Imagine that a shopper only wants to view women’s purple sandals under $50.00. They would select the following options from the facet navigation on the site:
Facet Source | Facet Type | Facet on Site |
---|---|---|
Category | Element | Women's |
Subcategory | Element | Sandals |
Price | Element | $25-$50 |
Price | Element | Under $25 |
Color | Attribute | Purple |
Create Facets
You can use any attribute as a facet as long as it exists in the master catalog associated with your site and has Available as Filter & Sort enabled on the attribute definition.
- Go to Main > Search > Facets.
- Use the drop-down menu in the header to select the master catalog and site.
- In the navigation pane on the left, click a category page.
- Begin typing an attribute name in the text box and check the box of the attribute(s) you want to add. Click Add and the new facet(s) will be added to the table.
- Click Edit to select the new facet's facet order.
Click Save.
You can delete an existing facet by clicking the X or reorder facets by using drag-and-drop.
Facet Value Order
When you create facets on category pages, you can select an order for the facet values on your storefront. To change any facet's order, click Edit to the right of the facet in the table.
Default Facet Order
If you don't select a facet order for new facets, the system automatically uses the following default facet value orders for the following facet types:
Facet Type | Input Type | Default Order |
---|---|---|
Attribute facets | List | Attribute Definition |
Attribute facets | Text box, Text area, Yes/No, Date | Facet Count: High to Low |
Element facets | — | Facet Count: High to Low |
Facet Count Options
All attribute facets automatically include the Facet Count: Low to High or Facet Count: High to Low order options. Both of these options order the facet values by the number of products associated with each facet value, in either ascending or descending order. For example, if you select Facet Count: High to Low and you have the following facet values and the amount of products associated with each value:
- Red: 30 products
- Blue: 25 products
- Yellow: 10 products
- Green: 40 products
Your facet values will appear in the following order:
- Green
- Red
- Blue
- Yellow
Attribute Definition Options
All attribute facets that have an input type of List include the Attribute Definition and Attribute Definition (Reverse) order options. The Attribute Definition option orders the facet values by how you order the values when you create the attribute, while the Attribute Definition (Reverse) option orders the facet values in reverse of how you order the values when you created the attribute.
For example, you have an attribute facet for Cable Length that's a list of text values, and you define the following values in order when you create the attribute:
You can use the Attribute Definition option to order the facet values in the same order.
Refer to Attributes documentation for more information about creating attributes and defining attribute values.
Number Facets: Display Style
When you create a facet that has a data type of number, you can specify what facet values are displayed.
You can set the Display Style to either of the following values:
- Values: Kibo uses the values you specified in the attribute's definition as the facet values, and you can then specify a Facet Order using one of the above facet order options.
- Range: You can specify the explicit facet values as a series of ranges, for example 5 to 10, 10 to 20, etc. Kibo then automatically orders these facet range values in descending order.
Data Type Dependent Options
Depending on the input type and data type of the facet's source attribute, you can select various facet order options. Refer to the following table for the facet order options available to each data type:
Input Type | Data Type | Available Facet Orders |
---|---|---|
List | Text | Attribute Definition Attribute Definition (Reverse) Facet Count: High to Low Facet Count: Low to High Alphabetical: A to Z Alphabetical: Z to A |
Number — Display Style: Values | Attribute Definition Attribute Definition (Reverse) Facet Count: High to Low Facet Count: Low to High Numerical: Low to High Numerical: High to Low | |
Products (Extras Only) | Attribute Definition Attribute Definition (Reverse) Facet Count: High to Low Facet Count: Low to High Alphabetical: A to Z Alphabetical: Z to A | |
Text box | Text | Facet Count: High to Low Facet Count: Low to High Alphabetical: A to Z Alphabetical: Z to A |
Number — Display Style: Values | Facet Count: High to Low Facet Count: Low to High Numerical: Low to High Numerical: High to Low | |
Text area | Text | Facet Count: High to Low Facet Count: Low to High Alphabetical: A to Z Alphabetical: Z to A |
Yes/No | Boolean | Facet Count: High to Low Facet Count: Low to High Alphabetical: A to Z Alphabetical: Z to A |
Date | Date | Facet Count: High to Low Facet Count: Low to High Date: Old to Recent Date: Recent to Old |