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: <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="Example"></script> <script type="text/plain" data-language="liquid"> RAW_MD_CONTENT <form action="{{ routes.search_url }}"> <input type="text" placeholder="Search" name="q" value="{{ search.terms | escape }}" > <input type="submit" value="Search"> </form> END_RAW_MD_CONTENT</script> </div> </p> > 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): <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="Example"></script> <script type="text/plain" data-language="liquid"> RAW_MD_CONTENT {% for item in search.results %} <!-- item details --> {% endfor %} END_RAW_MD_CONTENT</script> </div> </p> ## 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): <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value="Example"></script> <script type="text/plain" data-language="liquid"> RAW_MD_CONTENT {% for item in search.results %} <!-- item details --> {{ item.content | highlight: search.terms }} {% endfor %} END_RAW_MD_CONTENT</script> </div> </p> > 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.