How to add autocomplete for search boxes to your Shopify store

by Kiet Huynh · October 23, 2018

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.

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.

{% layout none %}
{% capture results %}
  {% for item in search.results %}
    {% assign product = item %}
    { 
      "title"    : {{ product.title | json }},
      "url"      : {{ product.url | within: product.collections.last | json }},
      "thumbnail": {{ product.featured_image.src | product_img_url: 'thumb' | json }}
    }
    {% unless forloop.last %},{% endunless %}
  {% endfor %}
{% endcapture %}
{
  "results_count": {{ search.results_count }},
  "results": [{{ results }}]
}

{% layout none %}

{% capture results %}

{% for item in search.results %}

{% assign product = item %}

{

"title" : {{ product.title | json }},

"url" : {{ product.url | within: product.collections.last | json }},

"thumbnail": {{ product.featured_image.src | product_img_url: 'thumb' | json }}

}

{% unless forloop.last %},{% endunless %}

{% endfor %}

{% endcapture %}

{

"results_count": {{ search.results_count }},

"results": [{{ results }}]

}

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.

{% assign results_box_width = '242px' %}
{% assign results_box_background_color = '#ffffff' %}
{% assign results_box_border_color = '#d4d4d4' %}

<script>
$(function() {
  // Current Ajax request.
  var currentAjaxRequest = null;
  // Grabbing all search forms on the page, and adding a .search-results list to each.
  var searchForms = $('form[action="/search"]').css('position','relative').each(function() {
    // Grabbing text input.
    var input = $(this).find('input[name="q"]');
    // Adding a list for showing search results.
    var offSet = input.position().top + input.innerHeight();
    $('<ul class="search-results"></ul>').css( { 'position': 'absolute', 'left': '0px', 'top': offSet } ).appendTo($(this)).hide();    
    // Listening to keyup and change on the text field within these search forms.
    input.attr('autocomplete', 'off').bind('keyup change', function() {
      // What's the search term?
      var term = $(this).val();
      // What's the search form?
      var form = $(this).closest('form');
      // What's the search URL?
      var searchURL = '/search?type=product&q=' + term;
      // What's the search results list?
      var resultsList = form.find('.search-results');
      // If that's a new term and it contains at least 3 characters.
      if (term.length > 3 && term != $(this).attr('data-old-term')) {
        // Saving old query.
        $(this).attr('data-old-term', term);
        // Killing any Ajax request that's currently being processed.
        if (currentAjaxRequest != null) currentAjaxRequest.abort();
        // Pulling results.
        currentAjaxRequest = $.getJSON(searchURL + '&view=json', function(data) {
          // Reset results.
          resultsList.empty();
          // If we have no results.
          if(data.results_count == 0) {
            // resultsList.html('<li><span class="title">No results.</span></li>');
            // resultsList.fadeIn(200);
            resultsList.hide();
          } else {
            // If we have results.
            $.each(data.results, function(index, item) {
              var link = $('<a></a>').attr('href', item.url);
              link.append('<span class="thumbnail"><img src="' + item.thumbnail + '" /></span>');
              link.append('<span class="title">' + item.title + '</span>');
              link.wrap('<li></li>');
              resultsList.append(link.parent());
            });
            // The Ajax request will return at the most 10 results.
            // If there are more than 10, let's link to the search results page.
            if(data.results_count > 10) {
              resultsList.append('<li><span class="title"><a href="' + searchURL + '">See all results (' + data.results_count + ')</a></span></li>');
            }
            resultsList.fadeIn(200);
          }        
        });
      }
    });
  });
  // Clicking outside makes the results disappear.
  $('body').bind('click', function(){
    $('.search-results').hide();
  });
});
</script>

<!-- Some styles to get you started. -->
<style>
.search-results {
  z-index: 8889;
  list-style-type: none;   
  width: {{ results_box_width }};
  margin: 0;
  padding: 0;
  background: {{ results_box_background_color }};
  border: 1px solid {{ results_box_border_color }};
  border-radius: 3px;
  -webkit-box-shadow: 0px 4px 7px 0px rgba(0,0,0,0.1);
  box-shadow: 0px 4px 7px 0px rgba(0,0,0,0.1);
  overflow: hidden;
}
.search-results li {
  display: block;
  width: 100%;
  height: 38px;
  margin: 0;
  padding: 0;
  border-top: 1px solid {{ results_box_border_color }};
  line-height: 38px;
  overflow: hidden;
}
.search-results li:first-child {
  border-top: none;
}
.search-results .title {
  float: left;
  width: {{ results_box_width | remove: 'px' | to_number | minus: 50 }}px;
  padding-left: 8px;
  white-space: nowrap;
  overflow: hidden;
  /* The text-overflow property is supported in all major browsers. */  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-align: left;
}
.search-results .thumbnail {
  float: left;
  display: block;
  width: 32px;
  height: 32px;    
  margin: 3px 0 3px 3px;
  padding: 0;
  text-align: center;
  overflow: hidden;
}
</style>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

{% assign results_box_width = '242px' %}

{% assign results_box_background_color = '#ffffff' %}

{% assign results_box_border_color = '#d4d4d4' %}

