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

15 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

  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 *