Filtering

Important note: To utilize filtering, this function must be activated in Field Settings.

Filtered navigation allows merchants 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. Examples of common filters include "Price", "Category", "Brand", "Size", or "Color".

The filters that show on search and category pages are based on several factors:

• The search query that has in effect
• The product attribute data from the resulting items
• The selection of any other filters on the page

Seeing product attributes listed under filters allows you to confirm if the data is accurate. 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".

You may find that a certain filter shows for products when it shouldn't. This usually means that the data needs an update and the attribute needs to be removed from that product in your ecommerce platform.

For example, if 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.

In another example, a shopper searches for "oven mitt". They specifically want an item with a floral pattern that costs less than $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, making the final product selection easier.

Note: Filters listed on this page have been enabled on the Field Settings page.

Filter Types

There are two ways to group the ordering of filters on your store: Pinned & Smart Sorted filters. These are displayed on two different tabs, as shown in the image below. The tab displays the number of filters of each type; in the example below, there are nine pinned filters and three smart-sorted filters.

Default Max Values

Set the value using this drop-down menu at the top right of the page to determine the default maximum value for all filters configured on this page.

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 sorted filters give you the power to have your filter fields dynamically ordered depending on the context of the shopper's page. These will appear in your store below any pinned filters you have configured, and they are ordered dynamically based on the "Dynamic Sorting Order" drop-down menu at the top left of this section.

Regardless of the dynamic sorting order you have selected, filters on this configuration page will appear in alphabetical order for convenience. The selected sorting order will be applied to your store (the merchant's website), not here in the console.

To change the filter type to be either Pinned or Smart Sorted, click the "..." icon under the "Options" column and select "Edit". Scroll down in the pop-up window and click the "Filter type" drop-down to change this value. The filter will move to the correct tab after you save your changes by clicking the "Save Filter" button at the bottom right.

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. For 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", 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.

Add a Filter

To add a new filter, click the "Add Filter" button at the top right of the page.

Note: Newly added filters will default to the Smart Sorted Filters tab.

Next select which field you'd like to add.

Set a label (name) for the new filter. By default, the label will show the field name selected, but you may modify this. This is the name the shopper will see for the filter.

Customize the remaining fields on this form, then click the "Create Filter" button at the bottom right to save your changes, or click the "Discard" button to cancel your change.

Sort

Click the drop-down menu to select the sort for this field. Sorting determines how filter options are listed on your website. Options include the following:

• Count (the default value)
• 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.
• Custom (Advanced) = Use this if your filter options require a specific order that is not covered by one of our basic sorting methods. To learn more about how to use custom sort, visit Setting Up Custom Sort on a Filter.

Note: For performance reasons, in any sort (aside from Count), we will only show a maximum of 500 options within a filter, based on how those options are set to be sorted, then sort by the specified sort. 

Max Values

Click the drop-down menu to select the maximum number of values displayed; options include 1-10, 15, 20, 25, 50, 100, and Unlimited (which is capped at 500 values/options per filter). Use this when you have many options for a filter and do not wish to show all of them.

Note: The default selection for this value is set in the Default Max Values drop-down at the top right corner of this page.

Selection

Click the drop-down menu to set the single- or multi-select behavior for this filter. Options include the following:

• Select Multiple - OR (the default value)
• Select One
• Select Multiple - AND

The number of options per filter that can be selected is determined by the Selection value. For example, a shopper searching for shoes 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 de-select "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 selection. The shoes that are shown are either blue or orange, but this also could include items that are both blue and orange.

Display

Click the drop-down menu to select how the filter options will display to the shopper. Options include the following:

• List = This is the default display for 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 item 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 (such as "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. For example, on one 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 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. For 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>Blue

  To set up your data for a "Hierarchy" filter, you must make two changes in the console:

  1. In Field Settings, set a Multi-Valued delimiter based on the format of the data for this field in your data feed. (This is often the "|" character, but it could be any character based on your data.)

  2. On the Filter Settings page, once "Hierarchy" has been selected as the "Type", select the "Hierarchy Delimiter", which in the above example is the ">" character, but which is dependent on the delimiter you use to separate parent and child.

     

• After completing the listed steps, a shopper might see the following under the "Category" filter:

Shoes

Clicking "Shoes" expands more options.

Shoes

   Style

   Color

An additional selection of "Style" will show the following:

Shoes

   Style

      Running

      Formal

The Display selection depends on what your integration is built to support. For example, if you select "Palette" for your Color Filter, the filter may not display in a Palette format until your integration templates are first updated to include a design for the Palette filter type. Open a Support Ticket to request assistance on this design change if you see your Display selection not working as expected.

Filter Type

Click the drop-down menu to choose if this field will be a pinned filter or a smart-sort filter.

Collapsed toggle

Click this toggle to determine if the filter options will be shown collapsed (enabled) or expanded (disabled). The toggle will display "Disabled" or "Enabled" based on your selection. Enable this setting if you want the filter to be "closed" by default. This means that when a shopper goes to your website, they will see only the name of the filter, not the selectable options beneath it. Clicking the name will show the options, and then the user can select what they want.

Edit a Filter

Edit a filter by clicking the "..." icon under the "Options" column and selecting "Edit".

The "Edit Filter" window will appear.

Make any changes needed, then click the "Save Filter" button at the bottom right, or click the "Discard" button to cancel your changes.

Delete a Filter

Remove a filter by clicking the "..." icon under the "Options" column and selecting "Delete". A confirmation window will appear.

Rearranging Filters

You can update the order in which filters are displayed to a user. On the left of any added filter, there is an icon that looks like six vertically aligned dots. With your mouse, click and hold 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.

Note: For Category/Collection pages (but not for search results), you have the ability to remove filters on a per-collection page basis through merchandising rules. Note that all filters must exist in the filters section, and then you can remove or reorder them at the collection level in a merchandising campaign.

FAQs

How many filter fields are allowed?

We will show a maximum of 25 filter fields at a time. This is for both performance and shopper experience purposes.

How many smart-sorted filters are allowed?

On your site, Athos will show a maximum of 12 smart sorted filter fields at a time. This is for both performance and shopper experience purposes.

What happens if a field disappears from my data feed?

If the field that a filter is using disappears from your data feed, the filter will no longer appear on your site. However, if the field later returns to the data feed, the filter will also return.