> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/customize-your-pages/search-page.md).

# Search page

The **Search page** shows the results after a shopper types a query in the header search box and presses enter. It is opened by visitors who already know what they want, which makes it one of the highest intent pages in the store: the faster they find the product, the sooner they buy.

The page is built from the same product grid used on collection pages, so you control how many products appear, how many fit per row, how shoppers page through the results, and whether they can sort and filter what came back.

<figure><img src="/files/1ezChdWKcccsnORjg7ed" alt=""><figcaption></figcaption></figure>

## How to customize your Search Results section? <a href="#how-to-customize" id="how-to-customize"></a>

The search template ships with the theme, so there is no page to create in the Shopify admin.

{% hint style="success" %}
**Steps:**

1. Go to **Online Store > Themes > Customize**.
2. Open the template selector at the top of the editor.
3. Select **Search**.
4. In the left sidebar, add the **Product grid** section.
5. Make your changes, then click **Save**.
   {% endhint %}

*Result:* the preview shows a results page. Run a real search in the preview so you are styling a page with products on it.

## Section settings <a href="#section-settings" id="section-settings"></a>

### General Settings <a href="#general-settings" id="general-settings"></a>

<figure><img src="/files/pLGo7gsYiDYXMRSHk89y" alt=""><figcaption></figcaption></figure>

| Setting                        | Description                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Section width**              | <p>How far the results grid stretches across the screen.</p><ul><li><strong>Stretch width</strong>: the grid runs close to the screen edges whatever the display size.</li><li><strong>Fixed width</strong>: the grid lines up with the rest of the store, using the width set in <strong>Theme settings > Layout</strong>.</li><li><strong>Full width</strong>: the section fills the whole screen and rescales itself to fit it.</li></ul> |
| **Items to show per page**     | How many products load before the shopper has to page on. A low number loads faster on phones, a high number lets shoppers scan more at once. Minimum: 4. Maximum: 24                                                                                                                                                                                                                                                                        |
| **Columns per row on desktop** | How many products sit side by side on a computer screen. Fewer columns make each image larger, more columns put more choice on the first screen. Minimum: 2. Maximum: 5.                                                                                                                                                                                                                                                                     |
| **Column gap**                 | <p>The space between products in the grid.</p><ul><li><strong>Small</strong>: keeps the grid compact so more results are visible.</li><li><strong>No gap</strong>: products touch, giving a dense editorial look.</li><li><strong>Medium</strong>: the balanced default.</li><li><strong>Large</strong>: lets each product breathe, which suits a small catalog.</li></ul>                                                                   |
| **Pagination type**            | <p>How a shopper reaches results beyond the first batch.</p><ul><li><strong>Page number</strong>: numbered pages, so a shopper can return to the same place later.</li><li><strong>Load more button</strong>: adds the next batch on click, keeping the footer reachable.</li><li><strong>Infinite scroll</strong>: loads more as the shopper scrolls, best for browsing but it pushes the footer out of reach.</li></ul>                    |

### Filtering and sorting <a href="#filtering-and-sorting" id="filtering-and-sorting"></a>

<figure><img src="/files/pFVxgoDuG3R47IALyy6c" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
To customize filters in your store, you will need the [Shopify Search & Discovery](https://apps.shopify.com/search-and-discovery) app.

This app not only enables you to tailor your filters but also grants you the capability to personalize search results and product recommendations, providing you with greater control over how customers explore and find your products.

Discover [how to customize filters using the app.](https://help.shopify.com/en/manual/online-store/search-and-discovery/filters)
{% endhint %}

| Setting                     | Description                                                                                                                                                                                                           |
| --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Enable sorting**          | Lets shoppers reorder the results, for example by price or by newest. Worth keeping on once a search can return more than one screen of products.                                                                     |
| **Enable filtering**        | Shows the filters you configured in the Shopify admin, so a shopper can narrow a broad search down to a size, color, or price range instead of scrolling.                                                             |
| **Show product** **counts** | Prints the number of matching products next to each filter, so shoppers can see which choices still lead somewhere before they click.                                                                                 |
| **Desktop filter layout**   | Where the filters sit on a computer screen: **Vertical** keeps them in a column beside the results so shoppers see the choices at all times, **Drawer** hides them behind a button and gives the grid the full width. |

{% tabs %}
{% tab title="Vertical" %}

<figure><img src="/files/jOCij4H1y2PD5Hwpya8x" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Drawer" %}

<figure><img src="/files/PCvXQu2jCGbBrQyVMrGk" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### Section padding <a href="#section-padding" id="section-padding"></a>

| Setting    | Description                                                                                             |
| ---------- | ------------------------------------------------------------------------------------------------------- |
| **Top**    | Adds space above the results. Increase it to separate the first row from the search box and the header. |
| **Bottom** | Adds space between the last row and the footer, so pagination does not sit against the links below.     |

### What changes on the storefront <a href="#what-changes" id="what-changes"></a>

* A shopper who searched sees a full results grid with the same product cards used elsewhere, not a plain list of links.
* Sorting and filtering decide whether a broad search stays usable, since without them the shopper has to scroll through everything that matched.

### Related pages <a href="#related-pages" id="related-pages"></a>

* [Search](/velare/customize-your-pages/overlay-group/search.md): the search panel that opens from the header before a shopper reaches this page
* [Search behavior](/velare/customize-your-pages/search-behavior.md): the theme settings behind what the search box suggests
* [404 page](/velare/customize-your-pages/404-page.md): where visitors who mistyped an address end up, often on their way to search


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://uxsmart.gitbook.io/velare/customize-your-pages/search-page.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.