> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/avante-themes/features-and-advanced-setup/quick-filter.md).

# Quick filter

Quick filter puts a row of tabs under the collection heading — links to other collections, or the values of a single filter in one click.

Most shoppers never open the filter drawer. They scroll, they do not find what they came for, and they leave. Quick filter puts the one choice that actually matters — the colour, the size, the sub-category — in a row of tabs directly under the collection heading, where it is impossible to miss.

It lives in the **Collection navigation** group of the **Collection page** section, so it belongs to the Default collection template and applies to every collection built on it.

***

### How to turn it on

{% stepper %}
{% step %}

#### Open the collection template

In the theme editor use the page selector at the top, choose **Collections → Default collection**, and open the **Collection page** section.
{% endstep %}

{% step %}

#### Find Collection navigation

Scroll to the **Collection navigation** group and turn **Enable** on. It is off by default.
{% endstep %}

{% step %}

#### Choose the navigation type

**Collections** builds tabs that link to other collections. **Quick filter** builds tabs out of the values of one filter in the current collection.
{% endstep %}

{% step %}

#### Give that type what it needs

Collections needs a list of collections. Quick filter needs the name of the filter.
{% endstep %}
{% endstepper %}

***

### Collections

Pick the collections in the **Collections** setting and each one becomes a tab, labelled with its title and followed by the number of products it holds. The collection the shopper is currently on is shown as plain text instead of a link, so it reads as the active tab.

This type has no other requirements — it works with any filter style, and with filtering turned off altogether.

{% hint style="info" %}
To show sub-collections instead of one hand-picked list, connect a collection metafield holding a list of collections as a dynamic source on the **Collections** setting. Each collection then carries its own children and the tabs change from collection to collection on their own.
{% endhint %}

***

### Quick filter

This type takes one of the collection's filters and lays its values out as tabs. Clicking a tab applies the filter, clicking the active tab removes it, and the grid updates without a page reload.

Type the filter's name into **Filter label** exactly as it appears in the filter drawer. Capitalisation and stray spaces do not matter, the wording does. Four conditions have to be met or the tabs do not render at all:

* **Enable filtering and sorting** is on.
* **Desktop filter style** is set to **Drawer**.
* **Filter label** matches a filter that exists on this collection.
* The collection holds more than one product.

{% hint style="warning" %}
Only list filters work — the kind that shows values to tick. Price ranges and similar filters are skipped, so a **Filter label** pointing at one of those produces nothing and gives no warning in the editor.
{% endhint %}

Values with nothing left in them are greyed out and not clickable, unless that value is the one currently applied. The number next to a tab is the count of products behind it.

***

### Images on hover

**Show images on hover** is on by default, and the two navigation types take their images from completely different places. Nothing here is shared between them.

**Collections** uses the collection image — the image set on the collection itself in **Shopify Admin → Products → Collections**. This type never looks in Files, and file names make no difference to it.

**Quick filter** is the type that reads from Files. It looks for a file in **Shopify Admin → Content → Files** named after the filter value: the value in lowercase, with spaces and punctuation replaced by underscores. The `.jpg` → `.png` → `.webp` order applies to this type only — the theme tries `.jpg` first, then `.png`, then `.webp`. So the value *Hand gloves* looks for `hand_gloves.jpg`, then `hand_gloves.png`, then `hand_gloves.webp`.

{% hint style="info" %}
A missing file breaks nothing — the tab simply has no hover preview. That makes it safe to illustrate only the values worth illustrating and leave the rest as text.
{% endhint %}

***

### Customization ideas

* **Seasonal entry points.** Point the Collections type at four seasonal collections and change the list when the season turns — no navigation edit, no theme code.
* **Colour as the headline choice.** For a catalogue people shop by colour, a Quick filter on *Color* with hover images turns the tab row into a swatch strip.
* **A quieter look.** Clear the **Divider** field and raise **Tab heading size** for a row that reads as navigation rather than as a filter.

***

### Settings

<details>

<summary>All Collection navigation settings</summary>

**Enable** — off by default.

**Navigation type** — **Collections** or **Quick filter**.

**Collections** — the list of collections shown as tabs. Collections type only.

**Filter label** — the name of the filter to turn into tabs. Quick filter type only.

**Divider** — the character drawn between tabs, `/` by default. It never appears after the last tab. Clear the field for no divider.

**Tab heading size** — the type size of the tab labels.

**Show product quantity** — on by default. Shows the number of products next to each tab.

**Show images on hover** — on by default. Collections take the collection image, Quick filter takes a file from Files.

**Image ratio** — **Original** (default), **Square (1:1)**, **Portrait (4:5)**, **Narrow portrait (2:3)**, **Traditional (4:3)** or **Landscape (3:2)**.

**Corner radius** — the rounding of the hover image.

</details>

***

### Best practices

* Keep the row short. Four to eight tabs read as navigation; twenty read as a wall and push the products below the fold.
* The row scrolls sideways on narrow screens, so put the tabs people use most at the start.
* Quick filter is a shortcut, not a replacement for the filter drawer. Leave filtering on so shoppers can still combine conditions.
* If a filter request fails, the theme shows a short error with a **Retry** button in place of the results. Check it on a slow connection before launch.

***

### Related

* [Default collection](/docs/avante-themes/templates/default-collection.md)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://staylime.com/docs/avante-themes/features-and-advanced-setup/quick-filter.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.