If you've installed and enabled the latest Algolia Shopify app, which uses app blocks, you should be able to use custom hooks to further customize the default Algolia Shopify plugin.
While you can use custom hooks in any of your theme code files, we highly recommend creating a dedicated file for custom hooks. This way, you can separate them from other theme code files and review the customizations made to the Algolia plugin more effectively.
To create a file for Algolia custom hooks, please follow the steps.
1. Go to Theme Detail (three dots) > Edit code
2. Under Assets folder click on the “Add a new asset”
3. Click on the “Create a blank file” tab, select “extension” `js`, type desired file name, i.e., “algolia_custom_hooks”
4. Ensure the file (“algolia_custom_hooks.js”) is created in the Assets folder
5. Once the file is created successfully, you can navigate to the theme.liquid file, and copy and paste the following code along your scripts:
<script src="{{ 'algolia_custom_hooks.js' | asset_url }}" defer="defer"></script>
This instructs the theme.liquid file to reference the algolia_custom_hooks.js file
Now you can use custom hooks within the algolia_custom_hooks.js file, and the customisations should be reflected on your theme frontend.
A full list of the custom hooks available can be found below:
Autocomplete hooks
https://www.algolia.com/doc/integration/shopify/building-search-ui/frontend-custom-events/?client=ruby#autocomplete-hooks
InstantSearch hooks