New in TURBO v2.1 is the ability to add a multi-tag filter in the sidebar of your collection pages! You'll just need to follow the steps below to set it up.
Steps to add a multi-tag filter in the sidebar:
1. You will first need to go into your 'Products' panel and add the tags you want to use for filtering. Make sure you add tags to all products that you want filtered, no matter what collection(s) they belong to. Keep track of all these tags, as you'll need to write them all down in the next step.
[Your 'Products' panel and where to add tags]
2. Once you've added tags to your products, you will need to go into your Theme Editor to set up a sidebar with a tag filter on a collection page. Do this by navigating to one of your collections while in the theme editor; then click on the 'Collections' tab and scroll to the bottom of the options; click on 'Add content', which will then show the options for the sidebar. Then choose 'Tag filter':
- Enter a title for the filter
- List ALL tags for that particular filter, separated by a comma; make sure you add all the relevant tags for that filter category from all products, no matter what collection they belong to
[Using tags from all products for that filter category, i.e., 'Style' for the example below]
- The tags you list here must match the exact spelling of the tags you added to your products in Step 1
- You can display a small image file (like a color swatch or icon) next to each tag name, by checking the box "Display color swatches"
Note that for color swatches to appear, they must have a .png file of the exact same name as the tag associated with it, and saved in your shop's Assets folder; otherwise, the default web color associated with your color name (if it exists) will be used instead. To add in your own custom color swatches, please check out this article.
[How to add the multi-tag filter to your sidebar and enable the color swatches]
4. You can add multiple filters to your sidebar by adding more Tag Filter content blocks. For the example shown below, these were the filters added, based on tags that had already been set up on the products:
Color: Blue, Green, Brown, Yellow
Size: X-Small, Small, Medium, Large, X-Large
Categories: Animal, Flower, Pattern
[How to add multiple Tag Filters]
5. When a shopper clicks on one of the tag names, all other tags in that category will be hidden and a 'clear' link will appear. Clicking this will clear the filter and go back to showing all tags associated with that category. You can change the wording of this link in the theme's Language Editor (Collection tab).
[How to get into the Language Editor]
[Changing the wording of 'clear' link in the Language Editor]
Once you've added in the filters you need, click save, and you now have a multi-tag filter in your sidebar!
There are some important limitations of this feature that you should be aware of:
- At this time, there is no way for customers to filter by more than one tag within the same group. For example, a customer could not filter by both "Green" and "Blue" in the "Color" group, but can filter between, for example, "Green" and "Medium," assuming "Medium" is in a different group.
- Tag filtering can only be used to show products in the collection currently being viewed. It does not filter across other collections or the entire store.
- You cannot have multiple instances of the same filter tags. For example, you can not have a tag named "New" both under a "Category" filter, and "Product" filter (this will cause the filter not to clear properly).