How to add autocomplete for search boxes to your Shopify store

Enercos - Single Product eCommerce Shopify Theme

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.

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.

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.

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

5 Responses

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

    • 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

Leave a Reply

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