Overview

Storefront search is based on query parameters that determine what information is returned, and how it’s returned, in the search results.

The query parameters can be used by including inputs in your search form, and they’re reflected in the search URL when a search is performed.

You can also add predictive search to your theme so that suggested results appear immediately as you type into the search field. To learn about predictive search, refer to Add predictive search to your theme.

Query parameters

Search queries accept the following parameters:

The search form

The search form can be included with a <form> element that has an attribute of action="/search".

📘

Tip

You should use the routes object to populate the action attribute so that the appropriate URL is used for multi-language stores.

Inside the form, you can include inputs for each of the query parameters above, where each input has the following attributes:

• name="query-parameter"
• value="parameter-value"

<form action="{{ routes.search_url }}">
  <input type="text" name="q" value="{{ search.terms | escape }}">
  <input type="submit" value="Search">
</form>

Search URL structure

When a search is performed, the search page’s URL is updated to reflect that.

For example, a search with the following parameters returns the following URL:

/search?q=gift