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

### **Set up search page**

The template includes preset sections and layout to get you started. In the theme editor, you can customize content, settings, and overall page design with theme sections.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Use the **Templates selector** to open **Other > Search**.

   ![](https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2Fgit-blob-d39fe189249c027a42bca4c8e9a266d6dbb4b609%2Feditor-templates-selector.png?alt=media)
2. Under **Template**, click the **Search** section to open the settings.

   > See the available Search page settings below.
3. Click **Save**.

</details>

### Settings reference

In the **Search** template, click the **Search** section to find the following settings.

#### Search

| Setting                      | Description                                                                                                                                                                                                  |
| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Number of columns on desktop | <p>Choose how many search results to show per row on desktop screens: either 3, 4, or 5 columns.<br><br>On smaller browser sizes, the search results may use fewer columns to adapt to the window width.</p> |
| Number of rows on desktop    | Choose how many rows to show on a single page on desktop screens: either 2, 3, or 4 columns.                                                                                                                 |
| Show total number of results | Choose to display how many search results have been found.                                                                                                                                                   |

#### Results list

Search results have two display modes: **Grid** displays results in multiple columns per row; **List** displays one result per row.

| Setting                      | Description                                                                                                                            |
| ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| Enable display mode switcher | Allow visitors to change how products are displayed in the grid. Visitors can click the Grid or List icon next to the sorting options. |
| Default display              | Choose the display mode used when the collection page first loads. Select either Grid or List.                                         |

#### Filtering and sorting

| Setting          | Description                                                                                |
| ---------------- | ------------------------------------------------------------------------------------------ |
| Enable sorting   | Allow customers to sort products by name.                                                  |
| Enable filtering | Allow customers to filter by product options, product type, price, availability, and more. |

#### Filters search

If a filter group has a long list of possible filter values, then you can help customers more easily find what they're looking for by adding a filter search to the group. This allows customers to enter a search term to refine the filter values that are shown.

| Setting              | Description                                                                                                                      |
| -------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
| Filter search groups | Filter group names to enable filter search for. To enable on multiple filter groups, use a comma-separated list of filter names. |

#### Filters layout

| Setting                           | Description                                                                                                                                                                                      |
| --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Collapse filter sidebar           | Hide the filter sidebar when the search page loads. Visitors can click the Filter button to reveal the sidebar.                                                                                  |
| Collapse filter groups on desktop | Hide values of filter groups until visitors click to reveal them.                                                                                                                                |
| Truncate filter list              | Choose to limit how many filter values to show in filter groups. Visitors can click to view more.                                                                                                |
| Truncate filter list amount       | Select the number of filter values to show before hiding additional values.                                                                                                                      |
| Show swatch filters               | If you have [Variant swatches](https://github.com/fluorescent/kb-cornerstone/blob/main/pages/templates/broken-reference/README.md) enabled, choose to display those variant options as swatches. |
| Show chip filters                 | Choose to display chips instead of variants names.                                                                                                                                               |
| Chip layout                       | Choose to display chips in 2 column grid. Select Natural to display a layout that adapts to the natural length of the chips.                                                                     |

#### Pagination

| Setting    | Description                                                                                                                                                                                                                                                                                                                                                                    |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Pagination | <p>Select one of three pagination styles for viewing additional results.<br><br><strong>Infinite</strong>: Rows of results automatically load as customers scroll down the page.<br><strong>Click to load</strong>: Click a "Load more" button to reveal more results on the page.<br><strong>Paginated</strong>: Click to navigate between multiple pages of all results.</p> |

#### Section style

| Setting          | Description                                                                                                                                                                                                  |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Top spacing      | Increase or decrease the amount of space above the section.                                                                                                                                                  |
| Bottom spacing   | Increase or decrease the amount of space below the section.                                                                                                                                                  |
| Enable animation | Choose whether to display visual effects when scrolling, hovering, or interacting with the section. See the [Animation guide](https://help.fluorescent.co/cornerstone/theme-styles/animation) to learn more. |

> **Related links**

\\

***

> **Related links**
>
> [Templates](https://help.fluorescent.co/cornerstone/pages/templates)
