# Filters

{% hint style="info" %}
**Collections -> Product grid -> Add block -> Filters**
{% endhint %}

{% hint style="warning" %}
**IMPORTANT!** This block will be available only after enabling the **“Enable default filtering”** option in *Product grid -> Filtering.* Check details [<mark style="color:blue;">**here**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/collections/content#filtering).
{% endhint %}

&#x20;In order to display filters in the sidebar section, add the desired ones in *Shopify Admin -> Apps -> **Search & Discovery** app.* Learn more about filters [<mark style="color:blue;">**here**</mark>](https://help.shopify.com/en/manual/online-store/themes/os20/customize/filters).

&#x20;If you need to set settings for an individual filter block, you can add a **“Filter settings”** block and assign it to the corresponding filter. How to configure the **“Filter settings”** block, you can read [<mark style="color:blue;">**here**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/collections/content/filter-settings).

{% embed url="<https://www.youtube.com/watch?index=16&list=PLj-506KaR_vcQjwcpC6yII-1JY0bSj7df&v=vpl7Jcp__Vk>" %}

## Section settings

&#x20;You can choose the **“Default state”** of the block: open, closed, fixed, or without a title.

{% hint style="warning" %}
**Please note** that once you select the **“Top & vertical filters”** option in *Theme settings -> Collection and Search page -> Sidebar position on the desktop*, only the “Open” and “Close” options can be available, and only for mobile mode. On the desktop view, filters will be displayed as closed by default. How to configure the sidebar position, you can read [<mark style="color:blue;">**here**</mark>](https://mpithemes.gitbook.io/shella-shopify-theme/theme-settings/collection-page-1#sidebar-position-on-desktop).
{% endhint %}

## Content

&#x20;In the **“Layout”** dropdown, one can choose the column limit for filters: 1, 2, 3 columns, or a row. On the **“Max column size”** scale from 0 to 30, you can choose how many items should be shown in one column.

{% hint style="warning" %}
**Please note** that the scale settings can be used if the limit of columns is set to 2 or 3 columns in the “Layout” dropdown. If you choose 0, the filter items will be displayed on a scroll or in a column.
{% endhint %}

## How to add filters in Shopify Admin

To display storefront filtering, set up filters in your *Shopify Admin -> Apps*. Here you can use the **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%2FRm4QlKJjoslurx407TzV%2Fadmin_add%20filters.png?alt=media&#x26;token=f2668427-9cd0-4397-a448-1262f7456069" alt=""><figcaption></figcaption></figure>

&#x20;Add each filter one by one.

* We have added five filters in the app: Availability, Color, Size, Price, and Vendor:

<figure><img src="https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2FsEcfg2fIX1MTUFelUuYn%2Fadmin_filters.png?alt=media&#x26;token=96708aa0-6eec-44e6-84cb-9ac5ce9d5e1d" alt=""><figcaption></figcaption></figure>

* As a final step, we added the **“Filters”** block, and this is what we have got:

<figure><img src="https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2FYtEMrlvO3DOY0kg2mIoK%2Ffilters_block.png?alt=media&#x26;token=3784475c-640b-4f13-93ad-cd5c1d2377cc" alt=""><figcaption></figcaption></figure>

## How to add custom filters

You can add custom filters using Metafields. Filters will be displayed for the content types:

* Text (Single line text)
* Number (integer, decimal)
* True or false

Check more information [<mark style="color:blue;">**here**</mark>](https://help.shopify.com/en/manual/online-store/themes/customizing-themes/storefront-filters#custom-filters).

In order to create a custom filte&#x72;*,* follow the steps below:

Step 1

* Go to your *Shopify Admin -> Settings -> Metafields and metaobjects -> Metafields -> Products.*&#x20;
* Click “**Add definition”** and create a product metafield definition. Save changes.

This is an example of the metafield format:

* Name = the name of a metafield
* Namespace and key = use a unique definition for each metafield
* Description = add a description of the metafields that will be shown at the backend only
* Content type = Text (Single line text), Number (integer, decimal), or True or False

<figure><img src="https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2FrQOMysf4vh3H78eueIHp%2Fmetafield_custom%20colors.png?alt=media&#x26;token=ee6f94a3-72da-4a76-a332-129ab0fe2cfc" alt="" width="563"><figcaption></figcaption></figure>

Step 2

* Go to your *Shopify Admin -> Products.* For each product, add a value to the corresponding Metafield:

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2FIbC5WFw4QEPBCFwFSwBO%2Ffilters_products.png?alt=media\&token=dfdf0a59-04b8-42ed-8dfc-ca475c9d1f46)

* Save changes.

Step 3

* In *Shopify Admin -> Apps*, use the **Shopify Search & Discovery** app to add Metafields. How to use the app, you can read above.
* Choose the custom filter in 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%2Ff2iCpaTQJTF0BGQ8mapE%2Fadmin_custom%20color.png?alt=media&#x26;token=e67e5a12-eede-4bca-85bb-6b66d6b4e178" alt=""><figcaption></figcaption></figure>

* Save changes.
