# How to create custom filters

&#x20;You can create custom filters using Metafields to display various information, color swatches, numbers, etc., in the Sidebar. Ensure that you are familiar with the criteria for creating Metafield definitions for filtering. Find the detailed information regarding the metafields configurations in the Shopify [<mark style="color:blue;">**documentation**</mark>](https://help.shopify.com/en/manual/online-store/themes/os20/customize/filters#custom-filters).

&#x20;In order to create a custom filter, please follow these steps:

Step 1

&#x20;Go to your *Shopify Admin -> Settings -> Metafields and metaobjects -> Metafields -> Products*:

<figure><img src="https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2F1Tpm5SoesVaIhSNAz2mp%2Fmetafields_create.png?alt=media&#x26;token=6a76c2ac-594f-409f-8a16-9296bcea8d66" alt=""><figcaption></figcaption></figure>

Step 2

&#x20;Create a Metafield with a metafield format:

* Name = e.g. **Gender**
* Namespace and key = e.g. **my\_fields.gender**

&#x20;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**

<figure><img src="https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2F0z0Y2nNQTnaVF3GJi3on%2Fmetafield_gender.png?alt=media&#x26;token=29e8b4cc-5f53-46d9-9be1-ded402f5d5da" alt=""><figcaption></figcaption></figure>

* 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

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2F0dzO6jpiM1uj8N8QtBUB%2Fmetafield%20definition_gender.png?alt=media\&token=0b241417-d0e4-465e-a63c-b5c6b6eeb17d)

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

&#x20;Find more information on how to add a Mertafield definition [<mark style="color:blue;">**here**</mark>](https://help.shopify.com/en/manual/metafields/metafield-definitions).

Step 3

&#x20;Navigate to *Products* in your *Shopify Admin* and add a value for a Metafield:

<figure><img src="https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2FXaEe2kDKn3TIFNNKNJyh%2Fproduct_metafield.png?alt=media&#x26;token=2abd4929-c1b5-4267-b70a-daaca6dda03c" alt=""><figcaption></figcaption></figure>

Step 4

&#x20;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:

<figure><img src="https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2FIZe3N1UoJEXCvUtSZlUl%2Fadmin_edit%20filters.png?alt=media&#x26;token=e7d0280a-e360-41db-a537-c939367c66bf" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2FOSVVI06v1SEVxQd0XY3V%2Fadmin_filter%20gender.png?alt=media&#x26;token=99292a84-3d99-4c7d-b45f-c6b9a6e8832f" alt=""><figcaption></figcaption></figure>

&#x20;Save the changes.

Step 5

&#x20;Go to *Shopify Admin -> Online Store -> Themes*, choose the theme, and press **“Customize”**.

&#x20;In the *Theme Editor -> Theme settings ->* [*<mark style="color:blue;">Collection page</mark>*](https://mpithemes.gitbook.io/shella-shopify-theme/theme-settings/collection-page-1#sidebar)*,* configure options of the “Sidebar visibility” and “Sidebar position on desktop”:

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2FUxyfAqXBEIbddgKEhXp9%2Fsidebar_editor.png?alt=media\&token=3584a805-00d4-4f2e-9ba1-d267e1b6d35c)
