# Filters

<div><figure><img src="https://4116947012-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZvOReVnJPMF91ppETQNN%2Fuploads%2Fgit-blob-93c11e8759332fb326ae46fa4c3a08df834ef935%2FiPhone%2014%20Pro%20(4).png?alt=media" alt=""><figcaption></figcaption></figure> <figure><img src="https://4116947012-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZvOReVnJPMF91ppETQNN%2Fuploads%2Fgit-blob-8024871ebf11839bc8471a7c26d82e339592e6a0%2FiPhone%2014%20Pro%20(2)%20(3).png?alt=media" alt=""><figcaption></figcaption></figure></div>

## 🎯 Why use Product Filters

Adding filters to your app’s collection pages improves the shopping experience:

* Helps users quickly narrow down product results.
* Reduces browsing time and increases conversion rates.
* Essential for stores with many SKUs or categories.

***

## 📌 Prerequisite

✅ **Before proceeding, make sure:**

You have installed the [**Shopify Search & Discovery**](https://apps.shopify.com/search-and-discovery) app.

***

## 🧩 Types of Filters

| **Filter Type**    | **Description**                                                                  | **Available on Plan**                                              | **Use Case Example**                                                                       |
| ------------------ | -------------------------------------------------------------------------------- | ------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ |
| **Basic Filters**  | Filters for **Price** and **Availability**.                                      | **Basic Plan**: Only Price and Availability filters.               | **Basic Plan**: Ideal for stores with simple needs like "In Stock" or price sorting.       |
| **Custom Filters** | Filters based on **metafields** or **variant options** (e.g., Color, Skin Type). | **Pro & Premium Plans**: All other filters, including custom ones. | **Pro Plan**: Best for stores needing filters like **Color**, **Material**, **Skin Type**. |

***

## ⚙️How to set up

### 1. Configure Data for Filters

#### 1.1 Basic Filters (Price and Availability)

No configuration needed. These filters are built into the **Basic Plan** and automatically available.

#### 1.2 Custom Filters (e.g., Color, Skin Type, Material)

You need to create custom metafields for these filters.

**2.1 Create Metafield Definitions**

1. Go to **Settings > Custom Data > Products**.
2. Click **Add definition**.
3. Enter a name like **Color**, **Skin Type**, etc.
4. Set **Namespace and key** (e.g., `custom.color`).
5. Select a content type (e.g., **Single line text** or **List of values**).
6. (Optional) Define predefined values to keep filtering consistent.
7. Click **Save**.

💡 **Advanced:** Shopify also supports more complex metafield structures using the **Metaobject Reference** feature. This allows you to store structured data (like multiple fields per filter option), useful for rich filtering and content reuse.\
🔗 Learn more about Metaobject references

**2.2 Add Metafield Values to Products**

1. Go to **Products** > select a product.
2. Scroll to the **Metafields** section.
3. Fill in the value for your metafield (e.g., **Dry** under "Skin Type").
4. Click **Save**.

***

### 2. Enable Filters in Shopify Search & Discovery

**Use case:** You want to activate standard filters like **Price**, **Availability**, or **Vendor**.

✅ **Recommended for:**

* Quick setup with no extra configuration.
* Stores using built-in Shopify product data.

**📌 Steps:**

1. Open the **Search & Discovery** app in your Shopify Admin.
2. Go to the **Filters** tab.
3. Enable available filters such as:
   * **Availability**
   * **Price**
   * **Product Type**
   * **Vendor**
4. Click **Save**.

### 3. Enable Filters in Simicart

**Use case:** You want to activate the filters you've already enabled in **Search & Discovery** for use in your **Simicart** mobile app.

✅ **Recommended for:**

* Quick activation of filters already configured in **Search & Discovery**.
* Ensuring filters are displayed properly in your mobile app.

**📌 Steps:**

1. Open the **Simicart** mobile app builder configuration.
2. Go to the **Filters** section.
3. The filters you configured in **Search & Discovery** will automatically appear in the list.
4. Simply toggle the filters you want to enable in the mobile app.
5. Click **Save** to apply the settings

***

## ✅ Summary: Filter Types & Use Cases

| **Filter Name**  | **Source Type**   | **Example Use Case**           |
| ---------------- | ----------------- | ------------------------------ |
| **Price**        | Shopify default   | All stores                     |
| **Availability** | Shopify default   | Show in-stock items only       |
| **Vendor**       | Shopify default   | Multi-brand stores             |
| **Color**        | Product metafield | Apparel, accessories, skincare |
| **Skin Type**    | Product metafield | Beauty/skincare                |
| **Material**     | Product metafield | Furniture, home decor          |

***

## 💡 Tips

* **Consistency:** Use consistent values for metafields (avoid **Red** vs **red**).
* **Predefined Lists:** Prefer predefined lists over free text where possible.
* **Clutter:** Limit the number of filters shown to avoid clutter.
* **Enabled Filters:** Only enabled filters in **Search & Discovery** will appear in the mobile app.