Setting up collection page filters in Empire – Pixel Union

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 select a filter system (faceted filtering or tag filtering).

If you use tag filtering, select a filter type, display filters in a grid layout, change the filter order and tag order, and exclude specific tags from your collection page sidebar filters.

empire_collection_page_with_handmade_tag_filter_selected.png

Select a filter system

Access the filter settings

Use the page selector to select Collections, then Default collection
Open Filters below Collection pages in the sidebar

In the latest version of Empire, there are two options for filtering products: Faceted filtering or Tag filtering. There are advantages and limitations to either option.

Use the provided menu to select the Filter type.

Faceted filtering (platform)

With Online Store 2.0, Shopify added Collection and search filters to the Navigation admin.

This filtering system is enabled by default.

Follow Shopify's guide to set up faceted filtering

Tag filtering (legacy theme feature)

To use the legacy, tag-based filtering system, select Tag filtering from the Filter type dropdown.

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

For filters to be categorized in separate groups, like this example from the Supply demo store, follow the below steps.

gardening_group_tag_selected_in_empire_demo_collection_page.png

First, add the organizing tags to the Products admin (Products > Edit product) in this format:

Interest_Animals, Interest_Art, Interest_Cooking

Enable By group in the theme editor

Use the page selector to open Collections, then Default collection
Open Filters in the sidebar
Select By group in the Filters dropdown
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 5 tags, the list of tags will truncate after 5 instances.

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.

displaying_filters_in_grid_on_empire_collection_page.png

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.

Reorder groups in the theme editor

Use the page selector to open Collections, then Default collection
Open Filters in the sidebar
Use the Group order field to add the tag groups in the preferred order
Save

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), rearrange these to put Price range first by adding "Price range" to the Group order field.

Reorder tags

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.

Exclude specific tags

Recent releases of Empire 5.10+ include an additional field to identify tags to exclude from the storefront. Add tags to the Exclude tags field to identify the tags to conceal from the sidebar.

This is especially helpful for tags that only have a behind-the-scenes role, such as tags for 3rd-party apps or automated collections