Enable autocomplete for search boxes in Shopify

With this tutorial, we will show recommendations as your visitor types in your storefront search box. Your visitors will be able to jump directly to any product page with a single click.

We will be using Shopify's built-in storefront search function.

Visit our demo store and start typing “dresses” in the search box at the top left.

Create an alternate search template

From your Shopify admin, click Online Store, and then click Themes (or press G W T).
Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.
Right under Templates on the left, click on “Add a new template”. Create a new template for “search” called “json”:
Replace the entire content of your new template with the code located here. You will end up with this:
Save your file.

Create a snippet

Still on the Edit HTML/CSS page, right under Snippets on the left, click on “Add a new snippet”. Create a new snippet called “search-autocomplete”:
To your new search-autocomplete.liquid snippet, add the following code.
Save your snippet file.
Back on the Edit HTML/CSS page, right under Layouts on the left, click on theme.liquid. Scroll down to the bottom of the file, and add the following right above the closing </body> tag:
```
{% include 'search-autocomplete' %}
```
Like so:

And you're done.

Configuration (optional)

By default, the product suggestions are listed in a fixed-width box, with light gray borders outlining each result. You can change the width of the box, as well as its background and border colors, by editing a few values at the very top of your search-autocomplete.liquid snippet.

Demo store

Visit our demo store and start typing “dresses” in the search box at the top left.

FAQ

Will the suggestions appear for all search boxes on my storefront?

Yes, even if you have multiple search boxes on the same page.

How are the very long product titles truncated in the results box?

We are using a CSS3 property called text-overflow supported across all browsers. With that property, we truncate titles that would otherwise be too long for the search results box. Ellipsis are appended to truncated titles.

How many products will be be shown in the results box?

The 10 most relevant results will be shown. If there are more than 10 results, an additional link will be provided pointing to a paginated search results page.

Knowledge Base