# Search result

![](https://docs-assets.foxecom.app/motrix-theme/be819ad3-eecb-4e6f-ab09-8eb6abb495e3.jpg)

Display the products, collections, pages, and blog posts that match a customer's search query.

The search results page appears **after a customer submits a search** from the search bar, such as from the header or Search page. The results update based on the search term and the content available in the store.

## Adjusting search result type

Your store's search functions can return different types of results, such as products, pages, and blog posts. 

To keep your search results as relevant as possible for your customers, you can specify which types of results you want your [online store search](https://help.shopify.com/en/manual/online-store/storefront-search) and [predictive search](https://help.shopify.com/en/manual/online-store/storefront-search/predictive-search) to return. The following settings can be adjusted in [Shopify Search and Discovery app](https://admin.shopify.com/apps/search-and-discovery).

![](https://docs-assets.foxecom.app/motrix-theme/2e27011a-910b-41dc-ab28-9153dbfba2cc.png)

Learn more: [Shopify - adjusting search result type.](https://help.shopify.com/en/manual/online-store/storefront-search/search-and-discovery-modify-search#search-result-types)

## How to customize the Search results page

1. Go to **Online Store > Themes** in Shopify Admin.
2. Find your theme and click **Edit theme**.
3. Open the page selector and select **Search**.
4. Select the **Search result** section from the section list. You can **submit a search** to view the Search results page in your theme editor
5. Adjust the section settings and blocks as needed.
6. **Save** your changes.

<Video src="https://docs-assets.foxecom.app/motrix-theme/a2a4b269-db89-4fe0-9c4b-b329b8ef7e45.mp4" autoPlay="true" loop="true" muted="true" controls="true" />

## Section settings

### Pagination

Control how customers load additional search results.

<Table widths="30%">
  | Setting             | Description                                                      | Options                                                             |
  | ------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------------- |
  | **Pagination type** | Choose how customers navigate through additional search results. | **Numbered page**s, a **Load more** button, or **Infinite** scroll. |
</Table>

<Tabs>
  <Tab title="Number">
    <Video src="https://docs-assets.foxecom.app/motrix-theme/ee6c3ab3-23dc-4cd7-bee7-8c8e5ce4aabe.mp4" autoPlay="true" loop="true" muted="true" />
  </Tab>

  <Tab title="Load more">
    <Video src="https://docs-assets.foxecom.app/motrix-theme/12abf66c-3203-4ccc-a8ad-b48e8205b74e.mp4" autoPlay="true" loop="true" muted="true" />
  </Tab>

  <Tab title="Infinite">
    <Video src="https://docs-assets.foxecom.app/motrix-theme/7fa8ec22-169c-4b6d-ab2c-96f8b0cad717.mp4" autoPlay="true" loop="true" muted="true" />
  </Tab>
</Tabs>

<Hint type="success" title="Tip">
  * **Load more** suits most large catalogs — shoppers keep their place, and the page doesn't grow without limit.&#x20;
  * **Infinite scroll** feels effortless but makes the footer unreachable and gives shoppers no sense of how far through they are.&#x20;
  * **Numbered pages** are worth keeping if customers return to the same page of results repeatedly, which happens on parts catalogs.
</Hint>

### Layout

Control the container width, number of product columns, and spacing between products.

<Table widths="30%">
  | Setting            | Description                                      | Option        |
  | ------------------ | ------------------------------------------------ | :------------ |
  | **Container**      | Choose the width of the search result section.   | Full / Fixed  |
  | **Columns**        | How many products appear across on large screens | 2 - 6 columns |
  | **Items per page** | How many products load before pagination         | 12 - 48       |
  | **Horizontal gap** | Space between cards                              | 0px –100 px   |
  | **Vertical gap**   | Space between rows                               | 0px –100 px   |
</Table>

### Filtering and sorting

<Table widths="30%">
  | Setting                       | Description                                                                                                                                                                                                                | Option                                                                                                   |
  | ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------- |
  | **Enable filtering**          | Shows the filter sidebar beside the grid. <br />Learn how to [set up filters in <u>**Shopify's Search & Discovery**</u> app](https://help.shopify.com/manual/online-store/storefront-search/search-and-discovery-filters). | On / Off                                                                                                 |
  | **Enable sorting**            | Lets shoppers change the sort order.                                                                                                                                                                                       | On / Off                                                                                                 |
  | **Enable card layout switch** | Gives shoppers a grid/list toggle above the products.                                                                                                                                                                      | On / Off                                                                                                 |
  | **Default card layout**       | Which layout the page opens in. Appears when the switch is on.                                                                                                                                                             | Grid / List                                                                                              |
  | **Expand filter groups**      | Which filter groups start open rather than collapsed.                                                                                                                                                                      | Enter the filter groups to expand. Use a comma to separate values. <br /><br />Example: color,size,price |
</Table>

<Tabs>
  <Tab title="Filtering">
    ![](https://docs-assets.foxecom.app/documentation/3eff29e8-4bcc-41ec-9bcc-7db57c54ba12.png)
  </Tab>

  <Tab title="Sorting">
    ![](https://docs-assets.foxecom.app/documentation/0dc486c2-998d-429f-8f96-8e076d10ef7d.png)
  </Tab>

  <Tab title="Card layout switch">
    ![](https://docs-assets.foxecom.app/documentation/f988d73c-5817-43e1-8a1e-9db5e48a8978.png)
  </Tab>
</Tabs>

<Hint type="info">
  The sidebar is a sidebar on large screens only. Below that, it becomes a drawer that shoppers open from a button, so a long filter list doesn't push the products down on a phone.
</Hint>

### Mobile layout

Control the number of product columns and spacing on mobile devices.

<Table widths="30%">
  | Setting            | Description                                                    | Option               |
  | ------------------ | -------------------------------------------------------------- | :------------------- |
  | **Columns**        | Set the number of product columns displayed on mobile devices. | 1 column / 2 columns |
  | **Horizontal gap** | Space between mobile cards                                     | 0px – 100 px         |
  | **Vertical gap**   | Space between mobile rows                                      | 0px – 100 px         |
</Table>

<Columns>
  <Column>
    <Figure>
      <img src="https://docs-assets.foxecom.app/documentation/dbf0eb76-4a79-41ad-8c33-b780a6494e23.png" />

      <Figcaption>
        1-column grid on mobile
      </Figcaption>
    </Figure>
  </Column>

  <Column>
    <Figure>
      <img src="https://docs-assets.foxecom.app/documentation/59b9d57f-53f5-49c6-9fb8-77059eb218ea.png" />

      <Figcaption>
        2-column grid on mobile
      </Figcaption>
    </Figure>
  </Column>
</Columns>

### Appearance

<Table widths="30%">
  | Setting          | Description                                  | Option                |
  | ---------------- | -------------------------------------------- | :-------------------- |
  | **Color scheme** | Applies a theme color scheme to the section. | Select a color scheme |
</Table>

This styles the section, not the product cards. Card design — image shape, badges, what appears under the title — comes from **Theme settings >** [Product cards](https://docs.foxecom.com/motrix-theme/theme-settings/product-cards) and applies everywhere products are listed.

<Hint type="success">
  **Tip:** If your product card aspect ratio is set to **Auto** in theme settings, the collection grid uses square images instead. Rows have to line up, and Auto would give every card a different height.
</Hint>

### Animation

Control how search result items appear when customers load or scroll through the section.

<Table widths="30%">
  | Setting                     | Description                                                                                                                                       | Options                                                                   |
  | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- |
  | **Items**                   | Choose the animation applied when product cards appear.                                                                                           | None / Fade in / Fade up / Fade down / Slide in (left) / Slide in (right) |
  | **Reveal items one by one** | Each item in the list arrives after the one before it, instead of the whole list appearing at once. This setting appear when items **isn't None** | On / Off                                                                  |
  | **Enable preload image**    | Loads the image earlier so it appears faster when the block is near the top of the page.                                                          | On / Off                                                                  |
</Table>

<Tabs>
  <Tab title="Reveal items one by one - On">
    <Video src="https://docs-assets.foxecom.app/motrix-theme/c1d3ae77-4e34-4832-b4ad-f83cbf1160d9.mp4" autoPlay="true" loop="true" muted="true" />
  </Tab>

  <Tab title="Reveal items one by one - Off">
    <Video src="https://docs-assets.foxecom.app/motrix-theme/292c5fa2-6c45-4204-b84e-dacd075b6fa6.mp4" autoPlay="true" loop="true" muted="true" />
  </Tab>
</Tabs>

## Block - Product card

Each product in the search results uses the **Product card** block. Customize the product card separately to control its content and appearance.

[Go to theme settings to customize the product card.](https://docs.foxecom.com/motrix-theme/theme-settings/product-cards)