> 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/eclipse/pages/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.

{% 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="/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme">/pages/3wq6hFMr3k1BDOHIgjqZ#color-scheme</a></td><td><a href="/files/OZ4h4v0qfTnncw43MKk6">/files/OZ4h4v0qfTnncw43MKk6</a></td></tr><tr><td><strong>Section width</strong></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#section-width">/pages/3wq6hFMr3k1BDOHIgjqZ#section-width</a></td><td><a href="/files/lMLsRWOpgxDLC0CvtnAt">/files/lMLsRWOpgxDLC0CvtnAt</a></td></tr><tr><td><strong>Section padding</strong></td><td><a href="/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding">/pages/3wq6hFMr3k1BDOHIgjqZ#section-padding</a></td><td><a href="/files/3ddmAtuVNo9MtYTf38ov">/files/3ddmAtuVNo9MtYTf38ov</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>