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
}