Autocomplete menu

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

You can add Autocomplete to most themes.

Configuration

To configure the Autocomplete menu, go to the Search options tab in your Shopify admin.

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 Search and Discovery app.

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

The main template files are:

• assets/algolia_autocomplete.js.liquid. The main JavaScript file for the Autocomplete menu.
• snippets/algolia_autocomplete.css.liquid
• 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.

snippets/algolia_autocomplete.css.liquid

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

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

Product templates

The product template files are:

• snippets/algolia_autocomplete_product.liquid. The template for a single product.
• snippets/algolia_autocomplete_footer.liquid
• snippets/algolia_autocomplete_product_plugin.js.liquid

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

The collection template files are:

• snippets/algolia_autocomplete_collection.liquid. The template for a single collection.
• snippets/algolia_autocomplete_collections_plugin.js.liquid

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

The article template files are:

• snippets/algolia_autocomplete_article.liquid. The template for a single article.
• snippets/algolia_autocomplete_articles_plugin.js.liquid

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

The page template files are:

• snippets/algolia_autocomplete_page.liquid. The template for a single page.
• snippets/algolia_autocomplete_pages_plugin.js.liquid

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.

Query Suggestion templates

The Query Suggestion template files are:

• snippets/algolia_autocomplete_suggestion.liquid. The template for a single Query Suggestion.
• snippets/algolia_autocomplete_suggestions_plugin.js.liquid

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

The main template files are:

• assets/algolia_autocomplete.js.liquid. The main JavaScript file for the Autocomplete menu. For more information, see the GitHub repository .
• snippets/algolia_autocomplete.css.hogan.liquid
• snippets/algolia_autocomplete.hogan.liquid

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.

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. For example:

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

The product template files are:

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

snippets/algolia_autocomplete_product.hogan.liquid

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

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

Use 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. For example:

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”. For example:

1
2
3
4
{
  helpers,
  query
}

Collection templates

The product template files are:

• snippets/algolia_autocomplete_collection.hogan.liquid
• snippets/algolia_autocomplete_collections_empty.hogan.liquid

snippets/algolia_autocomplete_collection.hogan.liquid

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

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. For example:

1
2
3
4
{
  helpers,
  query
}

Article templates

The article template files are:

• snippets/algolia_autocomplete_article.hogan.liquid
• snippets/algolia_autocomplete_articles_empty.hogan.liquid

snippets/algolia_autocomplete_article.hogan.liquid

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

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. For example:

1
2
3
4
{
  helpers,
  query
}