Search Autocomplete Predictions

This feature is intended to speed up customer search interactions by trying to predict what product the customer is searching for in the store. Once the customer starts writing, matching product names are instantly displayed. The order is determined by how many products match the search.

The autocomplete functionality is only available in the Premium or higher plans. Request a demo to our support channels.

Javascript libraries

These two libraries, hosted in Jumpseller’s servers, have to be placed before the </head> tag on the main theme’s layout. You can use the liquid condition {% if store.autocomplete_access %} to identify if the store’s plan has access to this feature.

{% if store.autocomplete_access %}
  <script src="//assets.jumpseller.com/public/autocomplete/algolia-autocomplete@1.7.1.js"></script>
  <script src="//assets.jumpseller.com/public/autocomplete/jumpseller-autocomplete@1.0.0.min.js" data-suggest-categories="false" defer="defer"></script>
{% endif %}

HTML

Every theme needs to have a search bar. This is a simple representation of the code that needs to be included. The mandatory elements are:

• The div with the class jumpseller-autocomplete wrapping the <form>.
• The attribute autocomplete="off" in the search’s input.

<div class="jumpseller-autocomplete">
  <form method="get" action="{{search.url_send}}">
    <input type="text" autocomplete="off" value="{{search.query}}" name="q" placeholder="Search for products" />
    <button type="submit">Search</button>
  </form>
</div>

CSS

Optionally, it is possible to customize a spinner that is displayed during the predictive search. The classes used for this spinner gif are .aa-Autocomplete .aa-Button, it can be absolute positioned over the search button, that is usually a magnifying glass.