How to enable autocomplete for search boxes in shopify

With this tutorial, I 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.

Create an alternate search template

From your Shopify admin, click Online Store, and then click Themes (or press G W T).

2. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

3. Right under Templates on the left, click on “Add a new template”. Create a new template for “search” called “json”:

4. Replace the entire content of your new template with the code located here. You will end up with this:

5. 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”:

2. To your new search-autocomplete.liquid snippet, add the following code.

3. Save your snippet file.

4. 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' %}


 
```