Avenue uses the Search & Discovery app or product tags added in the admin to filter products on the Collection Page, Search Page & the Advanced Filter.
Recommended reading
- Products
- Metafields
- Add storefront filtering
- Adding filters with Shopify Search & Discovery
- Collection Page
- Advanced Filter
- Download a Demo Product
In this section...
Advanced Filter
NOTE: Filters are case sensitive!
In the Collection Content Blocks, first select a collection. This example will use the collection 'Shirts'. In the 'Filter 1-3' inputs, add the Search & Discovery Filters 'Label'.
Unsure of the available filters? Choose 'Shirts', click 'Search', and take a look at what is available in the left column. The 'Label' will be the bolded text above the list & the 'Title' is the list item. Click the filters to see the relationship with one another.
Search & Discovery Filter Label
'Filter 1-3' Input Text to Use
Color
Color
Size
Size
Gender
Gender
Using the labels above as an example, if a user selects the collection 'Shirts' from the first dropdown, additional dropdowns will be created for 'Color', 'Size' & 'Gender':
Collection ˅
Color ˅
Size ˅
Gender ˅
Shirts
Red
S
Male
White
M
Female
Blue
L
Each filter is dependent on the previous
- Select Shirts: The filters in 'Shirts' that match one of the filters in the 'Filter 1-3' inputs will be available in the remaining dropdowns. After you hit 'Search', you will go to /collections/shirts
- Select Shirts + Red: 'Size' & 'Gender' filters in 'Shirts' filtered with the ''Red' storefront filter will be available in the remaining dropdowns. After you hit 'Search', you will go to /collections/shirts?filter.v.option.color=Red
- Select Shirts + Red + XL: 'Gender' filters in 'Shirts' that include the storefront filters will be available in the last dropdown. After you hit 'Search', you will go to /collections/shirts?filter.v.option.color=Red filter.v.option.size=XL
- Select Shirts + Red + XL + Male: Products in 'Shirts' that include the storefront filters will be available for the search. After you hit 'Search', you will go to /collections/shirts?filter.v.option.color=Red filter.v.option.size=XL filter.v.option.gender=Male
Each dropdown can be used individually, but the first collection dropdown must be selected. Users will never land on an empty collection page.
Collection & Search Page Filters
For an example, consider a clothing store that has a 'Shirts' collection that has 4 products with the following storefront filters:
- T-Shirt: Variant or metafield for Color, Size, Gender
- Tank Top: Variant or metafield for Color, Size, Gender
- Polo: Variant or metafield for Color, Size, Gender
- Cami: Variant or metafield for Color, Size, Gender
This would produce the following Collection Page filters:
If you click any filter, only the products that contain that filter will display. In this example, if you click 'Red', only the 'T-Shirt' & 'Cami' will remain:
Multiple filters can be selected, and each time the list will refresh and only display the available filter & products. This will help ensure that your customers never filter down to an empty collection. In this example, 'Blue' + 'Female' + 'Size' are selected leaving only the 'Tank Top' to display:
Known Filter Issues
- Collections that contain over 5,000 products do not display filters. This is restricted by Shopify, and not the theme. If you have a collection with more than 5,000 products, you can present a large collection as a group of smaller automated collections and link to them in drop-down menus. For example, instead of just one link to a large "Women" fashion collection, have your store give navigation links to smaller sub-collections of "Tops", "Jeans", and "Boots".
- A search that produces more than 1000 results doesn't display filters.
- A filter can display a maximum of 100 filter values. If there are more than 100 values, some will be missing. You can reduce the number of possible filter values by grouping similar values with metafields.
* NOTE: May not be available on all sections, blocks or templates