How to create custom filters

In this article, you can find an example of creating a Metafield definition for a custom filter and how to connect it with the theme.

You can create custom filters via Metafields to display various information, color swatches, numbers, etc. in the Sidebar. Make sure that you are familiar with the criteria for creating Metafield definitions for filtering. The detailed information, you can find in Shopify documentation.

In order to create a custom filter please follow these steps:

Step 1

Go to your Shopify Admin -> Settings -> Custom data -> Metafields -> Products:

Step 2

Create a Metafield with a metafield format:

• Name = e.g. Gender

• Namespace and key = e.g. my_fields.gender

You can use the "Namespace and key" which is automatically pulled by the system, or you can use a unique namespace (e.g. “my_fields.” ) to build a route to your definition and not overlap with a keyword (e.g. “gender”). So, a special route for the Metafield might display product.metafields.my_fields.gender

• Description = optional (will be shown on pages only in your Shopify backend to help you fill out the metafield correctly)

• Select content type: Text -> One value/List of values

You can display filters using the following value types: Single line text, Single line text (List), Decimal, Integer, and True or False.

Find more information on how to add a Mertafield definition here.

Step 3

Navigate to Products in your Shopify Admin and add a value for a Metafield:

Step 4

Add a Metafield to the navigation in Shopify Admin -> Online Store -> Navigation -> Collection and search filters, use the Shopify Search & Discovery app:

• Press the button “Open” to use the app:

• Then, choose the “Filters” item in the side panel of the Admin and press the “Add filter” button:

• Now you can choose the required filters from the list of the “Source” drop-down:

Save the changes.

Step 5

Go to Shopify Admin -> Online Store -> Themes, choose the theme, and press “Customize”.

In the Theme Editor -> Theme settings -> Collection page, configure options of the “Sidebar visibility” and “Sidebar position on desktop”: