Add Query Suggestions to autocomplete
The default Shopify templates include autocomplete search out-of-the-box. This lets users search across selected indexes for products, collections, blogs, or pages.
Algolia Query Suggestions generate suggested search terms based on popular searches.
In the latest version of the Autocomplete widget in the Algolia Search and Discovery app, you can add Query Suggestions to your frontend from the Autocomplete configuration section. If you want to use Query Suggestions in the Algolia Search and Discovery app, you need to use an Algolia application with the Query Suggestions feature turned on.
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.
Enable suggestions with Autocomplete v1
To get started, open the Search options tab. Go to the Autocomplete configuration options section and select the Enable Query Suggestions option.
By default, the engine targets an index name computed with your index prefix. If the index name doesn’t correspond to your Query Suggestions index name, you can replace it. Click Save. Your autocomplete menu should now show search suggestions.
Enable suggestions with Autocomplete v0
If you aren’t using the latest version of the Autocomplete in the Algolia Search and Discovery app, you need to add a Query Suggestions index as an extra source.
Create the templates
To display the suggestions from the Query Suggestions index, you need to add new templates. You need to add these templates in the Snippets section of the theme’s template files.
First, create a new template for the Query Suggestions empty results file: algolia_autocomplete_query_suggestion_empty.hogan.liquid:
1
2
3
4
5
<div class="aa-query_suggestion-empty">
<div class="aa-no-result">
No suggestions found
</div>
</div>
Next, create a new template for the Query Suggestions results file: algolia_autocomplete_query_suggestion.hogan.liquid:
1
2
3
4
5
<div class="aa-query_suggestion">
<div class="aa-text">
<span class="aa-title">[[& _highlightResult.query.value ]]</span>
</div>
</div>
Add new templates to the theme
To include the new templates in the theme, edit the file theme.liquid and add the new templates to the header:
1
2
3
4
5
-<script type="text/template" id="template_algolia_instant_search_no_result">{% include 'algolia_instant_search_no_result.hogan' %}</script>
+<script type="text/template" id="template_algolia_instant_search_no_result">{% include 'algolia_instant_search_no_result.hogan' %}</script>
+ <script type="text/template" id="template_algolia_autocomplete_query_suggestion">{% include 'algolia_autocomplete_query_suggestion.hogan' %}</script>
+ <script type="text/template" id="template_algolia_autocomplete_query_suggestion_empty">{% include 'algolia_autocomplete_query_suggestion_empty.hogan' %}</script>
{{ 'algolia_dependency_font-awesome-4-4-0.min.css' | asset_url | stylesheet_tag }}
Edit autocomplete template
Update the autocomplete template to include the Query Suggestions search results. Edit the file algolia_autocomplete.hogan.liquid within the Snippets section and add the Query Suggestions element where you want to show them within the autocomplete:
1
2
3
4
5
6
+ <div class="aa-products_query_suggestions">
+ <div class="aa-products_query_suggestions-header">
+ Query Suggestion
+ </div>
+ <div class="aa-dataset-products_query_suggestions"></div>
+ </div>
Edit JavaScript files
After adding all theme files for the Query Suggestions, you need to add the new source needs to the configuration. Update the algolia_autocomplete.js.liquid file in the Assets section to add the Query Suggestions source to the config object:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
products: {
distinct: algolia.config.show_products,
hitsPerPage: algolia.config.products_autocomplete_hits_per_page,
index: index('products'),
templates: {
empty: algolia.compileTemplate('autocomplete_products_empty'),
footer: algolia.compileTemplate('autocomplete_footer'),
hit: algolia.compileTemplate('autocomplete_product'),
- }
+ },
+ products_query_suggestions: {
+ enabled: true, // bool value
+ hitsPerPage: 2, // number of hits to display
+ index: index('products_query_suggestions'), // the index must have the same prefix of the shop
+ templates: {
+ empty: algolia.compileTemplate('autocomplete_query_suggestion_empty'), // query suggestion empty template
+ hit: algolia.compileTemplate('autocomplete_query_suggestion'), // query suggestion hit template
+ },
+ },
};
This code assumes the Query Suggestion index name to have this format: [INDEX_PREFIX]products_query_suggestions.
Within the same file, change the autocomplete initializing code block to add the Query Suggestions source:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
var autocompleteInstance = autocomplete(
algolia.config.input_selector + ', .algolia-shopify-autocomplete',
{
debug: algolia.config.autocomplete_debug,
hint: false,
appendTo: 'body',
templates: {
dropdownMenu: algolia.render(algolia.compileTemplate('autocomplete'), {
storeName: algolia.storeName,
with: {
articles: algolia.config.index_articles,
collections: algolia.config.index_collections,
pages: algolia.config.index_pages,
footer: algolia.config.instant_search_enabled,
poweredBy: algolia.config.powered_by,
+ query_suggestions: true,
products: algolia.config.index_products
},
}),
empty: '<div></div>',
},
},
[
algolia.config.index_collections &&
autocompleteSection(config, 'collections'),
algolia.config.index_articles && autocompleteSection(config, 'articles'),
algolia.config.index_pages && autocompleteSection(config, 'pages'),
+ autocompleteSection(config, 'products_query_suggestions'),
algolia.config.index_products && autocompleteSection(config, 'products'),
].filter(function(x) {
return Boolean(x);
})
);
Also within the same file, update the autocompleteInstance ‘autocomplete:selected’ event listener. Define the action that runs when a user clicks on the query suggestion:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
autocompleteInstance.on('autocomplete:selected', function(obj, datum, name) {
- if (algolia.config.analytics_enabled) {
+ if (algolia.config.analytics_enabled && name !== 'products_query_suggestions_manual') {
var clickData = {
index: datum._index,
eventName: 'click',
queryID: datum._queryID,
objectIDs: [datum.objectID],
positions: [datum._position],
};
// Send the click event
aa.clickedObjectIDsAfterSearch(clickData);
/**
* Uncomment the following function call to start storing data in
* local storage for conversion tracking
*/
// algolia.saveForConversionTracking(clickData);
}
switch (name) {
case 'products': {
var addVariantId =
!algolia.config.show_products && datum.objectID !== datum.id;
window.location.href =
'/' +
name +
'/' +
datum.handle +
(addVariantId ? '?variant=' + datum.objectID : '');
break;
}
case 'articles':
window.location.href =
'/blogs/' + datum.blog.handle + '/' + datum.handle;
break;
+ case 'products_query_suggestions':
+ window.location.href = '/search?q=' + datum.query
+ break;
default:
window.location.href = '/' + name + '/' + datum.handle;
}
});
Now, when a user performs a search in the autocomplete the Query Suggestions are shown along with the other search results.
