> 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="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FDqfl1FQVadb6kW4A3Hdk%2Ffilter_setup_1.png?alt=media&amp;token=2a3a4105-f5c0-4a03-a797-9e08cb3625c3" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FMPCOdrxNb5PeM6Ma67mV%2Ffilter_setup_2.png?alt=media&amp;token=6e8d34c4-5b18-40c8-a291-f219c13a45c6" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FQx4edOTiIw1mXcp8p4nL%2Fimage.png?alt=media&amp;token=c75d6311-cc1c-4571-98d3-7881d29a5df1" alt=""><figcaption></figcaption></figure>

4. Click **Add Filter.**

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FvfDil6fHD20fPooucr88%2Fimage.png?alt=media&amp;token=7f2811e0-b8f4-4a75-8295-148df7b4beec" alt=""><figcaption></figcaption></figure>

5. Choose option filter you want to set up.

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FFEFNgAJuJU7CMDj1DA1L%2Ffilter_setup_5.png?alt=media&amp;token=3bfe1d60-a248-4174-8624-d0a9054a7cb9" 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="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FFUaK4HMlebzZMqdYCRrM%2Fimage.png?alt=media&amp;token=25d7fbd7-ea2d-4078-a329-39c3272d3a2e" 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="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2Fqla0AGgwJkBZVhEV4dXD%2Fimage.png?alt=media&amp;token=11767366-7023-455f-8e06-a094ab7fceef" 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="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FY5BqCdfEb3MtnPMruWHU%2Fimage.png?alt=media&amp;token=77738d56-2fd9-43cd-9d50-d6cac92e759f" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2F8FD0seV12YXVSJwKP0ct%2Fimage.png?alt=media&amp;token=ca2a8d47-e940-47ce-81df-4e4bddbb8ee8" 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="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FCR3wpNsgPavApeby2ye6%2Fimage.png?alt=media&amp;token=cd092e9a-ea2b-4786-85b1-23a88786dd11" 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://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2Fh26DrBeWrt9xf8Lm1zbW%2Fimage.png?alt=media&amp;token=22d3bc15-8d46-4728-bc0b-e756223594c0" alt=""><figcaption></figcaption></figure>