How to add autocomplete for search boxes to your Shopify store

In this article I will show you how to add/enable autocomplete for your search boxes to your Shopify store. It is easy to do and will be a great feature.

Log in to your Shopify store. From your Shopify admin, go to Online Store > Themes. Click Actions > Edit code.

Step 1: Create new template for search page – search.json.liquid

In the Templates directory, click Add a new template. Choose a type option for your new template. For an alternate search template, select search and give the template a name: json.

Click Create template. Your new template will open in the code editor, and the file will be populated with default code. Replace default code with the below code.

Step 2: Create search-autocomplete.liquid file

In the Snippets directory, click Add a new snippet. In popup appear: Give your snippet the name search-autocomplete and click Create snippet.

In the online code editor, paste the content from the below text.

Step 3: Edit theme.liquid file

In the Layouts folder, locate and click on your theme.liquid file to open it in the online code editor. In the online code editor, scroll down a bit until you see the closing tag. Right before the closing tag, paste the below code.

Done! Check it out.

You may also like...

8 Responses

  1. D P Fernando says:

    hi, tried to implement the above code to shopify venture theme, its not working, can i know if any modifications required?

    • Kiet Huynh says:

      Hi Fernando,

      I just checked your site. You must load jQuery library before.

      From your Shopify admin, go to Online Store > Themes. Find the theme you want to edit, and then click Actions > Edit code. In the Layout directory, click on theme.liquid to open the layout in the online code editor. Scroll through the file untile you find the closing head </head> tag add the following code:

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"</script>

  2. Nidhi Kumari says:

    Nothing will appear

  3. Max says:

    Hi,
    Thanks a lot for the code. It’s working perfectly!
    Although, couple of questions.
    How can I change it, so the results will appear after 2-3 symbols entered?
    And, is it possible to make it faster. Right now it takes a few seconds for results to appear.
    Thanks a lot!

    • Shanon says:

      I found if you add +’*’ to the “var term = $(this).val(); line it works a treat!

      so it should read this instead:

      var term = $(this).val()+’*’;

  4. Shanon says:

    Thanks for the code, it work’s great.

    For those who want results to show after a few characters entered vs whole words, I found if you add +’*’ to the “var term = $(this).val(); line it works a treat!

    so it should read this instead: var term = $(this).val()+’*’;

Leave a Reply

Your email address will not be published. Required fields are marked *