# Filter

1. From your Shopify admin, go to **Online Store -> Apps**.
2.  Type to find "Search & Discovery" app of Shopify

    <figure><img src="https://themes.templatescoder.com/belliza/documentation/images/screenshort-38.jpg" alt=""><figcaption></figcaption></figure>
3.  Open **App** -> Click **Filter** -> **Edit Filter**.

    <figure><img src="https://themes.templatescoder.com/belliza/documentation/images/screenshort-39.jpg" alt=""><figcaption></figcaption></figure>
4.  Choose option filter you want to set up.

    <figure><img src="https://themes.templatescoder.com/belliza/documentation/images/screenshort-40.jpg" alt=""><figcaption></figcaption></figure>

### 1. Set up filter options in Theme Editor

1. From your Shopify admin, go to **Online Store -> Themes**.
2. Find the theme that you want to edit, and then click **Customize**
3. Choose **Collection** from the dropdown window. At Main Collection, click add block **"Filter"**
4. Enter heading and list tags.

<figure><img src="https://themes.templatescoder.com/belliza/documentation/images/screenshort-41.jpg" alt=""><figcaption></figcaption></figure>

<figure><img src="https://themes.templatescoder.com/belliza/documentation/images/screenshort-42.jpg" alt=""><figcaption></figcaption></figure>

### 2. Custom style for filter option

{% hint style="info" %}
Belliza offers 3 styles for Filter option: **Checkbox**, **Swatch** or **Rectangle**. If you would like to use **Swatch** or **Rectangle** style, please follow instructions below.
{% endhint %}

1. From your Shopify admin, go to **Online Store ->** **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Choose **Collection** from the dropdown window. After that, scroll to **Filter** at **Main Collection**
4. Enter Filter Option Name for Swatch style in **Swatch Style For Filter** text box (or enter Filter Option Name for **Rectangle** **Type for Filter**).

<figure><img src="https://3751104066-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJKlAwzeCbxVGW0a9OXJm%2Fuploads%2FeDuIpSZy8llr50TqiEzS%2Fscreenshort-238.jpg?alt=media&#x26;token=195532d6-19e1-47f2-9566-afcc0f854e2b" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
With Color swatch filter option, if your products have custom color/special color, please choose **Swatch Type** as **Basic Color (Use Color name or Image With PNG Format)**.

After that, please upload an image with the same name as the variant color name (Go to Settings → Files -> Upload Files).

Your image must be in **PNG** format

**Naming convention**: Lower cap and use a hyphen "-" to replace white space if your color image name has the white space.

For example: your special color will have this name: "Holo Rainbow", you will upload the png image is: holo-rainbow.png
{% endhint %}

### 3. Tag Filter

Set up Filter By Tag.

**Step 1**: Go go Customize theme -> Collection page -> Add Block Filter

<figure><img src="https://3751104066-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJKlAwzeCbxVGW0a9OXJm%2Fuploads%2FuoUfkyiq2z616DOl8Hww%2Fscreenshort-239.jpg?alt=media&#x26;token=c0266e43-424c-4cb8-a473-87292235212c" alt=""><figcaption></figcaption></figure>

**Step 2:** Add Tag you want to filter

<figure><img src="https://3751104066-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJKlAwzeCbxVGW0a9OXJm%2Fuploads%2FHOVyUDOVEqWNCnOmf561%2Fscreenshort-240.jpg?alt=media&#x26;token=7308ca6f-e03b-40e6-acee-8b2b46233deb" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Maximum for showing **50 blocks per section**.

Separate by a **comma**. i.e: re&#x64;**,**&#x62;lu&#x65;**,**&#x79;ellow.

**Required Condition:** The tag you add in Editor and the tag you add to your products must be the same. Take note for **Lowercase and Uppercase**. If they are different, they will not show.
{% endhint %}

Step 3: Go to Navigation -> Open App -> Choose Filter -> Enable option **Tags (displayed as More filters)**

<figure><img src="https://3751104066-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJKlAwzeCbxVGW0a9OXJm%2Fuploads%2FVHMwPKs2Nsb1vudo1nBP%2Fscreenshort-241.jpg?alt=media&#x26;token=96636881-9a14-4c65-aba2-449a174148fb" alt=""><figcaption></figcaption></figure>

**Pro Tip:** If you don't want to show **Tags** in **Filter Sidebar**, you can apply **Hidden Tag Filter** in **Main Collection** Setting.

<figure><img src="https://3751104066-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJKlAwzeCbxVGW0a9OXJm%2Fuploads%2FEm9Gia3pxBiMAYNehuOj%2Fscreenshort-242.jpg?alt=media&#x26;token=6e674781-a5ab-4775-9795-ba6b51f126fc" alt=""><figcaption></figcaption></figure>
