Empire's sidebar can feature a tag filter, allowing customers to find products more quickly without leaving the collection page.
Use the theme editor to activate the sidebar, include product counts, select a filter type, set the filters position, display filters in a grid layout, change the filter order for your collection page sidebar filters.
Activate the sidebar
To activate this feature, go to Customize > Select Collection page from the page dropdown > In the left-side settings, open Collection pages > Enable Show sidebar
Include product counts
For each filter category, display the total amount of products included by enabling Show product counts.
Select a filter type
Configure the settings below to show the tags By tag or By group.
If you display them By tag, all of the tags you have used will be displayed as checkable boxes in the sidebar. You can add and edit tags for each of your products in the Shopify admin.
Filter tags by group
If you would like your filters to be categorized in separate groups, like this example from the Supply demo store, follow the below steps.
First, add the organizing tags to the Product admin (Products > Edit product) in this format:
Interest_Animals, Interest_Art, Interest_Cooking
In the theme editor, you can enable the ‘By group’ setting, found under Sidebar.
Go to Customize. In the right-side preview, open up any collection page (or select Collection pages in the page dropdown). In the left-side settings column, you will see a section called Collection pages. Open this section to select By group > Save
Hide additional tags
Use the Hide additional tags after dropdown to restrict the number of tags displayed in the sidebar. By default, all tags will be displayed. The available options here are:
- 5 tags
- 6 tags
- 8 tags
- 10 tags
- 15 tags
- 20 tags
For example, if you selected 8 tags, the list of tags will truncate after 8 instances.
Set the filters position
The Filters position selector determines whether the tag filters will show above or below the optional sidebar menus.
Display filters in a grid layout
Filters in the sidebar are presented in a vertical list by default. Display certain filter groups in a grid-style layout, enter the group name of the desired filters into the Display filters as grid field.
For example, to change the 'Interest' group filters on the Empire Supply demo's Kitchen Tools, the name "Interest" would need to be added to the field to display this filter group as a grid.
Change the filter order
By default, the sequence for the Collection page filters is arranged alphabetically.
Go to Customize > Open a Collection page in the right-side preview > Open Collection pages in the left-side settings > Scroll down to the Group order field.
Use this field to add the tags groups in the preferred order. For example, if there are three groups on a collection page for Size (Size_Small, Size_Medium, Size_Large), Color (Color_Red), Price range (Price range_1.99-9.99), you could rearrange these to put Price range first by adding "Price range" to the Group order field.
Rearrange the tags listed under groups with the Tag order field. Similar to the Group order field, the Tag order field is used to identify a new sequence for the listed tags (as opposed to the default alphabetical order).
Add the tags in the preferred order, using the full tag as it appears in the Products admin. For example, if there are tags for size:
Size_S, Size_M, Size_L, Size_XL
These would appear in alphabetical order (L, M, S, XL). To change these to order for ascending size, add these to the Tag order field in the preferred order.