Sidebar: Filter with multiple tags
When using tags in the sidebar, the standard behaviour is to filter by one single tag. If you need to have multiple tag filtering, you can use this modification.
Example - Standard single tag filtering in the sidebar:
Click Tag 1 - All items in current collection with Tag 1 are displayed.
Click Tag 2 - All items in current collection with Tag 2 are displayed.
Example - Multi-tag filtering in the sidebar:
Click Tag 1 - All items in current collection with Tag 1 are displayed.
Click Tag 2 - Only items in current collection tagged with both Tag 1 + Tag 2 are displayed. Items with only Tag 1 or only Tag 2 are not displayed.
Click Tag 1 - Tag 1 is now toggled off. All Items in current collection with Tag 2 are displayed.
Click Tag 3 - Only items that are tagged with both Tag 2 + Tag 3 will now be displayed.
How to:
Always make a duplicate of your theme before adding any code. This will save you if anything goes wrong or if you decide not to use the added code in the future. We can not support or be responsible of any code changes that you make to your theme. For that reason, save yourself and make a duplicate first.
Make a duplicate before any code changes:
- 1
-
Edit snippets/collections-sidebar.liquid
In the Code Editor, in the snippets folder, open collections-sidebar.liquid. If Pipeline is published/live, use this link:
snippets/collections-sidebar.liquid
At the bottom of the file, look for this line of code:
In the code area, use the Find feature (Command-F on Mac, Control-F in Windows) and search for:
{{ tag | link_to_tag: tag }}
- 2
-
Modify the code
After you've located that line. Change the code from:
{{ tag | link_to_tag: tag }}
To:
{{ tag | link_to_add_tag: tag }}
Save the file.
That will allow your customers to filter by multiple tags. Clicking a tag again will remove it from the filters.