search.liquid

The search.liquid template is used to display the results of a storefront search.

Template Considerations

Including a search bar in a theme

To include a search bar for storefront searching, you must first create an HTML form with its action attribute set to /search. Within this form, an input of type text with a name attribute set to q must be included. A simple example is shown below.

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

The {{ search.terms | escape }} found inside the value of the input makes it so that the visitor's search term persists inside the text input after the form has been submitted.

If you prefer to have the search bar be present on all pages of a theme, place the search <form> in theme.liquid instead.

To highlight the terms (keywords) that the visitor used for the search, use the highlight filter and pass it the search.terms array.

{% for item in search.results %}
...
    {{ item.content | highlight: search.terms }}
...
{% endfor %}

This will apply a CSS class called highlight to any instances of the term in the search results, allowing you to apply a different style.