Enable autocomplete for search boxes

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of web design languages such as HTML, CSS, Javascript and Liquid is required. We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial.

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.

Search autocomplete

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

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

    Search autocomplete template

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

    Search autocomplete template 2

  5. Save your file.

Create a snippet

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

    Search autocomplete snippet

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

    Like so:

    Search autocomplete snippet include

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.

Want to discuss this page?

Visit the Shopify Community