search

The search template renders the search page, which displays the results of a storefront search.

Anchor to LocationLocation

The search template is located in the templates directory of the theme:

Anchor to ContentContent

You should include the following in your search template or a section inside of the template:

• The search object
• The search form
• The search results

Anchor to The search objectThe search object

You can access the Liquid search object to display the search details.

Anchor to The search formThe search form

To land on the search page, customers need to perform a search through a search form. You can include a search form in your theme with a <form> element that has an attribute of action="{{ routes.search_url }}". Inside the form, you need an input with the following attributes:

• type="text"

• name="q".

  You should also set the value of the input to reflect the value of the terms attribute of the search object so that the customer's search terms are preserved:

Anchor to The search resultsThe search results

You can display the search results by looping through the values of the results attribute of the search object:

Anchor to Remote productsRemote products

If a store has opted in to displaying remote products on their storefront, products from other stores are surfaced automatically in search results. No theme changes are required to support this. Remote product images contain special badges to signify that they're from a different store.

Anchor to UsageUsage

When working with the search template, you should familiarize yourself with highlighting search terms.

Anchor to Highlight search termsHighlight search terms

If you output any associated content with your search results, then you can highlight the search terms within that content using the Liquid highlight filter: