AUTOCOMPLETE IN SHOPIFY SEARCH

Drag to rearrange sections
Rich Text Content

SEARCH IN ECOMMERCE

While running an ecommerce website on a widely used platform such as shopify it is essential to deliver a better user experience than the rest of  your competition. Any opportunity to do so must be utilised. One such feature that greatly improves the user experience and gives an intuitive feel to the users is the autocomplete feature in search. 

The autocomplete feature anticipates the search query for the user and suggests the product being looked for before the query is completed. This is crucial when the product names are long and complicated as it saves users time thus delivering a pleasant experience to the user.

There is more than one way to implement this feature and we are going to discuss all the options and you can go with the most suitable one for you.

FREE WAY: (Psst this is hard click here to skip to the easy options)

First let's discuss the free way, however bear in mind that despite our sincere efforts to simplify this, some amount of knowledge in tweaking codes is a prerequisite. This method is broken down into a four step process.

STEP 1.

After login please follow the flow depicted below

Online Store--> Themes--> Actions--> Edit Code

a1.png

5.png

 

a2.png

STEP 2:

After the edit code window loads up click on add new template. Select template as search and name it json as given in the image below.

3.png

After making these changes click on create template and the new template code editor window will open which will be containing a default code. Replace the default code with the code given below.

{% 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 3:

In the edit code window menu, navigate to the snippets section and click on add new template. Name the new snippet as search-autocomplete  and create a snippet.

a4.png

 After this, the online code editor window for the new snippet will open up. Add the code mentioned below into this window.

{% 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>

STEP 4

 In the layout section of the edit code window, locate the theme.liquid file.

In the theme.liquid code editor window locate the closing tag. Before the closing tag add this online code.

a3.png

1

{% include 'search-autocomplete' %}

 

These four steps will enable the autocomplete feature. However if you are not a tech wiz and looking for a simpler and easier option check out the option listed below.

EASY WAY:

Bear in mind that making such an advanced feature easy often comes with a price the same is the case here. There is a nominal charge for the convenience offered.

In this option we are going to install a search application from the shopify app store that contains the feature of autocomplete. All the available options come with a subscription plan, of them the most affordable one with the best results delivery is Expertrec’s search bar application that comes with a 14 day free trial and $9 month subscription fee. All you have to do here is to install the application called Expertrec Smart Search Bar from the shopify store. Once installed go to the control panel of the extension and enable the search extension. Step by step guide of how to create a shopify search autocompleteLinks to an external site. is available so check that out.

If you are looking for a powerful search function without any hassles then this should do it.

Happy selling!

rich_text    
Drag to rearrange sections
Rich Text Content
rich_text    

Page Comments