When implementing search, you may want to have the functionality of displaying your popular searches or suggested categories prior to a user typing into the search bar.
To be able to trigger the empty search to produce a result similar to the screenshot below, you need to implement a customisation.
To customise the Algolia Shopify App Block, you are required to utilise custom hooks:
- https://www.algolia.com/doc/integration/shopify/building-search-ui/frontend-custom-events/?client=ruby
For this specific customisation, the beforeAutocompleteOptions
hook is used. More information on this specific custom hook can be found below:
- https://www.algolia.com/doc/integration/shopify/building-search-ui/frontend-custom-events/?client=ruby#beforeautocompleteoptions
Additionally, a guide on how to implement custom hooks can be found in our article here:
https://support.algolia.com/hc/en-us/articles/26778054634897--Shopify-How-to-set-up-Custom-Hooks
The code to achieve this functionality using the beforeAutocompleteOptions
can be found below:
document.addEventListener("algolia.hooks.initialize", function () {
algoliaShopify.hooks.registerHook(
"beforeAutocompleteOptions",
function (options) {
options.openOnFocus = true;
return options;
}
);
});