> For the complete documentation index, see [llms.txt](https://docs.strm.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.strm.design/collections-and-search/search.md).

# Search

Predictive search in the header and the search results page, with filters and sorting.

Stratum has two kinds of search:

* **Predictive search** in the header shows suggestions, products, collections and pages while the shopper types.
* The **search results page** lists every match with filters, sorting and a grid or list view.

## Predictive search

![Predictive search](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-dd5c86cd89cab557f9ffb3bc318e7e008d23330c%2Fpredictive-search.png?alt=media)

**Before the shopper types**, the search panel can show:

* **Popular searches** — terms you choose, as quick links.
* **Trending** — the first 4 products from a collection you choose.
* **Categories** — up to 6 items from the header's main menu, with product counts.

**While typing**, results appear after the first few letters:

* **Suggestions** — completed search terms, with the typed part highlighted.
* **Products** — image, title, vendor or SKU, and price.
* **Collections** — up to 4 matching collections.
* **Pages** and blog posts — up to 3 of each.
* **See all results for "…"** opens the full results page.

Use the arrow keys to move through results and **Enter** to open one. **Esc** closes the panel.

### Search settings in the header

Open **Online Store › Themes › Customize**, click **Header**, and scroll to **Search**.

| Setting                          | Default      | What it does                                                                                                                                                                                               |
| -------------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Show search**                  | On           | Shows search in the header.                                                                                                                                                                                |
| **Search**                       | Search field | **Search field** (a full field in the header), **Icon** or **Icon and text** (these open the field below the header). The **Search first** layout always shows the field; **Floating pill** uses the icon. |
| **Search field text**            | (empty)      | The placeholder text in the field, for example "Search products, brands or SKUs".                                                                                                                          |
| **Popular searches**             | (empty)      | Terms separated by commas, shown before shoppers type.                                                                                                                                                     |
| **Trending products collection** | (empty)      | Shows its first 4 products before shoppers type.                                                                                                                                                           |

See [Header, menus and search](/header-and-footer/header.md) for the other header settings.

{% hint style="info" %}
Shopify decides which products match and in what order. Add synonyms and promote products in the **Search & Discovery** app.
{% endhint %}

## The search results page

![Search results page](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-6bff1f221c1ee76a693f3300e21ab7f998f15926%2Ftemplate-search-results.png?alt=media)

The page has a search field at the top, the number of results, chips for matching collections, the toolbar, filters and the results. Products show as product cards; pages and blog posts show as text results with their type.

### Open it in the theme editor

In the page picker at the top of the editor, choose **Others › Search**, then click **Search results**.

### Settings

| Setting                                               | Default      | What it does                                                                     |
| ----------------------------------------------------- | ------------ | -------------------------------------------------------------------------------- |
| **Results per page**                                  | 24 (8–48)    | How many results load at once; **Load more** adds the next page.                 |
| **Columns on large screens**                          | Four         | **Three**, **Four** or **Five** per row.                                         |
| **Show grid and list view switch**                    | On           | Grid columns or list view, as on collection pages.                               |
| **Show matching collections**                         | On           | Chips for up to 6 collections whose names match the search, with product counts. |
| **Enable filtering**                                  | On           | Filters from the Search & Discovery app, the same as on collection pages.        |
| **Price shortcuts**                                   | 25, 100, 250 | Buttons such as **Under $25** above the price filter.                            |
| **Enable sorting**                                    | On           | The **Sort** menu (Relevance, Price, Date…).                                     |
| **Color scheme**, **Top padding**, **Bottom padding** |              | Look and spacing.                                                                |

Filters look and work exactly as on collection pages, including **Theme settings › Filters**. See [Collection pages and filters](/collections-and-search/collection-page.md).

## Tips

* Fill in product types, vendors and tags — they power both filters and search.
* Use **Popular searches** for what your customers actually look for; Shopify's analytics (**Analytics › Reports › Top online store searches**) shows the most common terms.
* When a search has no results, the page says so and keeps the search field ready for another try.