# Search results

![image](https://docs-assets.foxecom.app/pebble-theme/Fox-BG%20Light_M3Vr7uex.jpg)

## How to edit search results page

1. In the theme editor (**Customize**), open the template selector.
2. Select **Search.**
3. On the left-side bar, select **Search results.**
4. Make necessary changes **> Save.**

You can add any section available in the [theme sections.](https://docs.foxecom.com/pebble-theme/theme-sections/overview) However, there are two sections designed specifically for the Search page, including:

### Search section

| Setting            | Description                                          |
| ------------------ | ---------------------------------------------------- |
| **Container**      | Choose between a full-width or fixed-width layout.   |
| **Alignment**      | Set the content alignment to Left, Center, or Right. |
| **Top padding**    | Adjust the spacing above the section.                |
| **Bottom padding** | Adjust the spacing below the section.                |

#### Heading

You can choose the size for the page title, adjust its color, HTML tag, and also control the block’s padding in the padding settings.

| Setting                              | Description                                                            |
| ------------------------------------ | ---------------------------------------------------------------------- |
| **Heading**                          | Enter the heading text to display or connect a dynamic source.         |
| **Preset**                           | Choose a predefined heading style or select Custom for manual styling. |
| **Font** *(Custom only)*             | Choose the theme font for the heading.                                 |
| **Font weight** *(Custom only)*      | Adjust the heading font weight.                                        |
| **Font size** *(Custom only)*        | Adjust the heading size on desktop.                                    |
| **Font size mobile** *(Custom only)* | Adjust the heading size on mobile.                                     |
| **Line height** *(Custom only)*      | Adjust the spacing between lines of heading text.                      |

#### Search input

You can hide/show the search bar and adjust its basic layout according to your preference.

| Setting          | Description                                              |
| ---------------- | -------------------------------------------------------- |
| **Width**        | Set the search input width to Fill or Custom on desktop. |
| **Custom width** | Adjust the search input width when Custom is selected.   |
| **Width mobile** | Set the search input width to Fill or Custom on mobi     |

### Search results section

| Setting                   | Description                                                                  |
| ------------------------- | ---------------------------------------------------------------------------- |
| **Container**             | Choose a full-width or fixed-width layout for the search results.            |
| **Items per page**        | Set the number of products shown on each search results page.                |
| **Horizontal gap**        | Adjust the horizontal spacing between product cards.                         |
| **Vertical gap**          | Adjust the vertical spacing between product rows.                            |
| **Enable filtering**      | Show filtering options for the search results.                               |
| **Enable sorting**        | Allow customers to sort the search results.                                  |
| **Grid layout control**   | Let customers change the product grid layout.                                |
| **Expand filter groups**  | Enter filter groups that should be expanded by default, separated by commas. |
| **Mobile horizontal gap** | Adjust the horizontal spacing between products on mobile.                    |
| **Mobile vertical gap**   | Adjust the vertical spacing between product rows on mobile.                  |

<Hint type="info">
  You can go to **Theme Settings > Product cards** to customize and personalize how your product cards look and behave to perfectly match your brand.

  *Learn more:* [*Product cards*](https://docs.foxecom.com/pebble-theme/theme-settings/product-cards)
</Hint>

In the settings of the **Search result** section, you can also turn on and control **Filtering & Sorting**, in addition to the basic settings for adjusting the layout of the section.

*To customize filters, you can read more:*[ *How to customize Filters*](https://docs.foxecom.com/pebble-theme/collections-and-products/collection-page/main-collection#how-to-customize-filters)

### How to customize search results

To customize **search results and search suggestions**, you can use [**Shopify’s Search & Discovery app**](https://apps.shopify.com/search-and-discovery).

Steps:

1. Install the **Shopify Search & Discovery** app on your store.
2. Open **Search & Discovery > Product boosts**.
3. Add the search terms you want to use for the products you’d like to boost.
4. Go to **Settings** to configure your **Search relevance** preferences.

*To customize search results,* [*refer to Shopify official documentation*](https://help.shopify.com/manual/online-store/storefront-search/search-and-discovery-modify-search)*.*

![](https://docs-assets.foxecom.app/pebble-theme/144e85bb-ee3e-4010-931f-b6431631bdbe.png)

![](https://docs-assets.foxecom.app/pebble-theme/3d4254b9-7f2e-4f2d-8cc1-0ba61d99e85d.png)