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
- Enable product filtering
- Adding filters
- Add or remove tags
- Collection Pages Content Blocks
- Home Page Advanced Filter
- Download a Demo Product
In this section...
Overview
There are 2 options for filtering, tag based and storefront filtering.
Storefront Filtering
Storefront filtering is set up the Search & Discovery app and is based on variants, availability, pricing, type, vendor, and other content. To use this method, disable Enable tag based filters.
Tag Based
Tags can be used for a number of reasons, but to use them to filter products you must follow a simple structure: Group_Title
Group
Title
Product Tag
Color
Red
Color_Red
Size
L
Size_L
Gender
Male
Gender_Male
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 'Group' text preceding the '_' from the product tag or 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 'Group' or 'Label' will be the bolded text above the list or dropdown & the 'Title' is the list or dropdown item. Click the filters to see the relationship with one another.
Search & Discovery Filter Label
'Shirts' Product Tag
'Filter 1-3' Input Text to Use
Color
Color_Red
Color
Color
Color_White
Color
Color
Color_Blue
Color
Size
Size_Small
Size
Size
Size_Medium
Size
Size
Size_Large
Size
Gender
Gender_Male
Gender
Gender
Gender_Female
Gender
Using the tags & 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 'Color_Red' tag or 'Red' storefront filter will be available in the remaining dropdowns. After you hit 'Search', you will go to either:
- /collections/shirts/color_red
- /collections/shirts?filter.v.option.color=Red
-
Select Shirts + Red + XL: 'Gender' filters in 'Shirts' that include the 'Color_Red' AND 'Size_XL' tags or storefront filters will be available in the last dropdown. After you hit 'Search', you will go to either:
- /collections/shirts/color_red+size_xl
- /collections/shirts?filter.v.option.color=Red filter.v.option.size=XL
-
Select Shirts + Red + XL + Male: Products in 'Shirts' that include the 'Color_Red' AND 'Size_XL' AND 'Gender_Male' tags or storefront filters will be available for the search. After you hit 'Search', you will go to either:
- /collections/shirts/color_red+size_xl+gender_male
- /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 tags or storefront filters:
-
T-Shirt:
- Tags: Color_Red, Size_S, Size_M, Size_L, Gender_Male, Gender_Female
- Search & Discovery Filter Label: Variant or metafield for Color, Size, Gender
-
Tank Top:
- Tags: Color_Blue, Color_White, Size_S, Size_M, Gender_Female
- Search & Discovery Filter Label: Variant or metafield for Color, Size, Gender
-
Polo:
- Tags: Color_White, Size_S, Size_M, Size_L, Gender_Male
- Search & Discovery Filter Label: Variant or metafield for Color, Size, Gender
-
Cami:
- Tags: Color_Red, Color_White, Color_Blue, Size_S, Size_M, Gender_Female
- Search & Discovery Filter Label: 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
-
Storefront: 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".
-
Storefront: A search that produces more than 1000 results doesn't display filters.
-
Storefront: 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.
-
Tags: Shopify has a 1,000 tag limit per collection, read more. This is restricted by Shopify, and not the theme. If you do not see tags showing up as filters, it may be due to that fact that they are listed above the top 1,000
-
Tags: The default 'collections/all' page may not display tags in the same manner as a collection created in the admin. Though rare, if you notice that some filters are disabled even though you know the filter is available, try creating a new collection to accommodate all products:
- Create a new collection and give it a title
- Add Conditions for an automated collection. If your store offers free products, consider adding 'Product Price is equal to 0':
- Change the auto selected handle to 'all':
Tag Based Examples
How can this be applied to your store?
Consider the examples below as a guide to the types of tags you could add to products to relate them:
Subject | Tag 1 | Tag 2 | Tag 3 |
---|---|---|---|
Clothes | Size_XL | Color_Red | Gender_Male |
Car Parts | Year_2016 | Make_Toyota | Model_Tacoma |
Air Filters | Short Side_12" | Long Side_16" | Thickness_1" |
Appliances | Type_Refrigerator | Doors_Side by Side | Energy Star_Yes |
Printer Ink | Brand_HP | Series_LaserJet | Model_LaserJet 4 |
Beer | Color_Dark | Style_Stout | ABV_9% |
Hockey | Conference_Eastern | Division_Metropolitan | Team_Capitals |
Equipment | Type_Chainsaw | Use_Daily | Power_Gas |
Groceries | Department_Produce | Type_Citrus | Package_Bagged |
Restaurant | State_Virginia | City_Virginia Beach | Style_Sushi |
Drone | Brand_DJI | Style_Racing | Accessory_Backpack |
Changing the Order of Tag Based Filters
Filters can be rearranged by either the Group Name or Filter Title:
Change the order by the Group Name
By default, the filters will be listed alphabetically by the 'Group' text preceding the '_' from the product tag, ie Brand, Color, Type. To rearrange this order or exclude certain groups, in the Theme Editor visit a collection and open the Filter Content Block:
Add the case sensitive filter 'Group' text separated by a comma, ie: Color,Type,Brand. This will also exclude other 'Groups' from being displayed if those tags are available, ie 'Size_XL'
Change the order of the Filter Titles
NOTE: this is only available in Version 1.5.0 and up
Just as the Group Names are listed alphabetically by default, so are the Filter Titles. This becomes an issue with numeric filters:
Tags | Display |
---|---|
Size_1 | 1 |
Size_2 | 100 |
Size_12 | 12 |
Size_100 | 2 |
To correct this, we will need to reformat the tag and use the '^' character:
Current | New | Display |
---|---|---|
Size_1 | Size_1^1 | 1 |
Size_2 | Size_2^2 | 2 |
Size_12 | Size_3^12 | 12 |
Size_100 | Size_4^100 | 100 |
Just as before, the Filter Title will be anything after the '_'. Now, the order of the filters will be the number before the '^'. A few notes:
- The code will only display the text after the '^'
- You could replace numbers with letters, ie 'Size_a^1'
- The number of digits used before the '^' must take into consideration the number of filters, otherwise you will duplicate the same original issue. In the example above, we only had to rearrange 4 filters, but what if there were 10 or 100? If that were the case, your ordering must be 2 or 3 digits also, ie:
- 10 Filters: Size_01^1
- 100 Filters: Size_001^1