The Turbo theme's Collection Page Sidebar includes an option to add a 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.
Add Tags to Products
Start by adding the tags you want to use for filtering in your Products admin.
Creating and using tags in Shopify
Keep track of all these tags, as you'll need them for the next step. Click View all tags link in the top-right corner to gather all current product tags.
Add Tag Filter Block
In the theme editor (Customize), open a Collection page template with the page selector.
Select (+) Add block, then Tag filter.
Connect Tags
Click to open the Tag filter block to add the Title and Filter tags.
Title
Enter a Title for the filter group in the provided field. For example, 'Materials' for furniture products.
Filter tags
List every tag for the filter group and separate them with commas.
The tags you list here must match the exact spelling of the original tags.
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.
Display Color Swatches
If you're adding a Color filter category, activate color swatches with the Display color swatches setting.
Missing colors
To replace a missing or incorrect color, upload a PNG file with the exact same name as the tag to your theme's Assets folder.
Learn more about color swatches
Adding Multiple Tag Filters
Add multiple filters to your sidebar by adding more Tag filter content blocks.
Tag Filter Limitations
There are some important limitations of the Tag Filter to consider.
If these limitations are a concern, consider Shopify's Faceted Filtering as an alternative
One filter selected per group
Customers are unable to filter more than one tag within the same group. For example, a customer could not filter by both Green and Blue in the Color block, but can filter between, for example, Green and Medium, since they're in separate blocks.
Visible tags limited to collection
Tag filters can only be used to show products in the collection currently being viewed. It does not filter across other collections or the entire store.
Duplicate tag conflict
Multiple instances of the same filter tags will interfere with the Clear function. For example, if a tag named New is used for a Category filter and Product filter.
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.
