Skip to main content

search

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

Location​

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

└── theme
    ├── layout
    ├── templates
    |   ...
    |   ├── search.liquid
    |     ...
    ...

Content​

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

The search object​

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

The 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:

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

The search results​

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

{% paginate search.results.products by 20 %}
  {% for item in search.results.products limit: 20 %}
    <!-- product info -->
  {% endfor %}
{% endpaginate %}