Autocomplete menu

The Algolia integration for Shopify includes an autocomplete menu that replaces the default Shopify search box and provides results as-you-type. The autocomplete menu is powered by the Autocomplete UI library.

You can implement Autocomplete in most themes.

Configuration

To configure the autocomplete menu, go to the Search options tab in your Shopify app.

The options Enable Query Suggestions, Query Suggestions index name, Number of Suggestions shown, and Show see all products are only available with the latest versions of the Algolia integration for Shopify widgets.

Templates in Autocomplete version 1

If you want to configure the autocomplete menu and go beyond the configuration options, you can edit the templates directly. The autocomplete menu renders the results into HTML using the html tagged template. For more information, see Returning HTML.

Main template files

assets/algolia_autocomplete.js.liquid

The main JavaScript file for the autocomplete menu.

snippets/algolia_autocomplete.css.liquid

Styles for the autocomplete menu. These options are configured in the JavaScript file and used in the style sheet:

Copy

1
2
3
4
5
6
7
{
  colors: { // Theme colors (configurable in the application)
    main,
    secondary,
    muted,
    highlight
}

snippets/algolia_autocomplete.liquid

The layout for the autocomplete menu.

snippets/algolia_autocomplete_main_products_only.liquid

The layout for the autocomplete menu. Used when only products are included.

snippets/algolia_autocomplete_no_results.liquid

The template for a search without any results. It displays “No results for ‘query’” and a “See all products” link.

snippets/algolia_autocomplete_header.liquid

The template for the header for each result type.

Product templates

snippets/algolia_autocomplete_product.liquid

The template for a single product.

snippets/algolia_autocomplete_footer.liquid

The template for information after the list of products. By default, it displays a link redirecting users to the search page and an exhaustive search results list. The template is only displayed if the search result count exceeds the number of results that can fit in the autocomplete menu and the option is enabled in the settings.

snippets/algolia_autocomplete_product_plugin.js.liquid

This file handles search parameters and configuration for products. The header, product, and footer templates are linked to this file. Implemented as an Autocomplete plugin.

Collection templates

snippets/algolia_autocomplete_collection.liquid

The template for a single collection.

snippets/algolia_autocomplete_collections_plugin.js.liquid

This file handles search parameters and configuration for collections. The header and collection templates are linked to this file. Implemented as an Autocomplete plugin.

Article templates

snippets/algolia_autocomplete_article.liquid

The template for a single article.

snippets/algolia_autocomplete_articles_plugin.js.liquid

This file handles search parameters and configuration for articles. The header and article templates are linked to this file. Implemented as an Autocomplete plugin.

Page templates

snippets/algolia_autocomplete_page.liquid

The template for a single page.

snippets/algolia_autocomplete_pages_plugin.js.liquid

This file handles search parameters and configuration for pages. The header and page templates are linked to this file. Implemented as an Autocomplete plugin.

Suggestion templates

snippets/algolia_autocomplete_suggestion.liquid

The template for a single suggestion.

snippets/algolia_autocomplete_suggestions_plugin.js.liquid

This file handles search parameters and configuration for suggestions. This uses the autocomplete-query-suggestions plugin. For more information, see Adding suggested searches.

Templates in Autocomplete version 0

This section describes an outdated version of Autocomplete. Algolia recommends using Autocomplete version 1 instead. To update the widgets to the latest version, go to the Search options tab and re-enable the widgets for a particular theme. Re-enabling widgets in the theme removes all customizations you’ve done. After customizing the widget code, duplicate the theme first to avoid losing your changes.

If you want to configure the autocomplete menu and go beyond the configuration options, you can edit the templates directly. This version of the Autocomplete widget uses Hogan.js as a templating engine. For more information, see Rendering and templating languages.

Main template files

assets/algolia_autocomplete.js.liquid

The main JavaScript file for the autocomplete menu. See the GitHub repository for more information.

snippets/algolia_autocomplete.css.hogan.liquid

A template file with styles. The file is a Hogan.js template to allow configuration options to be passed from the JavaScript file to the style sheet.

Copy

1
2
3
4
5
6
7
8
{
  colors: { // Theme colors (configurable in the application)
    main,
    secondary,
    highlight
  },
  helpers
}

snippets/algolia_autocomplete.hogan.liquid

The layout for the autocomplete menu. Options:

Copy

1
2
3
4
5
6
7
8
9
10
{
  helpers,
  storeName,
  with: { // Which part of the autocomplete menu to display?
    articles,
    collections,
    poweredBy,
    products
  }
}

Product templates

snippets/algolia_autocomplete_product.hogan.liquid

The template for products. It receives the response from Algolia. Options:

Copy

1
2
3
4
5
6
7
8
{
  // Product attributes
  helpers,

  // Algolia search results attributes:
  _highlightResult,  // For all attributes in attributesToHighlight
  _snippetResult     // For all attributes in the attributesToSnippet setting of the index
}

snippets/algolia_autocomplete_footer.hogan.liquid

Uses this template to add information after the list of product results. By default, it displays a link redirecting users to the search page and an exhaustive search results list. The template is only displayed if the search result count exceeds the number of results that can fit in the autocomplete menu. Options:

Copy

1
2
3
4
5
6
{
  helpers,
  isEmpty, // Did the search return 0 results
  nbHits,  // How many results were returned?
  query
}

snippets/algolia_autocomplete_products_empty.hogan.liquid

This template handles a non-empty search by displaying “no product results”. Options:

Copy

1
2
3
4
{
  helpers,
  query
}

Collection templates

snippets/algolia_autocomplete_collection.hogan.liquid

This is a collection entry template and receives the Algolia response record. Options:

Copy

1
2
3
4
5
6
7
8
{
  // Collection attributes
  helpers,

  // Algolia search results attributes:
  _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

This template handles non-empty searches with “no collection” results. Options:

Copy

1
2
3
4
{
  helpers,
  query
}

Article templates

snippets/algolia_autocomplete_article.hogan.liquid

This is an article entry template and receives the Algolia response record. Options:

Copy

1
2
3
4
5
6
7
8
{
  // Article attributes
  helpers,

  // Algolia search results attributes:
  _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_articles_empty.hogan.liquid

This template handles non-empty searches with “no article” results. Options:

Copy

1
2
3
4
{
  helpers,
  query
}