Predictive search

The search overlay that opens from the navigation's search icon, with live results, suggestions, and featured collections.

Last updated About 5 hours ago

Predictive search is its own section in the Overlay group: open the theme editor and select Overlay > Predictive search. It controls everything visitors see after clicking the search icon. (The icon itself is toggled in the Navigation section.)

Live results

With Enable predictive results on, matching products, collections, pages, and blog posts appear as the visitor types β€” no need to submit the search. You can:

  • Set the Maximum results count (5 by default).
  • Toggle Show product vendor and Show product price on the results.
  • Change the Placeholder text shown in the empty search field.

πŸ“ Note: Live results require the free Shopify Search & Discovery app and the Shopify, Advanced, or Plus plan. The overlay works without them β€” searches just go straight to the results page.

Fill the empty state

Before a visitor types anything, the overlay can offer starting points:

  • Search suggestions β€” pick a single-level menu, and its links show below the search field. Use it for popular searches or key pages ("Bestsellers", "Gift cards", "Shipping info").
  • Featured collections β€” pick a single-level menu of collection links to showcase visually, with an optional heading. Collection layout shows them as a slideshow or grid, and Aspect ratio controls the image shape.

πŸ’‘ Tip: A filled-in empty state makes search feel like a destination rather than a blank box β€” even visitors who weren't sure what to type get somewhere useful.

Style

Drawer color scheme on desktop sets the overlay's color scheme. On mobile, the overlay matches your navigation's scheme automatically.

For how the search results page works and ways to improve result quality, see Search and discovery features.