Home Collections And Search Search page and search overlay

Search page and search overlay

Last updated on Aug 15, 2026

Search page and search overlay

The theme handles search in two places. The Search overlay opens when a shopper clicks the search icon in the header and shows live suggestions as they type. The Search results section is the full page they reach after submitting a query, at /search. You edit each one in a different place in the theme editor.

Edit the search results page

This section fills the search template. You cannot add or remove it, and there is one per store.

  1. In the theme editor, open the template selector at the top of the screen.
  2. Choose Search under the Templates list.
  3. Click the Search results section in the sidebar to open its settings.

Results are grouped into tabs (products, articles, pages) when more than one type matches. Product results use the theme's product card, so the card's own blocks (image, title, price, label, rating, swatches) control how each result looks, the same as on a collection page.

Results

  • Products per page: how many products load before pagination starts. Range 8 to 48, in steps of 4.
  • Desktop filter layout: where filters appear on desktop. Drawer opens filters in a panel from a button. Sidebar keeps them in a column beside the results. On mobile, filters always use the drawer. Filters themselves come from the Shopify Search & Discovery app, not from this section.

Empty state

These control what a shopper sees on the search page before there is a query.

  • Show recent searches: shows the shopper their own recent searches, kept on their device.
  • Show popular collections: shows a row of collection cards drawn from your store's collections.
  • Maximum collections to show: caps how many collection cards appear (2 to 6). Available when Show popular collections is on.

This section also uses the standard Color, Padding, Margin, and Visibility controls. See Common section settings.

Edit the search overlay

The overlay is part of the theme's Overlays group, which loads on every page (alongside the cart drawer), so it is not in the Templates list and you do not add it from Add section. It opens over the page when a shopper clicks the search icon in the header.

  1. In the theme editor, open any page.
  2. In the sidebar, expand the Overlays group.
  3. Click Search overlay to open its settings.

Before a shopper types, the overlay can show trending terms, recent searches, and popular collections. Once they start typing, those are replaced with live suggestions.

The suggestions are laid out in two parts: a grid of up to 8 product results on one side, and a column beside it holding matching collections, articles, pages, and suggested search terms, up to 4 of each. When only products match, the products take the full width. None of these counts are settings.

Empty state

This is what shoppers see in the overlay before they type.

  • Trending searches: suggested search terms shown as tappable tags. Enter one term per line. Leave it blank to hide the trending section. These are static terms you type, not automatic.
  • Show recent searches: shows the shopper their own recent searches, kept on their device.
  • Show popular collections: shows collection cards in the overlay.
  • Collections: pick up to 6 collections to feature as popular collections. Leave it empty to use your first collections.
  • Maximum collections to show: caps how many collection cards appear (2 to 6). Available when Show popular collections is on. It applies whether the cards come from your picked list or the automatic fallback.

Search input

  • Placeholder text: the gray hint text inside the search field before the shopper types.

This section also uses the standard Color controls. See Common section settings.

When a search finds nothing

A search that matches nothing shows an empty state: a short message with the shopper's query, and two buttons, one to browse all collections and one back to the home page.

Below that, the theme can show products from a fallback collection so the shopper still has something to browse, under the heading You might like. This is one store-wide setting (No results fallback collection) in Theme settings: see Search settings. It applies to both surfaces, the overlay's live suggestions and the full results page, and on the results page it renders real product cards up to your Products per page value.

Tips

  • Filters on the results page are driven by the Shopify Search & Discovery app. If you see no filter button, you have no filters set up there. Desktop filter layout only changes how existing filters display.
  • The recent searches list lives on each shopper's device, so it looks empty in a fresh preview. That is expected.
  • The overlay and the results page each carry their own Color scheme and their own popular collection settings. Set both if you want a consistent look from the overlay through to the full results page.