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".
Tags can be used for a number of reasons, but to use them to filter products you must follow a simple structure: Group_Title
- Add or remove tags
- Collection Pages Content Blocks
- Home Page Advanced Filter
- Download a Demo Product
In this section...
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|
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 ˅|
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 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:
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|
|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|
- 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: