Skip to main content

search

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

Tip

Refer to the search template and its main section in Dawn for an example implementation.

An example of the search template in Dawn

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

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

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

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

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:

Example

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

To learn more about the search form, refer to Storefront search.

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

Example

{% for item in search.results %}
<!-- item details -->
{% endfor %}

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

Tip

If you're using a JSON template, then any HTML or Liquid code needs to be included in a section that's referenced by the template.

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:

Example

{% for item in search.results %}
<!-- item details -->

{{ item.content | highlight: search.terms }}
{% endfor %}
Tip

This filter will bold any matching text in a by wrapping it in a <strong> element, with an attribute of className="highlight" if you want to add any additional styling.


Was this page helpful?