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...

19 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()+’*’;

  5. Dorothy Welker says:

    Thank you for this, what if I want to make it smarter ? Just like the Product Filter app which has a more content? thank you https://prnt.sc/qxpy3l

    • Kiet Huynh says:

      Thank you for your suggest. I think we can do that but that requires good programming techniques to do it.

    • ADTC says:

      This is a lot more complex and kind of outside the scope of the simple solution here. Considering the solution presented in the blog is for searching products only, you may want to migrate from the simple solution to a complex tool, like the Product Filter app you suggested, as the tool already gives you what you need. The hammer works best for hitting nails – don’t use it to fix everything 🙂

  6. Derek says:

    I changed $(function (){ }); to (function ($){ }(jQuery)); in the search-autocomplete.liquid file and it worked for me on the debut theme.

  7. Liam says:

    Hello, great easy article which is simple do follow instructions – how do i make it so the products show more text and don’t cut the text off part way

  8. Florian says:

    Hello
    I have a question.
    it works well except that I don’t see the full name of my product, I only see the first part.
    I’m using the tag for an esthetic purpose.
    So in the search I have for example only “pyjamas” displayed instead of “unicorn pyjamas” (the name of my product is pyjamas Unicorn
    Is that why I can’t see everything? (the br)
    I’ve done a little research, but I don’t know much about it.
    I found this that might be able to help.
    .breadcrumbs br {
    display: none;
    }
    Do you have a solution for me?
    thank you a lot

Leave a Reply

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