Set up collection filters for your store

Filtering product collections is a must-have on every store for your customers. This guide is aimed at helping you achieve that in the Tokyo theme.

Shopify Search & Discovery app

Tokyo fully supports Shopify’s Storefront filtering. For that to work you will need to install and activate Shopify’s official Search & Discovery app. The app allows you to customize filters on your store and also search results and product recommendations. This guide will focus on search filters.

Setting up filters with Metafields

Before you display your filters you’ll need to create the metafields that will hold the product information for each of your products.

Creating metafields for your products is easy, you can read about this in full detail on the official Shopify documentation but the following instructions will give you a jump start:

1. From your Shopify admin, navigate to “Settings“.
2. From the settings menu on the left, navigate to “Custom data“.
3. Select “Products“.
4. Click “Add definition“.

In the following screen, name your definition based on the type of content you will be providing (this will be the title of your filter, i.e. “Volt”), and choose a content type. Usually you will want this to be “Single line text” for your product filters.

Hit “Save” and then you’re done.

Displaying filters on your store

After setting up your product filter Metafields you can start filling them up for each product in every product’s edit page. In our example above we’ve set up a metafield called “Volt” where we’d add particular values of voltage on products that it applies to (i.e. “5V”, “12V”, etc). Shopify then identifies those distinct values and groups products based on those.

The next step is to enable metafields (and other default Shopify fields) as filters:

In the Shopify admin, navigate to “Apps” and then open the “Search & Discovery” app that you installed in the first step.

Inside the Feature overview section, click on the “Customize filters” button, or just select the “Filters” item under the Search & Discovery entry on the sidebar on the left.

On the next page, click on the “Add filter” button. Then, click on “Add Source” and select any of the filters available.

Hit “Save” and the next time you open a collection page, if the collection includes products that have data assigned in those metafields, they will be displayed on the sidebar: