for

Autocomplete

Customizing the auto-completion menu


The autocomplete aims to be able to integrate itself in as much themes as possible.
If you have an issue with it, please contact us first at support+shopify@algolia.com. so that we can check if we wouldn't be able to fix this on our end.

Configuration

You have a few configuration options specific to the autocomplete in the Configuration tab of the app.

Configuration options

The debug mode will prevent the autocomplete from closing when you try to use the Inspect element feature of your browser. This is especially useful for styling.

The CSS selector is the selector used to target the inputs you'll want to have the search autocomplete on. By default, we're trying to find any input in a form targetting the /search page.
If you want to target a search input that this selector didn't catch, you can either change it, or add the algolia-shopify-autocomplete class to the input in your theme.

Files

If you're looking to change the default behaviour, and the configuration options didn't match your needs, you'll probably have to dig inside the code.
The autocomplete has a few associated files:

- assets/algolia_autocomplete.js.liquid
- snippets/algolia_autocomplete.css.hogan.liquid
- snippets/algolia_autocomplete.hogan.liquid

- snippets/algolia_autocomplete_product.hogan.liquid
- snippets/algolia_autocomplete_footer.hogan.liquid
- snippets/algolia_autocomplete_products_empty.hogan.liquid

- snippets/algolia_autocomplete_collection.hogan.liquid
- snippets/algolia_autocomplete_collections_empty.hogan.liquid

- snippets/algolia_autocomplete_article.hogan.liquid
- snippets/algolia_autocomplete_articles_empty.hogan.liquid

Main files

assets/algolia_autocomplete.js.liquid

This file is the main file of the autocomplete: it contains all the front-end logic.
To learn more about the library we're using, you can check out two important resources:

snippets/algolia_autocomplete.css.hogan.liquid

This file contains all the auto-complete related styling rules.
If you're looking to modify the auto-completion dropdown, this is the probably the first file you'll want to open. The reason it is also a .hogan template is to be able to pass some configuration options from the JavaScript file to the stylesheet, like colors.

Passed object:

{
  colors: {     // Theme colors (configurable in the application)
    main,
    secondary,
    highlight
  },
  helpers
}

snippets/algolia_autocomplete.hogan.liquid

Autocomplete layout template.

Passed object:

{
  helpers,
  storeName,
  with: {         // Object to know whether or not to display a specific part of the autocomplete
    articles,
    collections,
    poweredBy,
    products
  }
}

Product templates

snippets/algolia_autocomplete_product.hogan.liquid

Product's entry template. It receives the Algolia response record. It's the record with a few extra attributes.

Passed object:

{
  // ... product attributes
  helpers,
  // Algolia search result attributes
  // See https://www.algolia.com/doc/api-client/php/search#sample
  _highlightResult,           // For all attributes in the attributesToHighlight setting of the index
  _snippetResult              // For all attributes in the attributesToSnippet setting of the index
}

Template used to add information after the list of product results. By default, it is used to display a link to redirect to the search page with the same query.

Not displayed if the number of results is lower than the number of results displayable.

Passed object:

{
  helpers,
  isEmpty,              // Did the search return 0 results
  nbHits,               // How much results were returned?
  query
}

snippets/algolia_autocomplete_products_empty.hogan.liquid

Template used in case we have no product results (but other results otherwise)

Passed object:

{
  helpers,
  query
}

Collection templates

snippets/algolia_autocomplete_collection.hogan.liquid

This is a collection entry's template. Collection's entry template. It receives the Algolia response record. It's the record with a few extra attributes.

Passed object:

{
  // ... collection attributes
  helpers,
  // Algolia search result attributes
  // See https://www.algolia.com/doc/api-client/php/search#sample
  _highlightResult,           // For all attributes in the attributesToHighlight setting of the index
  _snippetResult              // For all attributes in the attributesToSnippet setting of the index
}

snippets/algolia_autocomplete_collections_empty.hogan.liquid

Template used in case we have no collection results (but other results otherwise)

Passed object:

{
  helpers,
  query
}

Article templates

snippets/algolia_autocomplete_article.hogan.liquid

This is a article entry's template. Article's entry template. It receives the Algolia response record. It's the record with a few extra attributes.

Passed object:

{
  // ... article attributes
  helpers,
  // Algolia search result attributes
  // See https://www.algolia.com/doc/api-client/php/search#sample
  _highlightResult,           // For all attributes in the attributesToHighlight setting of the index
  _snippetResult              // For all attributes in the attributesToSnippet setting of the index
}

snippets/algolia_autocomplete_article.hogan.liquid

Template used in case we have no article results (but other results otherwise)

Passed object:

{
  helpers,
  query
}