# 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](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-135214059946563a63e4bcd5d488166cba05a9c1%2Fsearch-page.jpeg?alt=media)

![Filter panel on search page](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-4856fb78ce5ee7c5817f412ddd27ec47b2fb9fb2%2Fsearch-page-filter.jpeg?alt=media)

## 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](https://help.fluorescent.co/stiletto/pages/templates)