> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/unicorn-shopify-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/unicorn-shopify-theme/faq/how-to-set-up-filters.md).

# How to set up filters?

The theme supports storefront filtering by Shopify. In the following article, you can learn how to apply filters for collection pages.

{% embed url="<https://www.youtube.com/watch?v=dUK8yR5Pkjw>" %}

### Add default filters using the Shopify Search & Discovery app

Read the initial [<mark style="color:blue;">documentation</mark>](https://help.shopify.com/en/manual/online-store/search-and-discovery/filters) for filter configuration requirements.

Then, you can follow the listed steps to display filters:

#### **Step 1**

In your *Shopify admin -> Apps*, select the **Shopify Search & Discovery** app.

#### **Step 2**

Then, you can press the **"Filters"** item in the side menu to navigate to the needed chapter.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FRQfp3uEfYCd8GxSGcIqA%2Ffilters_chapter.png?alt=media&amp;token=26a60cca-7c0a-4b83-8c30-ce449e02aec6" alt=""><figcaption></figcaption></figure>

#### **Step 3**

Press the **"Add filter"** button to view all the available filters.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FfECYMhR8Ayb5kaoscdYT%2Fapp_add%20filters.png?alt=media&amp;token=841ec543-07da-4de7-9ccc-036dd963069b" alt=""><figcaption></figcaption></figure>

#### **Step 4**

Use the provided settings to set up a new filter to display on the storefront. Add each filter one by one.

* **Source** - Choose a filter item.&#x20;

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FVk43Mhw3fYA9nWNfBe6M%2Fapp_edit%20filters.png?alt=media&amp;token=fef03921-9a63-45b6-baf6-64898d266c9e" alt=""><figcaption></figcaption></figure>

* **Filter label** - Rename the filter if necessary.

**Save the changes.**

{% hint style="warning" %}
**Note!** If you need to display filters for product options such as color, size, style, etc., add the desired options for products in *Shopify admin -> Products.*
{% endhint %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FDh05rxDt8GSZnofdPQT3%2Fadmin_product%20options.png?alt=media&amp;token=6b5b87c8-f524-49c7-878a-b491d43e4e2e" alt=""><figcaption></figcaption></figure>

#### **Step 5**

The filters are displayed in the same order as you set them up at the back end. If you need to change the filter's position, change the order in the app by dragging filters up or down.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FNjGhbNcY8PkPBwUIL8MP%2Fapp_drag%20filters.png?alt=media&amp;token=bea5002a-71ef-48ed-82c5-3090589f6904" alt=""><figcaption></figcaption></figure>

#### **Step 6**

You can now go to *Theme Editor -> Collections -> Collection ->* [*<mark style="color:blue;">Filtering</mark>*](/unicorn-shopify-theme/page-categories/collections/collection.md#filtering) to customize filters.

### Create custom filters using metafileds

Previously in this article, you learned how to customize the standard filters on the storefront based on product information added in your admin, such as product vendor, type, and product variants.&#x20;

However, Shopify software has limitations for adding more than three filters based on product variants. So, how do you add custom filters that don't match the product options you have added in the admin? This task can be achieved using metafields.

To display custom filters in a store, follow the steps listed below:

#### Step 1

Create a metafield in your *Shopify admin -> Settings -> Metafields and metaobjects -> Metafield definitions -> Products* by hitting the **"Add definition"** button.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F8fVeOVWCRDa8pwaHW2pW%2Fsettings_meta.png?alt=media&amp;token=5399261c-00e4-41eb-b0a6-28059c0d8a9d" alt=""><figcaption></figcaption></figure>

We will create a metafield to display the "Gender" filter. An example of the metafield settings can be viewed below:

* Name - **Specifics**
* **custom.specifics** (generated automatically)
* **Single line text** - **One value**

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F8zlsaHJbWQTzjf5JySuF%2Fmetafields_specifics.png?alt=media&amp;token=47aaf775-22c2-436a-8212-05915447e785" alt=""><figcaption></figcaption></figure>

#### Step 2

Go to **"Products"** in your admin and assign filter items to products using the designed metafield.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FhrRj9yDEGWfFw8UJ65nu%2Fmetafields_product.png?alt=media&amp;token=c9f7c35e-258d-4af7-9824-6a7678aaf99c" alt=""><figcaption></figcaption></figure>

Add an appropriate value to each product that needs filtering.

#### Step 3

To display the filter on the storefront, add a filter to the list of filters in the Shopify Search & Discovery app. Go to **Apps**, select the app, and press the **"Filters"** tab. Then, hit the **"Add filter"** button.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FfECYMhR8Ayb5kaoscdYT%2Fapp_add%20filters.png?alt=media&amp;token=841ec543-07da-4de7-9ccc-036dd963069b" alt=""><figcaption></figcaption></figure>

#### Step 4

Next, select the filter by pressing the **"Source"** field.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FdzZST7RtPvf5QDzIEomu%2Fmetafield_filter.png?alt=media&amp;token=1fc5f65d-9725-4361-9b09-0fca62161f65" alt=""><figcaption></figcaption></figure>

**Save the settings.**

Now, you can view the filter on the storefront:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FeVMTXyA4JsgdwJYGEdxM%2Fmetafield_filter_preview.png?alt=media&amp;token=c8c27cbd-e051-4702-a7e2-a12be7ed9cc4" alt=""><figcaption></figcaption></figure>