Add custom hooks

Custom hooks let you customize the behavior of the Algolia AI Search & Discovery app.

Shopify apps can’t modify theme code directly. To integrate Autocomplete and InstantSearch, use the Algolia AI Search & Discovery app’s App Embed and App Blocks.

For more information, see:

• Manual theme configuration
• Shopify Algolia configuration

Hooks are functions that run at specific points while the Algolia AI Search & Discovery app loads and runs. Use hooks to customize the app’s behavior.

To see which hooks are available for your store, run window.algoliaShopify.hooks.allowedHooks in your browser’s developer tools.

Add custom hooks

To add custom hooks, add a new JavaScript file, register the hook, and include that file in your theme.

1. Add a new JavaScript file

   1. In your store’s Shopify admin, go to Sales channels > Online Store > Themes.

   2. Select the theme you want to edit and click Click for more theme actions > Edit code.

      

   3. In the assets section, click New file.

   4. Enter a filename, for example, algolia_custom_hooks.js.

2. Register a hook function

   1. Open the custom hooks JavaScript file you created in the last step (for example, algolia_custom_hooks.js).

   2. Add an event listener to the algolia.hooks.initialize event and call the algoliaShopify.hooks.registerHook function. For example:

      JavaScript

      document.addEventListener("algolia.hooks.initialize",
        function () {
          algoliaShopify.hooks.registerHook(
            "beforeAutocompleteOptions",
            function (options) {
              // ...
            },
          );
        }
      );
      
3. Include the JavaScript file in your theme

   1. Under layouts, open the theme.liquid file.

   2. Go to the bottom of the theme.liquid file and add the following code just before the </body> tag. Replace NEW_FILE with the JavaScript file that contains your custom hooks, for example algolia_custom_hooks:

      HTML

      <script src="{{ 'CUSTOM_HOOKS_FILE.js' | asset_url }}" defer="defer"></script>
      

   3. Save the file.

Hook names

Your hook function must return the expected type. The hook name suffix indicates the expected return type:

Hook name ends with	Expected return type
Options	Object
Template	Tagged template literal
Array	Array of strings or objects
String	String
Number	Number
Action	Function

See also

• Autocomplete hooks
• Insights and Recommend hooks
• InstantSearch hooks
• Global events