> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/triumph/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/triumph/template/sections/filter-quick-search.md).

# Filter Quick Search

Provides a tabbed, multi-field search form that lets customers narrow products by picking values one after another.

{% hint style="info" %}
Available since v3.0.0
{% endhint %}

*Shared Settings*:

* [<mark style="color:$primary;">Section layout</mark>](/triumph/template/shared-settings/section-layout.md)
* [<mark style="color:$primary;">Section mobile layout</mark>](/triumph/template/shared-settings/section-mobile-layout.md)
* [<mark style="color:$primary;">Divider line</mark>](/triumph/template/shared-settings/divider-line.md)
* [<mark style="color:$primary;">Background</mark>](/triumph/template/shared-settings/section-background.md)
* [<mark style="color:$primary;">Colors</mark>](/triumph/template/shared-settings/colors.md)

*Blocks:*

* [<mark style="color:$primary;">Filter group</mark>](/triumph/template/sections/filter-quick-search/filter-group.md)
  * [<mark style="color:$primary;">Filter</mark>](/triumph/template/sections/filter-quick-search/filter-group/filter.md)
  * [<mark style="color:$primary;">Vendor filter</mark>](/triumph/template/sections/filter-quick-search/filter-group/vendor-filter.md)

***

**Heading**

* **Size**\
  Controls the heading size of the section: Small, Medium, Large.
* **Alignment**\
  Aligns the tab headings and description: Left, Center.
* **Underline active tab**\
  Adds an animated underline beneath the currently selected tab.

***

**Filter group**

* **Layout** – Horizontal or Vertical arrangement of the fields. Works only on desktop.\
  On mobile layout always is vertical.

{% tabs %}
{% tab title="Horizontal" %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FrVd4IYIeIaJnwHx1rJMW%2Fqs_h.png?alt=media&amp;token=27973ad4-f371-4da2-ac36-01b98b892e99" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Vertical" %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FhYDng03mB3Tju3Lb08k3%2Fqs_v.png?alt=media&amp;token=5bcc26cb-0595-444c-8ea1-61d6c7e375a3" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

* **Width on desktop**\
  Width of the form as a percentage of the section.
* **Wrap breakpoint** – *(Horizontal layout only.)*\
  Below this width, the fields wrap into rows instead of staying in one line.
* **Use metaobjects**\
  See below.

**Use metaobjects**

This toggle controls how *every* field in the section gets its dropdown values — it applies to all groups and fields at once, not per field.

* **On** *(default)* – Each field builds its option list from a [Metaobject](https://help.shopify.com/en/manual/custom-data/metaobjects) definition. This shows the *full* list of possible values, **up to 250**, regardless of current stock — including values with zero matching products right now, which are greyed out (or hidden, see Hide unavailable options) rather than removed from the list.
* **Off** – Each field instead reads its options directly from a matching filter in **Settings → Search & Discovery → Filters**. No metaobject setup needed, but two platform limits apply here:
  * Shopify's native filters only ever list values that currently have **at least one matching product**. A value with zero matches doesn't appear greyed out — it doesn't appear in the list at all.
  * The list itself is capped at **100 values**, even if more than 100 distinct values exist among your products.

> \[!] Both the 250-value cap (On) and the 100-value cap plus "no products = not listed" behavior (Off) are Shopify platform limits and cannot be changed by the theme.

***

{% tabs %}
{% tab title="Desktop" %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FwdV9gyGexDZYAjatyKG9%2Fqs1.png?alt=media&amp;token=85b8a128-df8e-4915-b0b8-411ac0e9f214" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2F5aGWs4chOsoySMpQCEv0%2Fqs2.png?alt=media&amp;token=ab49ad57-f7d8-4683-a33e-6f6255fe484f" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}