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

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

## Customize page styles

***

Click the page section to edit the **general styles**, available for all page templates:

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><strong>Color sYcheme</strong></td><td><a href="../../sections/overview/section-styles#color-scheme">#color-scheme</a></td><td><a href="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2F3XSH2rw2Xl7gRoMb34up%2Fsection-colors.jpg?alt=media&#x26;token=ccb376a8-d35b-4822-9bb0-5de9a0eb5ae6">section-colors.jpg</a></td></tr><tr><td><strong>Section width</strong></td><td><a href="../../sections/overview/section-styles#section-width">#section-width</a></td><td><a href="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FDCCYMn4K3pSbVR42zVAF%2Fsection-width.jpg?alt=media&#x26;token=68dd352f-bb69-4220-87a0-6a1c733d909c">section-width.jpg</a></td></tr><tr><td><strong>Section padding</strong></td><td><a href="../../sections/overview/section-styles#section-padding">#section-padding</a></td><td><a href="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FoZCVax7FX1rLehRaYU5Y%2Fsection-padding.jpg?alt=media&#x26;token=3dbb23bd-4ab6-4874-8834-941a671e5cec">section-padding.jpg</a></td></tr></tbody></table>

## Set up search results grid

***

`Click Search page section to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Products per page</mark></td><td>Set the maximum number of products to display per page.</td><td><strong>1-50</strong> <em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 20</mark></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.</td><td><strong>2</strong><br><strong>3</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>4</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.</td><td><strong>1</strong><br><strong>2</strong> <em><mark style="background-color:yellow;">Default</mark></em></td></tr><tr><td><mark style="color:blue;">Show total number of results</mark></td><td>Display the total number of results listed.</td><td></td></tr></tbody></table>

## Set up filtering and sorting

***

`Click Search page section to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Enable sorting</mark></td><td>Allow customers to sort results.</td><td></td></tr><tr><td><mark style="color:blue;">Enable filtering</mark></td><td>Allow customers to filter by product options, product type, price, availability, and more.</td><td></td></tr><tr><td><mark style="color:blue;">Show sticky filter and sort button</mark></td><td>Allow customers to filter results by type, price, availability, and more.</td><td></td></tr><tr><td><mark style="color:blue;">Filter group default</mark></td><td>Choose to hide values of filter groups until visitors click to reveal them.</td><td><strong>First opened</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>All open</strong><br><strong>All closed</strong></td></tr><tr><td><mark style="color:blue;">Color swatch layout</mark></td><td>Choose how to display color swatch filter options.</td><td><strong>Compact</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Expanded</strong></td></tr></tbody></table>