> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/ella-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://halosoft.gitbook.io/ella-documentation/collections-page/collection-section/main-collection/filter.md).

# Filter

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

<figure><img src="/files/2ZGc3aHu9o0B7qQyf4xJ" alt=""><figcaption></figcaption></figure>

**OR** go to **Navigation -> Add App** like the below image:

<figure><img src="/files/qEY0KsI3FzEwMsmTxK6j" alt=""><figcaption></figcaption></figure>

3. Open **App** -> Click **Filters.**

<figure><img src="/files/0G6UrIvAwQcHdIZmF6Cv" alt=""><figcaption></figcaption></figure>

4. Click **Add Filter.**

<figure><img src="/files/PyDmbDkk9pnrzWEIuk4V" alt=""><figcaption></figcaption></figure>

5. Choose option filter you want to set up.

<figure><img src="/files/aU5OQFbQsVGk3oN1wm04" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
If your product collection contains **over 5000 products**, then filters are hidden. For more information, see [Add storefront filtering](https://help.shopify.com/en/manual/online-store/themes/customizing-themes/storefront-filters).
{% endhint %}

{% hint style="info" %}
If you used storefront filters prior to **August 16, 2022**, the settings to manage your saved filters moved to the Shopify Search & Discovery app. \
\- The app has been preinstalled to your admin, so you can continue to edit your filters.&#x20;

\- The app will not impact your store’s performance.&#x20;

\=> If you want to get more information, [please visit the link](https://shopify.pxf.io/kj74K3)
{% endhint %}

### S**et 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. Scroll to **Filter** at **Main Collection ->** click the **Show Product Filtering?** checkbox to enable the filter.

<figure><img src="/files/fAnjDk59OTNIW6F4jA7I" alt=""><figcaption></figcaption></figure>

## &#x20;Custom style for Filter option

{% hint style="info" %}
Ella 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="/files/fOownw7DSd2njXOVPQgH" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
The default theme uses Color Board from the [w3schools website](https://www.w3schools.com/colors/colors_names.asp) for the Color variant option. If the color name doesn't exist on the [w3schools website](https://www.w3schools.com/colors/colors_names.asp), it will not display on your site.
{% endhint %}

{% 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 <mark style="color:red;">**PNG**</mark> format

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

For example: your special color will have this name: "Holo Rainbow", you will upload the png image is: <mark style="color:red;">holo-rainbow\.png</mark>
{% endhint %}

## Tag Filter

Set up Filter By Tag.

**Step 1**: Go go **Customize** theme -> Choose **Collection** from the dropdown window. At **Main Collection**, click **Add block** -> Choose "**\[Sidebar]** **Filter**"

<figure><img src="/files/fpQgKQc3PhNFPKdFikuQ" alt=""><figcaption></figcaption></figure>

**Step 2:** Enter heading and list tags you want to filter.

<figure><img src="/files/TOQ0RRA6G1XB2Rk1EYKx" 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 **More filters**

<figure><img src="/files/BtWogOCnfa00olDAfhrx" 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="/files/8sE7feHzXRVX1DOVOG7S" alt=""><figcaption></figcaption></figure>