The `search` template renders the search page, which displays the results of a [storefront search](https://help.shopify.com/en/manual/online-store/storefront-search).

> Tip:
> Refer to the [search template](https://github.com/Shopify/dawn/blob/main/templates/search.json) and its [main section](https://github.com/Shopify/dawn/blob/main/sections/main-search.liquid) in Dawn for an example implementation.

<figure class="figure">
  <img src="/assets/themes/templates/search.png" style="width: 100%; max-width: 550px;" alt="An example of the search template in Dawn">
</figure>

## Location

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

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

## Content

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

- [The search object](#the-search-object)
- [The search form](#the-search-form)
- [The search results](#the-search-results)

### The search object

You can access the Liquid [`search` object](/docs/api/liquid/objects/search) 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](/docs/api/liquid/objects/search#search-terms) so that the customer’s search terms are preserved:

```liquid

<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](/docs/storefronts/themes/navigation-search/search).

### The search results

You can display the search results by looping through the values of the `results` attribute of the [`search` object](/docs/api/liquid/objects/search#search-results):

```liquid

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

```


## Usage

When working with the `search` template, you should familiarize yourself with [highlighting search terms](#highlight-search-terms).

> Tip:
> If you're using a JSON template, then any HTML or Liquid code needs to be included in a [section](/docs/storefronts/themes/architecture/sections) that's referenced by the template.


### Highlight 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](/docs/api/liquid/filters/highlight):

```liquid

{% 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 `class="highlight"` if you want to add any additional styling.