Faceted navigation is a feature in modern e-commerce websites that allows customers to refine their search results by selecting options that match what they are looking for.
Each facet displayed will add about 1 millisecond to the search response time. Above 100 facets begins to add considerably more time.
Faceted navigation is a feature in modern e-commerce websites that allows customers to refine their search results by selecting options that match what they are looking for. These filters are created by using product attributes from a data feed. An example of common facets include "Price", "Category", "Brand", "Size", or "Color". With SearchSpring, the amount and type of facets a person can add on their site are nearly limitless.
The facets that show on the search page are based on a few factors.
- The search query that is finished.
- The product attribute data from the resulting items.
- The selection of any other facets on the page.
Seeing product attributes listed under facets allows a person to see if their data is accurate. You may find that a certain facet is showing for products when it shouldn't be. Usually this means that the data needs to be updated and the attribute removed from that product in your e-commerce platform. If, however, you find that facets are showing for products that don't have those attributes, we recommend that you open a support ticket (email email@example.com) so we can help investigate.
- A shopper searches for "running shoes". They are presented with three facets: "Size", "Color", and "Style". The shopper filters by the options "Size: 10.5" and "Color: Black". The "Style" facet disappears because the remaining products in the results do not have any "Style" attributes.
- A shopper searches for "oven mitt". In particular, they are looking for something with a floral pattern and under $20. When the search is processed, they are left with four facets: "Pattern", "Color", "Size", and "Price". Using the facets "Pattern" and "Price", they are able to select "Pattern: Flowers" and "Price: $20 and under".
By selecting facet options, the shoppers in the examples above are able to refine their search results thus making the final product selection easier.
To manage SearchSpring facets, log in to our management console and select Fields > Faceting from the left navigation. On the next page, we provide several different ways you can customize the display of facets to your customers.
Facets listed on this page have been enabled on the Field Settings page.
There are two ways to set up facets on your store: Pinned & Smart Sorted facets. Regardless of facet type, facets that don't apply to any products on a page will be hidden. For example, if a shopper is viewing the category "pants", the facet "shirt size" would be hidden because no products in "pants" have a value for "shirt size".
Pinned Facets will show up at the top of the facet list in the exact order you have selected. These facets can be dragged around to re-order them as you'd like. Some commonly Pinned facets might include Category, Brand, Gender, and Price.
Smart Sorted Facets give you the power to have your facet fields dynamically ordered depending on the context of the shopper's page. These will appear on your store below any Pinned facets you have set up, and are ordered dynamically based on the "Dynamic Sorting Order" box at the top right of this section.
Regardless of the Dynamic Sort Order you have selected, facets will appear on the configuration page in alphabetical order for convenience.
To change the type of Facet, simply click the facet type dropdown near the right and select the type you'd like. The facet will move to the correct section on the page after you make your selection.
Dynamic Sorting Order
The Dynamic Sort Order determines how your Smart Sorted Facets are ordered.
- Product Count: Ordered by the facets that apply to the most products that are being viewed.
Example: If a shopper is on a search or category page where 100 products have a value for "shirt size", and only 50 products have a value for "pant size", then the "shirt size" facet will be placed first, followed by the "pant size" facet.
- Alphabetical (A-Z): Facets will be alphabetically sorted from A-Z by their field label.
- Alphabetical (Z-A): Facets will be alphabetically sorted from Z-A by their field label.
Add a Facet
To add a new facet, click the "Add a Facet" button at the bottom of the facet list. Newly added facets default to your Smart Sorted Facets.
Next, select which field you'd like to add, then click the "Add" button to confirm.
Remove a Facet
You can easily remove a facet entirely by clicking the minus symbol at the far right of any facet.
The Filter column identifies which field being faceted on. To make changes to this field's name or label, you can make changes in Field Settings.
Sort determines how your facet options are listed on your website.
- Alphabetical - Alphabetically, A to Z, in ascending order.
- Count - Descending by item count. If one option has an item count of 255 and another option has 32 items, the option with 255 items will show first.
- Reverse Alphabetical - Alphabetically, Z to A, in descending order.
- Clothing Sizes - Options are listed by clothing sizes in ascending direction, smallest to largest size. Any other options that are not valid size terms will be placed at the end of the list. For example: OneSize, 12M, 1T, 3XS, Small, Large, 6XL, etc.
- Grade (K - 12) - Options are listed by grade level in ascending direction, earliest to latest grade. Any other options that are not valid grade terms will be placed at the end of the list. For example: Pre-K, Elementary, 2nd, High School, Adult, etc.
Sometimes your facet options may require a specific order that is not covered by one of our basic sorting methods. This is where Custom (Advanced) will help. To learn more about how to use custom sort, visit Setting Up Custom Sort on a Facet.
Max Values sets the maximum number of options that will appear for each facet. In some cases, a person may have over 100 options for a facet and may not want to show all of them.
The amount of options per facet that can be selected is set by the Selection column. To explain the choices, take the following scenario as an example. A shopper is searching for shoes and is using the "Color" facet to narrow their results. They want to filter by two options: "Blue" and "Orange".
- Select One - Only one option per facet may be selected. Clicking "Orange" after selecting "Blue" will unselect "Blue" and show orange shoes.
- Select Multiple - AND - A user can select more than one option per facet, but items displayed will match both selections. The shoes that are shown are both blue and orange.
- Select Multiple - OR - A user can select more than one option per facet, but items displayed will match either selections. The shoes that are shown are either blue or orange and can sometimes even be blue and orange.
The Display setting provides different options for displaying your facets. It is important to note that changing the "Display" does not necessarily change how your facet displays on your website. If the chosen display type is anything other than "List" (the default display), some times the facet must be styled. If you are unsure if any other "Display" works for your site, it is recommended that you open a support ticket (email firstname.lastname@example.org) to have us investigate and provide feedback.
To clarify, setting "Display" will change how the code is formatted making it easier for your development team to style. It does not, however, style the facet automatically.
For developers: Changing the facet display type will update the class on the facet's container. Instead of the class "list" it might be "palette" and so on. Using these classes, you can add specific styles for your facet types. In addition, most facets will have unique IDs based on their field. If you have set a facet for the field "Shirt Size", you should see an ID similar to "searchspring-shirt_size_container".
The default display of facets. One option is listed per line with an item count next to it.
Blue (204) Black (15) Orange (3) Red (1268) Yellow (58)
Facet options may be styled to look like a grid format. This is used for things like shoe or clothing sizes where the text is very short (e.g. S, X, XL, 18, etc.). It does not include a facet count.
A Palette is best used with facets like "Color". Text and items counts are removed from the option and a color is displayed instead. Palette data should contain web safe color values. For colors that are not web safe (like "Rainbow", "Striped", "Hot Pink", etc), images can be mapped to options, though this may require some custom work.
For an example on how web safe color data should be formatted, please see this article, in particular the sections titled "HTML color names" and "X11 color names".
Sliders may only be used with facets that are set to either "Whole Number" or "Decimal Number" in Field Settings. The slider is a line with two points; on the left is the lowest price and on the right is the highest price. A shopper can drag these points along the bar to define a range of prices they wish to shop by.
On a site, the starting point of a slider is $10.00 and the end point is $250.00. A user moves the end point to the left until the price value reaches $100.00. Items ranging from $10.00 to $100.00 are displayed.
When selecting "Slider" as the facet type, the "Slider Format" should be updated. To access this customization, click on the wrench icon under the "Advanced" column. This formatting option determines how numbers will appear on the slider ranges - with a "$" sign, without a "$" sign, two decimal places, one decimal place, etc. You may also define a custom format, by selecting "Custom" from the drop down.
This facet type is used to format data that has a nested structure or parent/child relationship.
You have "Category" data that is formatted in your data feed the following way:
Shoes | Shoes > Style | Shoes > Style > Running | Shoes > Style > Formal | Shoes > Color | Shoes > Color > Blue
To set up your data for a "Hierarchy" facet, you must make two changes in the Management Console.
- In Field Settings, set a "Multi-Valued" delimiter. It would be set to the "|" character.
- On the Facet Settings page, once "Hierarchy" has been selected as the "Type", click on the wrench icon under the "Advanced" column. From there, you'll want to set the delimiter for the "Hierarchy" itself, which would be the ">" character.
After completing the listed steps, on your website a shopper might see the following under the "Category" facet:
Clicking on "Shoes" expands more options.
Additional selecting of "Style" will show the following:
Another way SearchSpring allows you to customize your facets is with Ranges. In order to use "Ranges" with facets, you must meet the following conditions:
- Data on the Field Settings must be marked as "Decimal Number" or "Whole Number" under the "Type" column.
- "Type" on the facet settings page must be set to "List", "Grid", or "Palette".
The "Ranges" input box can be accessed by clicking on the wrench icon under the "Advanced" column. The range you want to create must be contained inside a set of brackets and is compromised of three values: a starting number, the word "TO" in all caps, and an ending number. The starting and ending numbers could also be a wildcard ("*"). If the ending number is a wildcard, the range option will span across all numbers that are after the starting number. This is the exact opposite if the starting number is a wildcard.
The actual text that a shopper sees on your website for each facet option should be proceeded by an equal sign (=).
[* TO 5]=Less than $5 [5 TO 10]=$5 to $10 [10 TO 15]=$10 to $15 [15 TO 20]=$15 to $20 [20 TO 30]=$20 to $30 [30 TO 50]=$30 to $50 [50 TO 100]=$50 to $100 [100 TO *]=More than $100
Another good use case for "Ranges" would be for a "Rating" facet. If your rating field is set to decimal number and you have lots of different values in the data such as "3.2", "4.5", "1.6", "5.0" and so on, you may not want to show all those options in a facet. Instead, you can set up ranges like this:
[5 TO 5]=5 stars [4 TO 5]=4 stars and up [3 TO 5]=3 stars and up [2 TO 5]=2 stars and up [1 TO 5]=1 star and up
On ocassion, you may want to some facets to be "closed" by default. This means that when a shopper goes to your website, they will only see the name of the facet and not the selectable options beneath it. Clicking on the name will show the options and then the user can select what they want. To enable a facet as Collapsed, click on the wrench icon under the "Advanced" column and check the box that says "Collapsed" to the left. Then click the "Save" button at the bottom of the page.
The order in which facets are displayed to a user can be updated. On the left of any added facet, there is an icon that looks like three vertically aligned dots. With your mouse, click and hold on this icon then drag the row higher or lower in the list. Release your mouse click and the facet will snap into its new position. Make sure to save your change by clicking the "Save" button at the bottom of the page.
Remember to save your changes by clicking the "Save" button at the bottom left.