> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/stiletto/pages/templates/search-page.md).

# 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.

<img src="/files/OnQ3MxSXhE0rVFijSBET" alt="Search page on desktop and mobile" width="563">

&#x20;

<img src="/files/j669NAuw9SI8QDXL5pYa" alt="Filter panel on search page" width="563">

<h2 align="center">Set up search results grid</h2>

***

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

<sub><mark style="color:$info;">Click Search page section to find settings<mark style="color:$info;"></sub>

<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 %}

<sub><mark style="color:$info;">Click Search page section to find settings<mark style="color:$info;"></sub>

<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)