# Search page

The **Search page** appears when visitors submit a search using the search bar. You can customize the layout and results styles, and enable sort and filter options.

![Search page on desktop and mobile](/files/OnQ3MxSXhE0rVFijSBET)

![Filter panel on search page](/files/j669NAuw9SI8QDXL5pYa)

## Set up search results grid

***

All search results appear in a grid. You can customize the layout

`Click Search page section to find settings`

<table><thead><tr><th width="238">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Number of rows on desktop</mark></td><td>Set the maximum number of products to display per page: <strong>3</strong> to <strong>10</strong>.</td></tr><tr><td><mark style="color:blue;">Number of columns on desktop</mark></td><td>Select the number of search results to show per row on desktop: <strong>3</strong>, <strong>4</strong>, or <strong>5</strong>.</td></tr><tr><td><mark style="color:blue;">Number of columns on mobile</mark></td><td>Select the number of search results to show per row on mobile: <strong>1</strong> or <strong>2</strong>.</td></tr><tr><td><mark style="color:blue;">Show total number of results</mark></td><td>Display the total number of results listed. Ex: "You’re viewing 1-15 of 34 results"</td></tr><tr><td><mark style="color:blue;">Pagination</mark></td><td>Choose how customers navigate additional rows of products. Either Infinite, Click to load, or Paginated.</td></tr></tbody></table>

## Set up filtering and sorting

***

Change the layout and apperance of the filter and sort menus.

{% hint style="success" %}
You can customize search results with Shopify's [Search & Discovery app](https://apps.shopify.com/search-and-discovery). Create custom filters, select result types, and add "synonym groups" to show relevant results. See Shopify's [App guide](https://help.shopify.com/en/manual/online-store/search-and-discovery) to learn more.
{% endhint %}

`Click Search page section to find settings`

<table><thead><tr><th width="282">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Enable sorting</mark></td><td>Allow customers to sort search results by relevance or price.</td></tr><tr><td><mark style="color:blue;">Enable filtering</mark></td><td>Allow customers to filter search results by product options, type, price, availability, and more.</td></tr><tr><td><mark style="color:blue;">Enable sticky filter bar on desktop</mark></td><td>Fix the filter bar to the top of the page to keep visible when scrolling.</td></tr><tr><td><mark style="color:blue;">Collapse filter groups on mobile</mark></td><td>Show filter group tabs that reveal options when clicked.</td></tr><tr><td><mark style="color:blue;">Show swatch filters</mark></td><td><p>Show product swatches in the filter bar. Swatches are enabled in Theme settings > Product.<br><br></p><p>This feature is separate from Shopify's <a href="https://help.shopify.com/en/manual/online-store/search-and-discovery/filters#visual-filters)">Visual filters</a>, which allows you to add visual swatches to filter options, separately from product variants.</p></td></tr><tr><td><mark style="color:blue;">Show chip filters</mark></td><td>Show product chips in the filter bar. Chips are enabled in Theme settings > Product.</td></tr><tr><td><mark style="color:blue;">Chip layout</mark></td><td>Choose how chips are displayed in the filter bar: 2 Columns, 3 Columns, or Natural.</td></tr></tbody></table>

\\

***

> **Related links**
>
> [Templates](/stiletto/pages/templates.md)


---

# Agent Instructions: 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:

```
GET https://help.fluorescent.co/stiletto/pages/templates/search-page.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.