$(function() {

// Current Ajax request.

var currentAjaxRequest = null;

// Grabbing all search forms on the page, and adding a .search-results list to each.

var searchForms = $('form[action="/search"]').css('position','relative').each(function() {

// Grabbing text input.

var input = $(this).find('input[name="q"]');

// Adding a list for showing search results.

var offSet = input.position().top + input.innerHeight();

$('<ul class="search-results"></ul>').css( { 'position': 'absolute', 'left': '0px', 'top': offSet } ).appendTo($(this)).hide();

// Listening to keyup and change on the text field within these search forms.

input.attr('autocomplete', 'off').bind('keyup change', function() {

// What's the search term?

var term = $(this).val();

// What's the search form?

var form = $(this).closest('form');

// What's the search URL?

var searchURL = '/search?type=product&q=' + term;

// What's the search results list?

var resultsList = form.find('.search-results');

// If that's a new term and it contains at least 3 characters.

if (term.length > 3 && term != $(this).attr('data-old-term')) {

// Saving old query.

$(this).attr('data-old-term', term);

// Killing any Ajax request that's currently being processed.

if (currentAjaxRequest != null) currentAjaxRequest.abort();

// Pulling results.

currentAjaxRequest = $.getJSON(searchURL + '&view=json', function(data) {

// Reset results.

resultsList.empty();

// If we have no results.

if(data.results_count == 0) {

// resultsList.html('<li><span class="title">No results.</span></li>');

// resultsList.fadeIn(200);

resultsList.hide();

} else {

// If we have results.

$.each(data.results, function(index, item) {

var link = $('<a></a>').attr('href', item.url);

link.append('<span class="thumbnail"><img src="' + item.thumbnail + '" /></span>');

link.append('<span class="title">' + item.title + '</span>');

link.wrap('<li></li>');

resultsList.append(link.parent());

});

// The Ajax request will return at the most 10 results.

// If there are more than 10, let's link to the search results page.

if(data.results_count > 10) {

resultsList.append('<li><span class="title"><a href="' + searchURL + '">See all results (' + data.results_count + ')</a></span></li>');

}

resultsList.fadeIn(200);

}

});

}

});

// Clicking outside makes the results disappear.

$('body').bind('click', function(){

$('.search-results').hide();

});

</script>

<style>

.search-results {

z-index: 8889;

list-style-type: none;

width: {{ results_box_width }};

margin: 0;

padding: 0;

background: {{ results_box_background_color }};

border: 1px solid {{ results_box_border_color }};

border-radius: 3px;

-webkit-box-shadow: 0px 4px 7px 0px rgba(0,0,0,0.1);

box-shadow: 0px 4px 7px 0px rgba(0,0,0,0.1);

overflow: hidden;

}

.search-results li {

display: block;

width: 100%;

height: 38px;

margin: 0;

padding: 0;

border-top: 1px solid {{ results_box_border_color }};

line-height: 38px;

overflow: hidden;

}

.search-results li:first-child {

border-top: none;

}

.search-results .title {

float: left;

width: {{ results_box_width | remove: 'px' | to_number | minus: 50 }}px;

padding-left: 8px;

white-space: nowrap;

overflow: hidden;

/* The text-overflow property is supported in all major browsers. */

text-overflow: ellipsis;

-o-text-overflow: ellipsis;

text-align: left;

}

.search-results .thumbnail {

float: left;

display: block;

width: 32px;

height: 32px;

margin: 3px 0 3px 3px;

padding: 0;

text-align: center;

overflow: hidden;

}

</style>

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.

{% include 'search-autocomplete' %}

1	{% include 'search-autocomplete' %}

Done! Check it out.

Tags: instant search search search autocomplete

D P Fernando says:
April 23, 2019 at 1:48 PM
hi, tried to implement the above code to shopify venture theme, its not working, can i know if any modifications required?
Reply
- Kiet Huynh says:
  April 23, 2019 at 3:19 PM
  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>
  Reply
  - D P Fernando says:
    April 24, 2019 at 5:33 AM
    hi kiet,
    thanks , i did paste the code, hence looks still its not working. any idea why?
    Reply
    - Kiet Huynh says:
      April 24, 2019 at 5:44 AM
      If trust me, please allow me access your store. I want to check the scripts.
      My email is [email protected]
      Thanks
      Reply
      - Erboristeria dott. Simioni says:
        May 27, 2020 at 12:08 AM
        Hi Kiet, have you solved for Venture theme?
Nidhi Kumari says:
May 8, 2019 at 4:39 AM
Nothing will appear
Reply
Max says:
August 24, 2019 at 2:30 AM
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!
Reply
- Shanon says:
  November 5, 2019 at 9:28 PM
  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()+’*’;
  Reply
Shanon says:
November 5, 2019 at 9:27 PM
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()+’*’;
Reply
- Dorothy Welker says:
  February 5, 2020 at 7:18 PM
  where to integrate it ? thank you.
  Reply
- Kaykay says:
  July 23, 2020 at 6:51 PM
  Thank you! Code worked for me too.
  Only change is the double quotation marks in the above code var term = $(this).val()+”*”;
  Thank you Shanon for the additional help.
  Reply
Dorothy Welker says:
February 4, 2020 at 9:51 PM
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
Reply
- Kiet Huynh says:
  February 4, 2020 at 11:49 PM
  Thank you for your suggest. I think we can do that but that requires good programming techniques to do it.
  Reply
- ADTC says:
  September 24, 2020 at 11:31 PM
  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 🙂
  Reply
Derek says:
February 13, 2020 at 11:16 AM
I changed $(function (){ }); to (function ($){ }(jQuery)); in the search-autocomplete.liquid file and it worked for me on the debut theme.
Reply
Liam says:
May 2, 2020 at 3:03 PM
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
Reply
Florian says:
June 12, 2020 at 5:09 AM
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
Reply
- ADTC says:
  September 24, 2020 at 11:26 PM
  Without seeing your website, I don’t know how we can help.
  Reply
ADTC says:
September 24, 2020 at 5:06 AM
Thanks for this. I improved it to be more interactive (all changes are in search-autocomplete.liquid):
Code: https://gist.github.com/ADTC/356bc5b35cba74c1c6dcf6ce7d406dcd
Compare: https://gist.github.com/ADTC/356bc5b35cba74c1c6dcf6ce7d406dcd/revisions?diff=split
Explanation: https://gist.github.com/ADTC/356bc5b35cba74c1c6dcf6ce7d406dcd#gistcomment-3465846
Reply
- Lux8 says:
  November 28, 2020 at 1:13 PM
  Thank you for this!
  Reply
  - Pritam Dey says:
    July 13, 2021 at 1:24 AM
    Work like a charm
    Reply
Taylor says:
December 12, 2020 at 11:32 PM
Hello Can you please provide the code for me only to show the top 3 products then show rest of results thank you. I keep changing the number but there is no code on line 66 to fix as well like you stated in the explination.
-Thank you in advanced
Reply
- Taylor says:
  December 12, 2020 at 11:33 PM
  Also if you can show me how to add the price in a smaller font underneath?
  Reply
mamaligadoc says:
January 3, 2021 at 7:17 AM
With respect !!!
Reply
Elmo says:
January 26, 2021 at 12:08 AM
Excellent solution and I love it! However… It doesn’t work in Mobile and Tablet layout in Simple theme. Any suggestion regards mobile layout?
Thanks in advance.
Reply
Sabirul Islam says:
February 3, 2021 at 5:16 AM
I use it on my test site. But doesn’t appear anything!
I followed all instructions you mentioned here. But no lock!
My website link… https://codermsiit.myshopify.com/
Reply
- Kiet Huynh says:
  February 3, 2021 at 11:49 PM
  Hi Sabirul,
  I’ve just checked your site and it’s working fine. You can check here: https://codermsiit.myshopify.com/search
  Reply
  - Sabirul Islam says:
    November 15, 2021 at 3:10 AM
    @Kiet Huynh,
    Yes, you are right. I just the result and It’s working well. thanks for your assist.
    Reply
Nasir says:
May 28, 2021 at 3:57 AM
Hi
I followed all the instructions on my Venture theme. But it’s not workiing. Any tips please?
Reply
Nasir says:
May 28, 2021 at 4:00 AM
Hi
I followed all the instructions provided on the Venture theme. But nothing worked. Any tips?
Reply
john says:
November 14, 2021 at 9:51 PM
Hi
Thanks a lot for the code. It’s working in my site
I have couple of questions.
How can I change it, so the results will appear after 1-2 symbols entered?
Reply
Raúl says:
May 25, 2022 at 3:41 AM
Hi
First of all thanks for this article.
I’ve followed all steps and anything is showing.
Could you guys give me a hand on this??
Thanks in advance
Reply
- Kiet Huynh says:
  May 25, 2022 at 3:53 AM
  Hi Raul,
  Can you send an email me to at [email protected]?
  Thanks,
  Reply
sid says:
March 22, 2023 at 9:20 AM
{% layout none %}
{% capture results %}
{% for item in search.results %}
{% assign product = item %}
{
“title” : {{ product.title | json }},
“url” : {{ product.url | within: product.collections.last | json }},
“thumbnail”: {{ product.featured_image.src | product_img_url: ‘thumb’ | json }}
}
{% unless forloop.last %},{% endunless %}
{% endfor %}
{% endcapture %}
{
“results_count”: {{ search.results_count }},
“results”: [{{ results }}]
}
This code getting error when save as json because this is not json format.
Reply

How to add autocomplete for search boxes to your Shopify store

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

Step 2: Create search-autocomplete.liquid file

Step 3: Edit theme.liquid file

Related

You may also like...

34 Responses

Leave a Reply Cancel reply

How to add autocomplete for search boxes to your Shopify store

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

Step 2: Create search-autocomplete.liquid file

Step 3: Edit theme.liquid file

Share this:

Related

Related Posts via Categories

You may also like...

How to do Add to Cart button shake on your Shopify store

Top 4+ Shopify Apps to Combine and Stack Multiple Discount Codes

The Top Best Shopify Currency Converter Apps

34 Responses

Leave a Reply Cancel reply