Get started by checking out this video on filtering
Filtered (also sometimes known as 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 filters include "Price", "Category", "Brand", "Size", or "Color". With Searchspring, the amount and type of filters a person can add on their site are nearly limitless.
The filters 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 filters on the page.
Seeing product attributes listed under filters allows a person to see if their data is accurate. You may find that a certain filter 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 filters are showing for products that don't have those attributes, we recommend that you open a support ticket at Searchspring Help Desk so we can help investigate.
A shopper searches for "running shoes". They are presented with three filters: "Size", "Color", and "Style". The shopper filters by the options "Size: 10.5" and "Color: Black". The "Style" filter 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 filters: "Pattern", "Color", "Size", and "Price". Using the filters "Pattern" and "Price", they are able to select "Pattern: Flowers" and "Price: $20 and under".
By selecting filter options, the shoppers in the examples above are able to refine their search results thus making the final product selection easier.
Each filter displayed will add about 1 millisecond to the search response time. Above 100 filters begins to add considerably more time.
Default Filter Limit
This is where you specify how many options or values you want to come back by default for each filter. This can be overwrote on the filter settings page on a per filter level.
Filter Settings
To manage Searchspring filter, log in to our management console and select Site Customizations > Display Settings > Filtering from the left navigation. On the next page, we provide several different ways you can customize the display of filters to your customers.
Filters listed on this page have been enabled on the Field Settings page.
Searchspring will never show more than 25 filter fields at a time. This is for both performance and shopper experience purposes.
Filter Types
There are two ways to set up filters on your store: Pinned & Smart Sorted filters. Regardless of filter type, filters that don't apply to any products on a page will be hidden. For example, if a shopper is viewing the category "pants", the filter "shirt size" would be hidden because no products in "pants" have a value for "shirt size".
Pinned Filters
Pinned Filters will show up at the top of the filter list in the exact order you have selected. These filters can be dragged around to re-order them as you'd like. Some commonly Pinned filters might include Category, Brand, Gender, and Price.
Smart Sorted Filters
Smart Filters give you the power to have your filter fields dynamically ordered depending on the context of the shopper's page. These will appear on your store below any Pinned filters 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, filters will appear on the configuration page in alphabetical order for convenience.
To change the type of Filter, simply click the filter type dropdown near the right and select the type you'd like. The filter will move to the correct section on the page after you make your selection.
Searchspring will never show more than 12 smart sorted filter fields at a time. This is for both performance and shopper experience purposes.
Dynamic Sorting Order
The Dynamic Sort Order determines how your Smart Sorted Filters are ordered.
-
Product Count: Ordered by the filters 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" filter will be placed first, followed by the "pant size" filter. - Alphabetical (A-Z): Filters will be alphabetically sorted from A-Z by their field label.
- Alphabetical (Z-A): Filters will be alphabetically sorted from Z-A by their field label.
Adding & Removing Filters
Add a Filter
To add a new filter, click the "Add a Filter" button at the bottom of the filter list. Newly added filters default to your Smart Sorted Filters.
If the field that a filter is using disappears from your data feed, the filter will no longer appear. However, if the field returns in the data feed later, the filter will also return.
Next, select which field you'd like to add, then click the "Add" button to confirm.
Remove a Filter
You can easily remove a filter entirely by clicking the minus symbol at the far right of any filter.
Managing Individual Filter Fields
Filter
The Filter column identifies which field being filtered on. To make changes to this field's name or label, you can make changes in Field Settings.
Label
You can adjust what label the shopper sees for this field here.
Note: Changing this label is not exclusive to Filters. Anywhere else you are using this field's label will be changed as well.
Sort
Sort determines how your filter options are listed on your website.
- Use Default - Defaults to Count unless there has been some custom work on this site to change the default.
- 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.
For performance reasons, in any sort (aside from Count) we first fetch the top 500 products by count, then sort by the specified sort.
Custom (Advanced)
Sometimes your filter 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 Filter.
Max Values
Max Values sets the maximum number of options that will appear for each filter. In some cases, a person may have over 100 options for a filter and may not want to show all of them.
Selection
The amount of options per filter 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" filter to narrow their results. They want to filter by two options: "Blue" and "Orange".
- Select One - Only one option per filter 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 filter, but items displayed will match both selections. The shoes that are shown are both blue and orange.
- Select Multiple - OR - (Default) A user can select more than one option per filter, 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.
Display
The Display setting provides different options for displaying your filters. It is important to note that changing the "Display" does not necessarily change how your filter displays on your website. If the chosen display type is anything other than "List" (the default display), some times the filter must be styled. If you are unsure if any other "Display" works for your site, it is recommended that you open a support ticket Searchspring Help Desk 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 filter automatically.
For developers: Changing the filter display type will update the class on the filter's container. Instead of the class "list" it might be "palette" and so on. Using these classes, you can add specific styles for your filter types. In addition, most filters will have unique IDs based on their field. If you have set a filter for the field "Shirt Size", you should see an ID similar to "searchspring-shirt_size_container".
List
The default display of filters. One option is listed per line with an item count next to it.
Example
Blue (204)
Black (15)
Orange (3)
Red (1268)
Yellow (58)Grid
Filter 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 filter count.
Palette
A Palette is best used with filters 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".
Slider
Sliders may only be used with filters 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.
Example
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.
Slider Format
When selecting "Slider" as the Display option, 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.
Hierarchy
This filter type is used to format data that has a nested structure or parent/child relationship.
Example
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>BlueTo set up your data for a "Hierarchy" filter, 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 Filter 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" filter:
ShoesClicking on "Shoes" expands more options.
Shoes
Style
ColorAdditional selecting of "Style" will show the following:
Shoes
Style
Running
FormalRanges
Another way Searchspring allows you to customize your filters is with Ranges. In order to use "Ranges" with filters, you must meet the following conditions:
- Data on the Field Settings must be marked as "Decimal Number" or "Whole Number" under the "Type" column.
- "Display" 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.
Setting a range with overlapping values (such as 150-200 and 200-150) can result in filter product count indicators showing a higher number of products than there is in total.
The actual text that a shopper sees on your website for each filter option should be preceded by an equal sign (=).
Note: Values within the ([ ])'s will be the Whole Number or Decimal values of the field.
String values like ($) or (,) or (-) should not be included within the ([ ])'s, including these values will result in an error.
Example
[* TO 100]=Less than $100
[100 TO 250]=$100-$250
[250 TO 500]=$250-$500
[500 TO 750]=$500-$750
[750 TO 1000]=$750-$1,000
[1000 TO 1500]=$1,000-$1,500
[1500 TO *]=More than $1,500
Another good use case for "Ranges" would be for a "Rating" filter. If your rating field is set to a 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 filter. 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
Collapse
On occasion, you may want to some filters to be "closed" by default. This means that when a shopper goes to your website, they will only see the name of the filter 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 filter 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.
Rearranging Filters
The order in which filters are displayed to a user can be updated. On the left of any added filter, 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 filter will snap into its new position. Make sure to save your change by clicking the "Save" button at the bottom of the page.
Save
Remember to save your changes by clicking the "Save" button at the bottom left.
Comments
0 comments
Article is closed for comments.