> ## Documentation Index
> Fetch the complete documentation index at: https://docs.shopify.lightsout.agency/llms.txt
> Use this file to discover all available pages before exploring further.

# Configure Facet's search results page and search drawer

> Set up Facet's search results page: result type tabs, filters, sorting, columns and paging, plus how the predictive search drawer in the header works.

The search page shows the results when a shopper searches your store. In Facet it is built from the **Search** section: a search field and a results heading at the top, tabs for result types, a toolbar with filters and sorting, and the results. This page covers the section settings and the predictive search drawer that opens from the header.

![The Search section as it appears on the Facet demo storefront.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/collections/search/search-overview.jpg?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=931d42713d67d000cac4c81bff9e9b9f)

## What this section controls

* Tabs that narrow results to products, articles or pages.
* Filters in a sidebar or a drawer, and the sort menu.
* How many results show per page and how many columns on large screens.
* How shoppers reach more results: page numbers, a **Load more** button, or loading as they scroll.
* The popular searches suggested when a search finds nothing.

Products show as product cards. Articles and pages show as cards with their picture, type, title and a short excerpt.

## Getting started

**1. Open the Theme Customizer**

In your Shopify admin, open **Online Store**, then **Themes**, and click **Customize** next to Facet.

**2. Open the search template**

In the template picker at the top of the Theme Customizer, choose **Search**. Then click **Search** in the **Sections** panel.

**3. Pick popular searches**

Choose a menu for **Popular searches menu** so shoppers get suggestions when nothing matches.

![The theme editor with the Search section selected in the sidebar, its settings panel open on the left and the section highlighted in the preview.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/collections/search/search-location.jpg?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=d7d9f3c4e404c10d5184a26fdec46e10)

## Section settings

### Results

![Theme editor sidebar showing the Search section settings: Show result type tabs, Enable filtering, Filter layout, Enable sorting, Show borders on filter and sort, Desktop columns, and more.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/collections/search/search-settings-1.png?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=6c944c708d9e92c4b7bbf08164c5a8cd)

* **Show result type tabs**: on by default. Shows **All**, **Products**, **Articles** and **Pages** tabs above the results.
* **Desktop columns**: from 2 to 5. Default: 4. Phones always show 2 columns.
* **Results per page**: from 8 to 48, in steps of 4. Default: 24.

> [accordion] Paging
>
> * **Page numbers**: numbered links under the results.
> * **Load more button** (default): a button that adds the next results under the ones in view, with a "Showing X of Y" count.
> * **Load as the page scrolls**: the next results load on their own when the shopper reaches the end of the list.

> [accordion] Popular searches menu
>
> A menu shown when a search finds nothing. Each link in the menu becomes a suggested search, using the link's title as the search term. A **Browse all products** button also shows under the suggestions.

### Filters and sorting

* **Enable filtering**: on by default. Shows filters for the product results, such as availability, price, size or color. Filters come from Shopify's **Search & Discovery** app, the same way as on the [Collection page](https://docs.shopify.lightsout.agency/themes/facet/collections/collection-page.md).
* **Filter layout**: **Sidebar** (default) or **Drawer**. On tablets and phones, both open the filters in a drawer. Appears only when **Enable filtering** is on.
* **Enable sorting**: on by default. Shows a **Sort by** menu, such as relevance or price.
* **Show borders on filter and sort**: on by default. Draws borders around the **Filters** button, the sort menu and the active filter chips. Their corners follow the inputs setting in [Corner radius](https://docs.shopify.lightsout.agency/themes/facet/theme-settings/corner-radius.md).

### Common settings

![Theme editor sidebar showing the Search section settings (part 2, scrolled): Popular searches menu, Common settings, Color scheme, Top padding, Bottom padding, Page width, and more.](https://mintcdn.com/lightsout/JLHyBPHbW516g-34/images/themes/facet/collections/search/search-settings-2.png?fit=max\&auto=format\&n=JLHyBPHbW516g-34\&q=85\&s=3a8631ed3c43ac193f274273a40da59e)

* **Color scheme**: the colors of the section.
* **Top padding**: None, Small, Medium (default), Large or Extra large.
* **Bottom padding**: None, Small, Medium, Large (default) or Extra large.
* **Page width**: Narrow, Narrower, Fluid (default) or Full.

See [Common settings](https://docs.shopify.lightsout.agency/themes/facet/common-settings.md) for what each option does.

## Predictive search drawer

When a shopper clicks the search icon in the header, a search drawer opens from the side. Before they type, it shows your popular searches. Once they type two or more characters, it shows matching products, collections, pages, articles and suggested search terms as they type. Pressing Enter opens this search page with the full results.

The drawer has no settings of its own here. Its style, popular searches menu and color scheme are set in the **Header** section, under **Search**. See [Header](https://docs.shopify.lightsout.agency/themes/facet/header/header.md).

## Best practices

* **Fill the popular searches menu.** Create a menu in **Content**, then **Menus**, with your most searched terms, and use it here and in the header.
* **Use Load more for browsing.** It keeps earlier results in view, so shoppers don't lose their place.
* **Write clear page and article excerpts.** Article and page results show a short excerpt, so a clear opening line helps shoppers pick the right one.

## Related guides

> [card] [Header](https://docs.shopify.lightsout.agency/themes/facet/header/header.md)
>
> Set the search style and popular searches in the drawer.

> [card] [Collection page](https://docs.shopify.lightsout.agency/themes/facet/collections/collection-page.md)
>
> Learn how filters from Search & Discovery work.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.