Avenue uses product tags added in the admin to filter products on the Collection Page & the Home Page Advanced Filter. Per Shopify "Tags are searchable keywords associated with your product. Tags can help customers find your product through your online store search, and you can also use them to create automated collections".
Recommended reading
- Products
- Metafields
- Enable product filtering
- Add or remove tags
- Collection Pages Content Blocks
- Home Page Advanced Filter
- Download a Demo Product
In this section...
- Overview
- Tag Based Home Page Advanced Filter
- Collection Page Tag Based Filters
- Tag Based Examples
- Changing the Order of Tag Based Filters
- Known Tag Based Issues
Overview
There are 2 options for filtering collection products, tag based and storefront filtering.
Storefront Filtering
Storefront filtering is set up in Online Store > Navigation and is based on variants, availability, pricing, type, and vendor. To use this method, disable Enable tag based filters.
Tag Based
The remaining documentation will review tag based filtering. 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 |
Tag Based Home Page Advanced Filter
NOTE: Tags 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. Unsure of the available tags? Choose 'Shirts', click 'Search', and take a look at what is available in the left column. The 'Group' 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.
| 'Shirts' Product Tag | 'Filter 1-3' Input Text to Use |
|---|---|
| Color_Red | Color |
| Color_White | Color |
| Color_Blue | Color |
| Size_Small | Size |
| Size_Medium | Size |
| Size_Large | Size |
| Gender_Male | Gender |
| Gender_Female | Gender |
Using the tags 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 tag is dependent on the previous
- Select Shirts: The tags in 'Shirts' that match one of the tags 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' tags in 'Shirts' filtered with the 'Color_Red' tag will be available in the remaining dropdowns. After you hit 'Search', you will go to /collections/shirts/color_red
- Select Shirts + Red + XL: 'Gender' tags in 'Shirts' that include the 'Color_Red' AND 'Size_XL' tags will be available in the last dropdown. After you hit 'Search', you will go to /collections/shirts/color_red+size_xl
- Select Shirts + Red + XL + Male: Products in 'Shirts' that include the 'Color_Red' AND 'Size_XL' AND 'Gender_Male' tags will be available for the search. After you hit 'Search', you will go to /collections/shirts/color_red+size_xl+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 Page Tag Based Filters
For an example, consider a clothing store that has a 'Shirts' collection that has 4 products with the following tags:
- T-Shirt: Color_Red, Size_S, Size_M, Size_L, Gender_Male, Gender_Female
- Tank Top: Color_Blue, Color_White, Size_S, Size_M, Gender_Female
- Polo: Color_White, Size_S, Size_M, Size_L, Gender_Male
- Cami: Color_Red, Color_White, Color_Blue, Size_S, Size_M, Gender_Female
This would produce the following Collection Page filters:
If you click any filter, only the products that contain that tag will display. In this example, if you click 'Red' (Color_Red), only the 'T-Shirt' & 'Cami' will remain:
Multiple tags can be selected, and each time the list will refresh and only display the available tags & products. This will help ensure that your customers never filter down to an empty collection. In this example, 'Blue' (Color_Blue) + 'Female' (Gender_Female) + 'Size' (Size_Small) are selected leaving only the 'Tank Top' to display:
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
NOTE: this is only available in Version 1.4.5 and up
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
Known Tag Based Issues
- 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
- 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':
