> 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/templates/search-template.md).

# Search template

Every search query on your store lands on this page. Configure it to match your collection page layout — same grid, same filters, same product cards — so customers get a consistent experience whether they browse or search.

{% hint style="info" %}
**Theme Editor → page selector → Search**
{% endhint %}

<figure><img src="/files/nOAifcKDLqGMyVMEtbda" alt=""><figcaption></figcaption></figure>

***

### Search results

The Search results section controls everything on the `/search` page: the filter panel, product grid layout, and what appears on each result card.

<figure><img src="/files/LTOM2H8oBlamkVA24hyP" alt=""><figcaption></figcaption></figure>

#### **Filters**

**Enable filtering and sorting** — activates the filter panel and sorting dropdown. The actual filter options (size, color, price range, etc.) are set up separately in the **Shopify Search & Discovery app**, not in the Theme Editor.

{% hint style="info" %}
Search filters use the same configuration as collection filters in the Search & Discovery app. If you've already set up filters for your collections, they apply to search results automatically.
{% endhint %}

**Enable availability toggle** — adds an "In stock only" toggle above the results, independent of the main filter panel.

<figure><img src="/files/W3q0eDeSY3Yi1kBqZDwW" alt=""><figcaption></figcaption></figure>

**Desktop filter style** — three options that behave differently depending on the store's navigation layout:

| Style          | Behavior                                                                                                       |
| -------------- | -------------------------------------------------------------------------------------------------------------- |
| **Horizontal** | Filter bar spans across the top of the grid                                                                    |
| **Vertical**   | Filters appear in a sidebar on the left — automatically switches to Drawer in sidebar-based navigation layouts |
| **Drawer**     | Filters open in a sliding panel. Default on mobile regardless of the desktop setting                           |

**Drawer button style** — visual style of the filter button: **Solid**, **Outlined**, or **Link**.

**Tabs always open** — enter filter names (e.g., `Size, Color`) to keep those tabs permanently expanded in Drawer and Vertical styles. Separate names with commas.

**Description of filters with 'AND' operator** — adds a short label (e.g., "Match all") explaining to customers that selecting multiple values within a filter shows only products matching all of them. [Learn more about AND filter behavior.](https://help.shopify.com/en/manual/online-store/search-and-discovery/filters#filter-behavior)

<figure><img src="/files/J4Gb7Qkg7oUbHs93Ja0G" alt=""><figcaption></figcaption></figure>

#### **Results grid**

**Infinite scroll** — controls navigation at the bottom of the results list:

| Mode        | Behavior                                                                  |
| ----------- | ------------------------------------------------------------------------- |
| **Disable** | Classic numbered pagination                                               |
| **Button**  | "Load more" button reveals the next batch of results                      |
| **Auto**    | True infinite scroll — results load automatically as the customer scrolls |

**Grid type** — Three columns or Four columns.

**Grid gap → Custom** — switch from Default to Custom to set independent column and row gaps for desktop and mobile separately.

<figure><img src="/files/zCpScg4QlMIrpu0oCjep" alt=""><figcaption></figcaption></figure>

#### **On hover**

Controls what happens when a customer hovers over a product card:

| Option            | Behavior                                       |
| ----------------- | ---------------------------------------------- |
| **Second image**  | Shows the second product image                 |
| **Slider**        | Slides through all product images              |
| **Hover gallery** | Shows a row of image thumbnails below the card |
| **Nothing**       | No hover interaction                           |

**Enable 'Add to cart' button** — shows a quick add button on the card. If the product has multiple variants, clicking it opens a Quick View popup for variant selection before adding to cart.

**Enable 'Quick view' button** — opens a product popup with full details without navigating away from the search page.

<figure><img src="/files/yjzOHBVmL5SqNzgKMABk" alt=""><figcaption></figcaption></figure>

#### **Product card**

Most settings here mirror the Collection template. Non-obvious ones:

**Show short description** — displays the product subtitle on the card. Requires setting up the `Product subtitle` metafield in **Admin → Settings → Metafields and metaobjects → Products**. See [Product subtitle](/docs/avante-themes/features-and-advanced-setup/product-subtitle.md).

**Enable color pills** — shows color variant swatches directly on the product card. Requires color pills to be configured in Theme Settings → [Variant selector](/docs/avante-themes/theme-settings/variant-selector.md).

**Show pickup availability** — displays in-store pickup status on the product card. Requires retail locations configured in Shopify.

<figure><img src="/files/bcKzXI5QsdzK3bWL6uON" alt=""><figcaption></figcaption></figure>

#### **Blog post**

Search results include more than just products — blog articles that match the query appear in the same grid alongside products and pages. This is Shopify's native behavior; you can't filter article results separately from product results.

**Show image** — toggles the article thumbnail on the card.

**Show date / Show author / Show number of comments** — metadata displayed below the article title on the card.

<figure><img src="/files/trBliNr87zoVjbC1Lw7L" alt=""><figcaption></figcaption></figure>


---

# 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 dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://staylime.com/docs/avante-themes/templates/search-template.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.
