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.
Last updated
Was this helpful?
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.
Last updated
Was this helpful?
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 .
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.
Step 3
Navigate to Products in your Shopify Admin and add a value for a Metafield:
Step 4
To display a new filter on the storefront, add it to the list of filters in Shopify Admin -> Apps -> Shopify Search & Discovery app:
Select the Search & Discovery app from the list of apps.
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”.
Find more information on how to add a Mertafield definition .
In the Theme Editor -> Theme settings -> , configure options of the “Sidebar visibility” and “Sidebar position on desktop”:
