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.
Highlighting the terms used in the search
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.