Product Filters & Sorting
What’s on this page?
Filters & sorting products in a catalog enables store associates to narrow down products in a category by means of filtering criteria. Filtering is valuable in shoulder-to-shoulder scenarios when associates are showing products to a customer in-store and want to get to the right product as quickly as possible.
Within a category that displays products, the Filter option in the top right of the screen enables an associate to filter the category that is shown. Tapping Clear All clears all applied filters.
Store associates can also sort the category that is being displayed, and can apply both filtering and sorting to the same list. Tapping Reset clears the sorting that’s applied and restores the default sorting.
Associates can also switch between Grid View and List View to change the look of the catalog to their liking.
Combine Filters
A user can choose to select a single filter or combine multiple filters to further restrict the displayed products to those that match all of the selected filter criteria.
Filters are dynamically applied as soon as they are selected. The Done option is not required to apply filters. Quickly selecting multiple filters results in an initial product grid that is overwritten by the final set of filters applied.
Default Filter & Sort Options
The following default filters are available out-of-the-box:
- Color
- Size
- Price buckets of 0 to 150, 150 to 300, 300 to 500, 500+
- Toggle for Home store availability
The following default sort options are available out-of-the-box:
- Product name in A to Z order
- Product name in Z to A order
- Price in low to high order
- Price in high to low order
Notes:
- By default, the price used for sorting a product is the lowest price among the variants for that product. In addition, for each variant, the most specific price for the current store and currency that the user is logged into is used. For example, if one product variant has a store-specific price and another product variant has a generic price applicable to all stores in a region, the lower of the two prices is used for sorting.
- In order for a product to appear in a particular price bucket, the product needs at least one of its variants to have its most specific price in the filter range. For example, a product with a variant with its most specific price of $140 and another variant of $200 will appear in both the 0 to 150 price filter and 150 to 300 price filter.
- Additional sort options and filter values can be configured in Tulip based on product attributes (including custom attributes). For example, a custom New to Old sort option would rely on a Product Publish Date which can be passed as a custom attribute for the product.
- The sort order in Chinese when choosing alphabetical order is Chinese Pinyin from A-Z or Z-A.
Additional Filters
Retailers can work with Tulip Implementation Teams to specify additional filter and sort options.
The filters can be configured to different levels:
- Level 1 - these are filters that appear when users tap the Filter option.
- Level 2 and beyond - Some Level 1 filters can have additional levels. Level 2 are always available as a ‘simple list’ only. All Level 2 and beyond filters automatically have a Search bar available at the top of the screen to enable users to easily find the filter value of choice.
The following Level 1 filter types are available out-of-the-box that can be configured by Tulip Implementation Teams. Both the filter types and the order of the filters can be configured.
Toggles
Toggles are used to specify filters that are set as ‘true’ or ‘false’.
For example, the Home Store Availability filter is the best example of a toggle filter where the user can turn the toggle on to see only the items that are available in their home store.
Other examples of toggles can include:
- Show Outlet store items vs. Full Price store items only
- Show Pre-Sell items only
Swatches
In categories where product swatches are available, swatches can be specified as a Level 1 filter.
Each swatch filter can display up to 10 swatches. For additional filter values, Level 2 filters can be leveraged. When the user taps More, a Level 2 filter can open showing all possible filter values available as a simple list.
Examples of filter values that can be rendered as swatches:
- Color / Color Family
- Material
- Metal
Buttons
For the best experience, buttons are ideal for filters where the number of unique filter values are less than 10. However, there are no technical limitations to set up a button filter if there are more than 10 unique values. In the case of more than 10 unique values, users can tap More to see additional values.
Examples of filter values that can be rendered as buttons:
- Size
- Price Ranges
- Category
- Season
- Stone
Note: Filters get truncated if the string value is too long, because iOS truncates words that do not fit within the buttons.
Simple Lists
For filters that have more than 10 unique values, it is recommended to use a simple list.
For supporting use cases such as Color Family filters, the simple lists can also be made browsable. That is, there are multiple level of simple list filters that can be invoked from a level higher.
Available Configurations
Retailers can configure product filtering and sorting in the following ways:
| Field | Configurable Elements |
|---|---|
| Filters & Sort Criteria | Override default out-of-the-box filters & sort criteria to change filter or sort definitions and add new filter or sort options. |
| Types of Filters |
|