Supported Versions
The details shared here apply to the most recent version of Turbo. To keep your theme up to date, check out this helpful document.
In This Article
Using the Collection Page Sidebar Multi-Tag Filter
The Turbo theme's Collection Page Sidebar includes an option to add a 'Multi-Tag Filter' so your customers can narrow down what they're looking for in your Collections!
When a customer clicks on one of the tags, the collection will get filtered to only display products that contain the selected tag. All other tags in that collection 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 collection.
You can change the wording of this 'clear' link in the theme's Language Files (Online Store > Themes > Actions > Edit Languages > Collections > Sidebar > Clear).
In order to add a 'Multi-Tag Filter' to your Collection Page Sidebar, head into Customize (your Theme Editor) > choose 'Collection Pages' in the drop-down page selector. Under Sections > Collection > scroll down to Sidebar > Add Content > Tag Filter.
Multi-Tag Filter Configuration
In order to use the 'Multi-Tag Filter', you'll first need to add the 'tags' you want to use for filtering in your Product Admin Pages. 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.
Adding Filter Tags in the Theme Editor
Once you've added tags to your products, you can then set up your 'Multi-Tag Filter' in the Collection Page Sidebar. Head into Customize (your Theme Editor) > choose 'Collection Pages' in the drop-down page selector. Under Sections > Collection > scroll down to Sidebar > Add Content > Tag Filter.
Within the 'Tag Filter' content block, you can enter a Title for the filter and list all of your Filter tags.
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. The tags you list here must match the exact spelling of the tags you added to your Product Admin Pages.
Only the tags found in the collection will be displayed as a filter, so you don't need to worry about a tag appearing in the filter that isn't actually included in the Collection your customer is viewing.
In the above example, you'll see that all tags for the 'style' category are entered, however, only the bra top, dress, jacket, tank top, and tunic tags display because they are the only tags that are found in the viewed Collection.
Display Color Swatches
Within the 'Tag Filter', if you're adding a 'Color' filter category, you can enable the color swatches as well by enabling the 'display color swatches' setting.
In order 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 theme's Assets folder; otherwise, the default web color associated with your color name (if it exists) will be used instead!
View our full article on adding custom color swatches to your theme
Adding Multiple Tag Filters
You can add multiple filters to your sidebar by adding more Tag Filter content blocks. In this example from the Portland demo shop, there are three tag filters added: Style, Material Color and Price.
Multi-Tag Filter Limitations
There are some important limitations of the 'Multi-Tag Filter' to 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).
Examples
Here's how we use the 'Multi-Tag Filter' in our demo shops for Turbo!
Tag Filters Added
Tag Filters Added
Mobile layout
When viewed on a mobile device, each 'Tag Filter' will turn into a drop-down menu.
