> 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/filters-and-search.md).

# Filters & search

Configure collection filters in Avante with the Search & Discovery app, choose filter layouts, enable swatches, and customize predictive search.

### Setting up filters

In Shopify OS 2.0 themes like Avante, adding variants or tags to your products doesn't make filters appear automatically on collection pages. Filtering is managed centrally through Shopify's native Search & Discovery app.

{% stepper %}
{% step %}
Install the free [**Search & Discovery**](https://apps.shopify.com/search-and-discovery) app from the Shopify App Store.
{% endstep %}

{% step %}
Go to the app → **Filters** → click **Add filter** (you can choose availability, price, vendor, product type, or specific metafields).

<figure><img src="https://795663372-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6DraMvJNYYlFJqlho1aV%2Fuploads%2FzMcKfDtB8XwJvJM88rO9%2FScreenshot%202026-06-30%20at%2014.54.11.png?alt=media&amp;token=33052639-f7c9-4dd0-9457-eed8e330a811" alt=""><figcaption></figcaption></figure>

Once added, filters will automatically appear on your collection and search pages. For more details, see [Shopify's official guide on search and discovery filters](https://www.google.com/url?sa=E\&q=https%3A%2F%2Fhelp.shopify.com%2Fen%2Fmanual%2Fonline-store%2Fstorefront-search%2Fsearch-and-discovery-filters).

{% hint style="warning" icon="lightbulb" %}
**Good to know:** Shopify natively hides a filter if your products lack variation. For example, if all products in a collection only come in size "M", the Size filter won't display because selecting it wouldn't filter anything out.
{% endhint %}
{% endstep %}
{% endstepper %}

***

### Changing the filter layout

You can choose how filters are presented on the page (as a sidebar, a top bar, or a slide-out drawer). To change this:

1. Open Theme Editor and navigate to the **Default collection** template.
2. Click on the **Collection page** (or Product grid) section.
3. Find the **Desktop filter style** setting and choose between **Horizontal**, **Vertical**, or **Drawer**.

<figure><img src="https://795663372-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6DraMvJNYYlFJqlho1aV%2Fuploads%2FsZgE8Un6jnrgF49VhUxm%2FScreenshot%202026-06-30%20at%2016.10.52.png?alt=media&amp;token=2c5cf57a-75d7-4256-aac8-6506a2036116" alt=""><figcaption></figcaption></figure>

***

### Filter swatches

To make your filters more visual, you can display color or material options as visual swatches or image thumbnails instead of standard checkboxes.

1. Go to **Theme settings** → **Filter swatches**.
2. Under **Color swatches** or **Thumbnail swatches**, enter the exact name of your filter option (e.g., `Color`, `Size`, or `Material`). You can add up to 3 different labels.
3. Avante will automatically render these filters as visual pills or images.

<figure><img src="https://795663372-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6DraMvJNYYlFJqlho1aV%2Fuploads%2FqpuiZE1WO7HERW9wagvh%2FScreenshot%202026-06-30%20at%2016.17.46.png?alt=media&amp;token=8f40075a-b642-440d-89bf-12ac667552e7" alt=""><figcaption></figcaption></figure>

***

### Quick search

Avante features a predictive search drawer that suggests products, collections, and blog posts as the customer types.

<figure><img src="https://795663372-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6DraMvJNYYlFJqlho1aV%2Fuploads%2F2pzLuaCRorm1WL8PduYY%2FScreenshot%202026-06-30%20at%2016.27.19.png?alt=media&amp;token=470af840-7c71-4f93-a2e2-da057c0617d8" alt=""><figcaption></figcaption></figure>

To enable and configure it, go to **Theme settings** → [**Quick search**](/docs/avante-themes/theme-settings/quick-search.md). Here you can adjust the result display (grid or list) and enable key features like:

* **Popular searches:** You can connect a specific navigation menu to show curated promotional links (like "New Arrivals" or "Summer Sale") inside the search drawer. These links appear before the customer even starts typing, acting as a great conversion tool.
* **'All results' button:** Customize the text for the button that links to the full search results page.

***

### Search page

The main `/search` page uses a flexible product grid that is very similar to your collection pages, supporting the same filter layouts and product card features.

<figure><img src="https://795663372-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6DraMvJNYYlFJqlho1aV%2Fuploads%2F8nBaxv73FYiIVBud0FTj%2FScreenshot%202026-06-30%20at%2016.33.02.png?alt=media&amp;token=d5d81418-6471-4627-8b2c-835d3f4f57f5" alt=""><figcaption></figcaption></figure>

For full instructions on how to configure its layout, adjust the grid, and manage blog post results, check out our detailed guide on the [**Search template**](/docs/avante-themes/templates/search-template.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/filters-and-search.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.