Setting up and using storefront product filtering on collection pages (video tutorial)

All versions of our themes that support Online Store 2.0 functionality include the ability to add Shopify's storefront filtering to your collection pages. This allows your customers to narrow down large lists of products using filters such as price, vendor, color, etc. It is also possible to create custom filters for any purpose you can think of.

If you are a visual learner, we have created a tutorial video below that walks you through the whole process. Textual instructions can be found below that.

Enable filtering in your theme settings

The process for enabling filtering in your theme is a little different depending on which theme you're using. It starts by opening your theme customizer:

• Login to your Shopify store admin area
• Go to Sales Channels > Online Store > Themes
• Click the Customize button next to the theme you want to edit
• Click on the drop-down in the top-center of the screen to choose which page you want to edit. In this case, choose Collections, then Default collection to open the collection page settings. Note that if you have multiple collection page templates, you may need to setup these options on each of them
• On the left side, click on Collection grid (ShowTime), Products (Galleria), Collection pages (Pursuit) and you'll find the options and settings to enable filtering
• At this point, you are finished setting up the theme to show the filters. The rest is handled via the Search & Discovery app

Select your filters in the Search & Discovery app

If you don't have it already, you'll want to download Shopify's free Search & Discovery app, which allows you to manage your product filters and product recommendations, among other things. The features of this app are always evolving, so the settings may vary slightly as time goes on.

Shopify has a great support article talking about all the types of filters you can add and how to do so.

Tag group filtering (for legacy theme versions)

If you're using older versions of ShowTime (6.x and older) or Galleria (2.x or older), you are using a theme that does not support Shopify's storefront filtering. If you need this feature, you should consider updating your theme version. If that isn't possible or you simply don't want to, never fear, our older theme versions still have filtering capabilities using product tags.

Setting up

It's important to note that the video provided below was created a while ago and Shopify's interface has changed a lot since they were created. The actual process of creating the tags for filtering is relatively unchanged though, so we assume that if you have a basic understanding of working with products and tags in Shopify that you'll be able to follow along. If you need a refresher, please check this article.

If you have a lot of products and want users to have the ability to narrow down their selections by category, this new feature is for you. This feature is built in and used the same way in all of our themes.

To set this up, first choose Group Filtering in your Collection page settings under Product Filtering. Follow the steps below to enable advanced group filtering like the image below.

Define your groups

In the image above, the groups are Brand, Focal Length, and Resolution

Tag your products

If you're just starting out, you can tag your products one-by-one in the product page within your Shopify dashboard. If you have a lot of products to tag, you may wish to export your existing products into a CSV file and update them with a program such as Microsoft Excel, or you can use Shopify's bulk editor.

Prepend all existing product tags (or create new ones) with what group you want them to be in. The format should be Group_Tag Name.

Based on the image at the top of this page, we would have tags like Brand_Canon, Focal Length_18 - 55mm, and Resolution_12 MP.

The left side of the underscore is the group name, and the right side is the tag for the product. Spaces can be included on either side of the underscore. You need to add these tags to all the products you wish to filter.

Save your products when you edit them. If you have edited a .csv file to add your tags, save it and import the products back into your store. Make sure you check "Overwrite existing products that have the same handle" when uploading the file to prevent duplicate products from being created.

Adjust the Order of Filters

The default order of the filters will be alphabetical, but many customers have asked us how to customize this.

There is a new section in your Theme Settings under the Collection Pages heading. Make sure Group Filtering is selected as your Product Filtering Method. Once this is selected, you now have to list your groups in order for them to appear. This is how you can order your groups.

Be sure that you list your groups by the names you used for the tags. No underscores are needed. They should be typed in a case-sensitive list separated by commas with no spaces in between. Once this is done, your filter groups will now show in this order on your site. The filters themselves will show alphabetically in each group. If you're okay with that, you're finished setting up your filters. If you need to customize the order of the filters themselves too, continue reading.

Re-Ordering the Filters Themselves

For those that need precise ordering of the filters themselves, you can create navigation menus to order them. The name of the menu must match your group name. So if you have a group name "Price" you must create a menu called "Price" in order for it to work properly. Next, you must add your tag names to the menu (everything to the right of the underscore). Please see this screenshot for a reference:

Just add links to each of the tags you added to your products (without the filter names). These are case sensitive. The Links To... field doesn't matter -- you can link these to whatever you want. Once you're finished and you have them in the order you want, save the menu and your filters will be ordered properly. If needed, you can create other menus for other groups, or you can ignore those if you're fine with them being arranged alphabetically.