> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Autocomplete custom hooks

> Custom hooks that change the behavior of the Autocomplete menu.

export const SearchQuery = () => <Tooltip tip="The text users enter into a search box. In the Search API, this corresponds to the query parameter. A search query is often used with filters, facets, and other parameters, but these aren't part of the query text itself.">
    search query
  </Tooltip>;

export const Index = () => <Tooltip tip="An Algolia index is a searchable dataset that consists of records and configuration settings. These settings define how the records are searched and ranked.">
    index
  </Tooltip>;

export const Filter = () => <Tooltip tip="A filter is a condition that limits which records Algolia returns. Filters often use one or more facet-value pairs, such as brand:Apple AND color:red. You can also filter by numeric values, dates, tags, booleans, or geographic constraints." cta="Filtering" href="/doc/guides/managing-results/refine-results/faceting">
    filter
  </Tooltip>;

## `beforeAutocompleteAsyncFunction`

Use this hook to run asynchronous work (for example, external API requests) before Autocomplete continues.

### Parameters

This hook doesn't accept parameters.

### Returns

This hook doesn't return a value. Return a `Promise` to delay Autocomplete until your work completes.

### Examples

<AccordionGroup>
  <Accordion title="Delay Autocomplete until an async task completes">
    ```js JavaScript icon=code theme={"system"}
    const sleep = (ms, hookName) =>
    	new Promise((resolve) => {
    		console.log("sleeping for ", ms, hookName);
    		setTimeout(resolve, ms);
    	});

    document.addEventListener("algolia.hooks.initialize", () => {
    	algoliaShopify.hooks.registerHook(
    		"beforeAutocompleteAsyncFunction",
    		async () => {
    			console.log(
    				"----------- beforeAutocompleteAsyncFunction started ----------------",
    			);
    			await sleep(1000, "beforeAutocompleteAsyncFunction");
    		},
    	);
    });
    ```
  </Accordion>
</AccordionGroup>

## `beforeAutocompleteConfigurationOptions`

Modifies the global Autocomplete configuration before any plugin executes a <SearchQuery />.
This hook runs on every keystroke and lets you customize search parameters,
apply a <Filter />, update analytics tags, or change other search query settings across all Autocomplete sources.

### Parameters

<ParamField body="config" type="object">
  Configuration object.

  <Expandable>
    <ParamField body="searchClient" type="object">
      Instance of an Algolia Search API client.
    </ParamField>

    <ParamField body="queries" type="object[]">
      List of query objects.

      <Expandable>
        <ParamField body="indexName" type="string">
          Algolia <Index /> name.
        </ParamField>

        <ParamField body="query" type="string">
          Current search query.
        </ParamField>

        <ParamField body="params" type="object">
          [Search API parameters](/doc/api-reference/search-api-parameters), such as `filters`, `hitsPerPage`, or `analyticsTags`.
        </ParamField>
      </Expandable>
    </ParamField>
  </Expandable>
</ParamField>

<ParamField body="context" type="object">
  Context information.

  <Expandable>
    <ParamField body="pluginName" type="string">
      Name of the plugin triggering the query, such as `products`, `collections`, `articles`, or `pages`.
    </ParamField>

    <ParamField body="sourceId" type="string">
      Unique identifier for the Autocomplete [source](/doc/ui-libraries/autocomplete/core-concepts/sources).
    </ParamField>
  </Expandable>
</ParamField>

### Returns

<ResponseField name="config" type="object">
  Modified configuration object.
</ResponseField>

### Examples

<AccordionGroup>
  <Accordion title="Add analytics tags to product queries">
    This example adds the tags `autocomplete`, `products`, and `v2`
    to the search query for products only.

    ```js JavaScript icon=code highlight={10} theme={"system"}
    document.addEventListener("algolia.hooks.initialize", () => {
    	algoliaShopify.hooks.registerHook(
    		"beforeAutocompleteConfigurationOptions",
    		(config, context) => {
    			if (context.sourceId === "products") {
    				config.queries = config.queries.map((query) => ({
    					...query,
    					params: {
    						...query.params,
    						analyticsTags: ["autocomplete", "products", "v2"],
    					},
    				}));
    			}
    			return config;
    		},
    	);
    });
    ```
  </Accordion>

  <Accordion title="Add dynamic filters based on query">
    This example adds the filter `tags:sale` to the search,
    if the query includes the word `sale`.

    ```js JavaScript icon=code highlight={7,13} theme={"system"}
    document.addEventListener("algolia.hooks.initialize", () => {
    	algoliaShopify.hooks.registerHook(
    		"beforeAutocompleteConfigurationOptions",
    		(config, context) => {
    			if (
    				context.pluginName === "products" &&
    				config.queries[0].query.includes("sale")
    			) {
    				config.queries = config.queries.map((query) => ({
    					...query,
    					params: {
    						...query.params,
    						filters: "tags:sale",
    					},
    				}));
    			}
    			return config;
    		},
    	);
    });
    ```
  </Accordion>

  <Accordion title="Add rule contexts to product queries">
    This example adds custom `ruleContexts` to the product queries in Autocomplete.

    ```js JavaScript icon=code highlight={9} theme={"system"}
    document.addEventListener("algolia.hooks.initialize", () => {
    	algoliaShopify.hooks.registerHook(
    		"beforeAutocompleteConfigurationOptions", (config, context) => {
    			if (context.sourceId === "products") {
    				config.queries = config.queries.map((query) => ({
    					...query,
    					params: {
    						...query.params,
    						ruleContexts: ["custom-context", "test-context"],
    					},
    				}));
    			}
    			return config;
    		},
    	);
    });
    ```
  </Accordion>
</AccordionGroup>

## `beforeAutocompletePluginOptions`

Customizes individual plugin options during plugin construction.
This hook runs once per plugin at initialization time.
Use the hook to set static defaults like base filters, analytics tags, or custom transform functions.

### Parameters

<ParamField body="options" type="object">
  Plugin options.

  <Expandable>
    <ParamField body="searchParameters" type="object">
      [Search parameters](/doc/api-reference/search-api-parameters) for this plugin.
    </ParamField>

    <ParamField body="sourceId" type="string">
      Unique identifier for the Autocomplete source.
    </ParamField>

    <ParamField body="transformItems" type="function">
      Function for transforming items before they're rendered.
    </ParamField>

    <ParamField body="analyticsTags" type="string[]">
      [Analytics tags](/doc/guides/search-analytics/guides/segments).
    </ParamField>
  </Expandable>
</ParamField>

<ParamField body="context" type="object">
  Context information.

  <Expandable>
    <ParamField body="pluginName" type="string">
      Name of the plugin, such as `products`, `collections`, `articles`, or `pages`.
    </ParamField>

    <ParamField body="sourceId" type="string">
      Unique identifier for the Autocomplete [source](/doc/ui-libraries/autocomplete/core-concepts/sources).
    </ParamField>
  </Expandable>
</ParamField>

### Returns

<ResponseField name="options" type="object">
  Modified plugin options.
</ResponseField>

### Examples

<AccordionGroup>
  <Accordion title="Set base filters per plugin">
    ```js JavaScript icon=code highlight={6,8} theme={"system"}
    document.addEventListener("algolia.hooks.initialize", () => {
    	algoliaShopify.hooks.registerHook(
    		"beforeAutocompletePluginOptions",
    		(options, context) => {
    			if (context.pluginName === "products") {
    				options.searchParameters.filters = "inventory_quantity > 0";
    			} else if (context.pluginName === "collections") {
    				options.searchParameters.filters = "published:true";
    			}
    			return options;
    		},
    	);
    });
    ```
  </Accordion>

  <Accordion title="Customize hits per page per plugin">
    ```js JavaScript icon=code highlight={6,8} theme={"system"}
    document.addEventListener("algolia.hooks.initialize", () => {
    	algoliaShopify.hooks.registerHook(
    		"beforeAutocompletePluginOptions",
    		(options, context) => {
    			if (context.pluginName === "products") {
    				options.searchParameters.hitsPerPage = 12;
    			} else if (context.pluginName === "articles") {
    				options.searchParameters.hitsPerPage = 5;
    			}
    			return options;
    		},
    	);
    });
    ```
  </Accordion>
</AccordionGroup>

## `beforeAutocompletePluginsArray`

Manages the plugin array before creating the Autocomplete instance.
This hook runs once at initialization and lets you add and remove plugins, or reorder the plugin array.

<Tip>
  To work with `plugins`, use the `arguments` object to extract them into an array.
</Tip>

### Parameters

<ParamField body="...plugins" type="any[]">
  List of plugins passed to the Autocomplete instance.
</ParamField>

### Returns

<ResponseField name="plugins" type="any[]">
  Modified plugin list.
</ResponseField>

### Examples

<AccordionGroup>
  <Accordion title="Remove articles and pages plugins">
    This example removes the `articles` and `pages` plugins.

    ```js JavaScript icon=code highlight={16-19} theme={"system"}
    document.addEventListener("algolia.hooks.initialize", () => {
    	algoliaShopify.hooks.registerHook(
    		"beforeAutocompletePluginsArray",
    		function () {
    			// Extract plugins from arguments
    			var plugins = Array.prototype.slice.call(arguments);

    			// Remove articles and pages plugins
    			return plugins.filter((plugin) => {
    				if (!plugin || !plugin.getSources) return true;

    				var sources = plugin.getSources({ query: "" });
    				if (!sources || !sources.length) return true;

    				// Remove plugins that expose articles or pages
    				return !sources.some(
    					(source) =>
    						source.sourceId === "articles" || source.sourceId === "pages",
    				);
    			});
    		},
    	);
    });
    ```
  </Accordion>
</AccordionGroup>

## `beforeAutocompleteOptions`

Use this hook to set or change Autocomplete options, such as the placeholder text.

### Parameters

<ParamField body="options" type="object">
  [Autocomplete options](/doc/ui-libraries/autocomplete/api-reference/autocomplete-js/autocomplete#parameters).
</ParamField>

### Returns

<ResponseField name="options" type="object">
  Modified Autocomplete options.
</ResponseField>

### Examples

<AccordionGroup>
  <Accordion title="Change the placeholder text">
    This example changes the placeholder text.

    ```js JavaScript icon=code highlight={4} theme={"system"}
    document.addEventListener("algolia.hooks.initialize", () => {
    	algoliaShopify.hooks.registerHook("beforeAutocompleteOptions", (options) => {
    		// Change the placeholder text of the Autocomplete menu
    		options.placeholder = "Search our products";
    		return options;
    	});
    });
    ```
  </Accordion>
</AccordionGroup>

## `beforeAutocompleteFiltersString`

Use this hook to add or override [filters](/doc/api-reference/api-parameters/filters) in the Autocomplete menu.

### Parameters

<ParamField body="filters" type="string">
  Filters.
</ParamField>

### Returns

<ResponseField name="filters" type="string">
  Modified filters.
</ResponseField>

### Examples

<AccordionGroup>
  <Accordion title="Return a custom filter">
    This example returns a custom filter instead of the default.

    ```js JavaScript icon=code highlight={6} theme={"system"}
    document.addEventListener("algolia.hooks.initialize", () => {
    	algoliaShopify.hooks.registerHook(
    		"beforeAutocompleteFiltersString",
    		(_defaultFilter) => {
    			// Return a custom filter instead of the default filter.
    			return "price > 17";
    		},
    	);
    });
    ```
  </Accordion>
</AccordionGroup>

## `beforeAutocompleteRedirectUrlOptions`

Changes the default [parameters](/doc/ui-libraries/autocomplete/api-reference/autocomplete-plugin-redirect-url/createRedirectUrlPlugin#parameters) of the
[`createRedirectUrlPlugin`](/doc/ui-libraries/autocomplete/api-reference/autocomplete-plugin-redirect-url/createRedirectUrlPlugin) function.

### Parameters

<ParamField body="options" type="object">
  Redirect URL plugin options.
</ParamField>

### Returns

<ResponseField name="options" type="object">
  Modified Redirect URL plugin options.
</ResponseField>

### Examples

<AccordionGroup>
  <Accordion title="Add a custom class to redirect links">
    This example changes the template for the redirect link by adding a custom CSS class.

    ```js JavaScript icon=code theme={"system"}
    document.addEventListener("algolia.hooks.initialize", () => {
    	algoliaShopify.hooks.registerHook(
    		"beforeAutocompleteRedirectUrlOptions",
    		(options) => {
    			// Change the default template for rendering redirect items
    			return {
    				templates: {
    					item({ html, state }) {
    						return html`<a className="myCustomClass">${state.query}</a>`;
    					},
    				},
    			};
    		},
    	);
    });
    ```
  </Accordion>
</AccordionGroup>

## `beforeAutocompleteMainTemplate`

Changes the HTML template that renders the [Autocomplete panel](/doc/ui-libraries/autocomplete/api-reference/autocomplete-js/autocomplete#param-render).
Use this to render an Autocomplete multi-panel layout.

### Parameters

<ParamField body="_defaultTemplate">
  Default template.
</ParamField>

<ParamField body="templateOptions" type="object">
  Template options including the `html` tagged template function.
</ParamField>

<ParamField body="elements" type="object">
  Template elements.

  <Expandable>
    <ParamField body="querySuggestionsPlugin">
      Query suggestions panel element.
    </ParamField>

    <ParamField body="collections">
      Collections panel element.
    </ParamField>

    <ParamField body="articles">
      Articles panel element.
    </ParamField>

    <ParamField body="pages">
      Pages panel element.
    </ParamField>

    <ParamField body="redirectUrlPlugin">
      Redirect URL panel element.
    </ParamField>

    <ParamField body="products">
      Products panel element.
    </ParamField>
  </Expandable>
</ParamField>

<ParamField body="displaySuggestions" type="boolean">
  Whether to render query suggestions.
</ParamField>

### Returns

<ResponseField name="template">
  Template to render.
</ResponseField>

### Examples

<AccordionGroup>
  <Accordion title="Render a two-column layout">
    This example returns a custom two-column layout as template.

    ```js JavaScript icon=code theme={"system"}
    document.addEventListener("algolia.hooks.initialize", () => {
    	algoliaShopify.hooks.registerHook(
    		"beforeAutocompleteMainTemplate",
    		(_defaultTemplate, templateOptions, elements, displaySuggestions) => {
    			const { html } = templateOptions;
    			// Don't return the default template and return a custom two-column layout instead
    			return html`
          <div class="aa-PanelLayout aa-Panel--scrollable">
            <div class="aa-PanelSections">
              <div class="aa-PanelSection--left">
                ${
    							displaySuggestions &&
    							html`
                    <div class="aa-SourceHeader">
                      <span class="aa-SourceHeaderTitle"
                        >${algoliaShopify.translations.suggestions}</span
                      >
                      <div class="aa-SourceHeaderLine" />
                    </div>
                    ${elements.querySuggestionsPlugin}
                  `
    						}
                ${elements.collections} ${elements.articles} ${elements.pages}
                ${elements.redirectUrlPlugin}
              </div>
              <div class="aa-PanelSection--right">
                ${elements.products}
              </div>
            </div>
          </div>
        `;
    		},
    	);
    });
    ```
  </Accordion>
</AccordionGroup>

## `beforeAutocompleteMainProductsTemplate`

Renders the product section in the Autocomplete menu.

### Parameters

<ParamField body="_defaultTemplate">
  Default template.
</ParamField>

<ParamField body="templateOptions">
  Template options including the `html` tagged template function.
</ParamField>

<ParamField body="elements" type="object">
  Contains the products element.

  <Expandable>
    <ParamField body="products">
      Products section element.
    </ParamField>
  </Expandable>
</ParamField>

### Returns

<ResponseField name="template">
  Template to render.
</ResponseField>

### Examples

<AccordionGroup>
  <Accordion title="Render the products section">
    ```js JavaScript icon=code theme={"system"}
    document.addEventListener("algolia.hooks.initialize", () => {
    	algoliaShopify.hooks.registerHook(
    		"beforeAutocompleteMainProductsTemplate",
    		(_defaultTemplate, templateOptions, elements) => {
    			const { html } = templateOptions;
    			return html`
          <div class="aa-PanelLayout aa-Panel--scrollable">
            <div class="aa-PanelSection">
              ${elements.products}
            </div>
          </div>
        `;
    		},
    	);
    });
    ```
  </Accordion>
</AccordionGroup>

## `beforeAutocompleteNoResultsTemplate`

Renders a template when Autocomplete doesn't return results.

### Parameters

<ParamField body="_defaultTemplate">
  Default template.
</ParamField>

<ParamField body="templateOptions">
  Template options including the `html` and `state` properties.
</ParamField>

### Returns

<ResponseField name="template">
  Template to render.
</ResponseField>

### Examples

<AccordionGroup>
  <Accordion title="Customize the no results panel">
    ```js JavaScript icon=code theme={"system"}
    document.addEventListener("algolia.hooks.initialize", () => {
    	algoliaShopify.hooks.registerHook(
    		"beforeAutocompleteNoResultsTemplate",
    		(_defaultTemplate, templateOptions) => {
    			const { html, state } = templateOptions;
    			return html`
          <div class="aa-PanelLayout aa-Panel--scrollable">
            <p class="aa-NoResultsHeader">
              ${algoliaShopify.translation_helpers.no_result_for(state.query)}
            </p>
            <a class="aa-NoResultsLink" href="${window.Shopify.routes.root}search?q=">
              ${algoliaShopify.translations.allProducts}
            </a>
          </div>
        `;
    		},
    	);
    });
    ```
  </Accordion>
</AccordionGroup>

## `beforeAutocompleteHeaderTemplate`

Renders a header section at the top of the Autocomplete results panel.

### Parameters

<ParamField body="_defaultTemplate">
  Default template.
</ParamField>

<ParamField body="templateOptions">
  Template options including the `html` and `state` properties.
</ParamField>

<ParamField body="resource" type="string">
  Resource type.
</ParamField>

### Returns

<ResponseField name="template">
  Template to render.
</ResponseField>

### Examples

<AccordionGroup>
  <Accordion title="Customize the results header">
    ```js JavaScript icon=code theme={"system"}
    document.addEventListener("algolia.hooks.initialize", () => {
    	algoliaShopify.hooks.registerHook(
    		"beforeAutocompleteHeaderTemplate",
    		(_defaultTemplate, templateOptions, resource) => {
    			const { html, state } = templateOptions;
    			return html`
          <div class="aa-SourceHeader">
            <span class="aa-SourceHeaderTitle">
              ${algoliaShopify.translation_helpers.render_title(
    						resource,
    						state.query,
    					)}
            </span>
            <div class="aa-SourceHeaderLine" />
          </div>
        `;
    		},
    	);
    });
    ```
  </Accordion>
</AccordionGroup>

## `beforeAutocompleteFooterTemplate`

Renders a footer section at the bottom of the Autocomplete results panel.
To render a footer, select the **Show See All products** option in the Autocomplete search options in your store's admin.

### Parameters

<ParamField body="_defaultTemplate">
  Default template.
</ParamField>

<ParamField body="templateOptions">
  Template options including the `html` and `state` properties.
</ParamField>

### Returns

<ResponseField name="template">
  Template to render.
</ResponseField>

### Examples

<AccordionGroup>
  <Accordion title="Render a footer with a “See all products” link">
    ```js JavaScript icon=code theme={"system"}
    document.addEventListener("algolia.hooks.initialize", () => {
    	algoliaShopify.hooks.registerHook(
    		"beforeAutocompleteFooterTemplate",
    		(_defaultTemplate, templateOptions) => {
    			const { html, state } = templateOptions;
    			return html`
          <div class="aa-footer">
            <a
              class="aa-SeeAllBtn"
              href="${window.Shopify.routes.root}search?q=${state.query}"
            >
              ${algoliaShopify.translations.allProducts}
              (${algoliaShopify.helpers.formatNumber(state.context.nbProducts)})
            </a>
          </div>
        `;
    		},
    	);
    });
    ```
  </Accordion>
</AccordionGroup>

## `beforeAutocompleteProductTemplate`

Template for rendering each product hit in the Autocomplete results.

If you are using this template, ensure you also call `trackSearchAttribution(item)` to properly handle events.

### Parameters

<ParamField body="_defaultTemplate">
  Default template.
</ParamField>

<ParamField body="templateOptions">
  Template options including `html`, `item`, and `components`.
</ParamField>

<ParamField body="distinct" type="boolean">
  Whether distinct mode is enabled.
</ParamField>

<ParamField body="itemLink" type="string">
  Product URL.
</ParamField>

<ParamField body="trackSearchAttribution">
  Function to track search attribution.
</ParamField>

### Returns

<ResponseField name="template">
  Template to render.
</ResponseField>

### Examples

<AccordionGroup>
  <Accordion title="Customize product items">
    ```js JavaScript icon=code theme={"system"}
    document.addEventListener("algolia.hooks.initialize", () => {
    	algoliaShopify.hooks.registerHook(
    		"beforeAutocompleteProductTemplate",
    		(
    			_defaultTemplate,
    			templateOptions,
    			distinct,
    			itemLink,
    			trackSearchAttribution,
    		) => {
    			// Modify default options, then return them
    			const { html, item, components } = templateOptions;
    			return html`
        <a
          href="${itemLink}"
          class="aa-ItemLink aa-ProductItem"
          onClick="${() => trackSearchAttribution(item)}"
        >
          <div class="aa-ItemContent">
            <div class="aa-ItemPicture aa-ItemPicture--loaded">
              <img
                src="${algoliaShopify.helpers.renderImage(item, 125).src}"
                sizes="${algoliaShopify.helpers.renderImage(item, 125).sizes}"
                alt="${item.title}"
              />
            </div>
            <div class="aa-ItemContentBody">
              <div class="aa-ItemContentBrand">
                ${
    							item.product_type &&
    							components.Highlight({ hit: item, attribute: "product_type" })
    						}
               removing vendor
              </div>
              <div class="aa-ItemContentTitleWrapper">
                <div class="aa-ItemContentTitle">
                  ${components.Highlight({ hit: item, attribute: "title" })}
                  <span class="algolia-variant">
                    ${algoliaShopify.helpers.variantTitleAddition(item, distinct)}
                  </span>
                </div>
              </div>
              <div class="aa-ItemContentPrice">
                <div class="aa-ItemContentPriceCurrent">
                  ${algoliaShopify.helpers.displayPrice(item, distinct)}
                </div>
              </div>
            </div>
          </div>
        </a>
      `;
    		},
    	);
    });
    ```
  </Accordion>
</AccordionGroup>

## `beforeAutocompleteArticlesTemplate`

Template for rendering each article hit in the Autocomplete results.

### Parameters

<ParamField body="_defaultTemplate">
  Default template.
</ParamField>

<ParamField body="templateOptions">
  Template options including `html`, `item`, and `components`.
</ParamField>

<ParamField body="itemLink" type="string">
  Article URL.
</ParamField>

### Returns

<ResponseField name="template">
  Template to render.
</ResponseField>

### Examples

<AccordionGroup>
  <Accordion title="Customize article items">
    ```js JavaScript icon=code theme={"system"}
    document.addEventListener("algolia.hooks.initialize", () => {
    	algoliaShopify.hooks.registerHook(
    		"beforeAutocompleteArticlesTemplate",
    		(_defaultTemplate, templateOptions, itemLink) => {
    			const { item, html, components } = templateOptions;
    			return html`
        <a href="${itemLink}" class="aa-ItemLink">
          <div class="aa-ItemWrapper">
            <div class="aa-ItemContent">
              <div class="aa-ItemIcon aa-ItemIcon--noBorder">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"
                  />
                </svg>
              </div>
              <div class="aa-ItemContentBody">
                <div class="aa-ItemContentTitle">
                  ${components.Highlight({ hit: item, attribute: "title" })}
                </div>
              </div>
            </div>
          </div>
        </a>
      `;
    		},
    	);
    });
    ```
  </Accordion>
</AccordionGroup>

## `beforeAutocompleteCollectionsTemplate`

Template for rendering each collection hit in the Autocomplete results.

### Parameters

<ParamField body="_defaultTemplate">
  Default template.
</ParamField>

<ParamField body="templateOptions">
  Template options including `html`, `item`, and `components`.
</ParamField>

<ParamField body="itemLink" type="string">
  Collection URL.
</ParamField>

### Returns

<ResponseField name="template">
  Template to render.
</ResponseField>

### Examples

<AccordionGroup>
  <Accordion title="Customize collection items">
    ```js JavaScript icon=code theme={"system"}
    document.addEventListener("algolia.hooks.initialize", () => {
    	algoliaShopify.hooks.registerHook(
    		"beforeAutocompleteCollectionsTemplate",
    		(_defaultTemplate, templateOptions, itemLink) => {
    			const { html, item, components } = templateOptions;
    			return html`
          <a href="${itemLink}" class="aa-ItemLink">
            <div class="aa-ItemWrapper">
              <div class="aa-ItemContent">
                <div class="aa-ItemIcon aa-ItemIcon--noBorder">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"
                    />
                  </svg>
                </div>
                <div class="aa-ItemContentBody">
                  <div class="aa-ItemContentTitle">
                    ${components.Highlight({ hit: item, attribute: "title" })}
                  </div>
                </div>
              </div>
            </div>
          </a>
        `;
    		},
    	);
    });
    ```
  </Accordion>
</AccordionGroup>

## `beforeAutocompletePagesTemplate`

Template for rendering each pages hit in the Autocomplete results.

### Parameters

<ParamField body="_defaultTemplate">
  Default template.
</ParamField>

<ParamField body="templateOptions">
  Template options including `html`, `item`, and `components`.
</ParamField>

<ParamField body="itemLink" type="string">
  Page URL.
</ParamField>

### Returns

<ResponseField name="template">
  Template to render.
</ResponseField>

### Examples

<AccordionGroup>
  <Accordion title="Customize page items">
    ```js JavaScript icon=code theme={"system"}
    document.addEventListener("algolia.hooks.initialize", () => {
    	algoliaShopify.hooks.registerHook(
    		"beforeAutocompletePagesTemplate",
    		(_defaultTemplate, templateOptions, itemLink) => {
    			const { html, item, components } = templateOptions;
    			return html`
          <a href="${itemLink}" class="aa-ItemLink aa-ProductItem">
            <div class="aa-ItemWrapper">
              <div class="aa-ItemContent">
                <div class="aa-ItemIcon aa-ItemIcon--noBorder">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                    />
                  </svg>
                </div>
                <div class="aa-ItemContentBody">
                  <div class="aa-ItemContentTitle">
                    ${components.Highlight({ hit: item, attribute: "title" })}
                  </div>
                </div>
              </div>
            </div>
          </a>
        `;
    		},
    	);
    });
    ```
  </Accordion>
</AccordionGroup>

## `beforeAutocompleteSuggestionsTemplate`

Template for rendering each search suggestion in the Autocomplete menu.

### Parameters

<ParamField body="_defaultTemplate">
  Default template.
</ParamField>

<ParamField body="templateOptions">
  Template options including `html`, `item`, and `components`.
</ParamField>

### Returns

<ResponseField name="template">
  Template to render.
</ResponseField>

### Examples

<AccordionGroup>
  <Accordion title="Customize suggestions">
    ```js JavaScript icon=code theme={"system"}
    document.addEventListener("algolia.hooks.initialize", () => {
    	algoliaShopify.hooks.registerHook(
    		"beforeAutocompleteSuggestionsTemplate",
    		(_defaultTemplate, templateOptions) => {
    			const { html, item, components } = templateOptions;
    			return html`
          <a
            class="aa-ItemLink aa-ItemWrapper"
            href="${window.Shopify.routes.root}search?q=${item.query}"
          >
            <div class="aa-ItemContent">
              <div class="aa-ItemIcon aa-ItemIcon--noBorder">
                <svg viewBox="0 0 24 24" fill="currentColor">
                  <path d="M16.041 15.856c-0.034 0.026-0.067 0.055-0.099 0.087s-0.060 0.064-0.087 0.099c-1.258 1.213-2.969 1.958-4.855 1.958-1.933 0-3.682-0.782-4.95-2.050s-2.050-3.017-2.050-4.95 0.782-3.682 2.050-4.95 3.017-2.050 4.95-2.050 3.682 0.782 4.95 2.050 2.050 3.017 2.050 4.95c0 1.886-0.745 3.597-1.959 4.856zM21.707 20.293l-3.675-3.675c1.231-1.54 1.968-3.493 1.968-5.618 0-2.485-1.008-4.736-2.636-6.364s-3.879-2.636-6.364-2.636-4.736 1.008-6.364 2.636-2.636 3.879-2.636 6.364 1.008 4.736 2.636 6.364 3.879 2.636 6.364 2.636c2.125 0 4.078-0.737 5.618-1.968l3.675 3.675c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z" />
                </svg>
              </div>
              <div class="aa-ItemContentBody">
                <div class="aa-ItemContentTitle">
                  ${components.Highlight({ hit: item, attribute: "query" })}
                </div>
              </div>
            </div>
            <div class="aa-ItemActions">
               <button
                 class="aa-ItemActionButton"
                 title="Fill query with ${item.query}"
               >
                 <svg viewBox="0 0 24 24" fill="currentColor">
                   <path d="M8 17v-7.586l8.293 8.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-8.293-8.293h7.586c0.552 0 1-0.448 1-1s-0.448-1-1-1h-10c-0.552 0-1 0.448-1 1v10c0 0.552 0.448 1 1 1s1-0.448 1-1z" />
                 </svg>
               </button>
            </div>
          </a>
        `;
    		},
    	);
    });
    ```
  </Accordion>
</AccordionGroup>

## `beforeAutocompleteProductTransformResponseHits`

Modifies the `hits` before rendering them in the Autocomplete menu.
For more information, see [`transformResponse`](/doc/ui-libraries/autocomplete/api-reference/autocomplete-js/getAlgoliaResults#param-transform-response).

### Parameters

<ParamField body="hits" type="array">
  Search results.
</ParamField>

<ParamField body="results" type="object">
  Full results from Algolia.
</ParamField>

### Returns

<ResponseField name="hits" type="array">
  Modified search results.
</ResponseField>

### Examples

<AccordionGroup>
  <Accordion title="Transform product hits before rendering">
    ```js JavaScript icon=code theme={"system"}
    document.addEventListener("algolia.hooks.initialize", () => {
    	algoliaShopify.hooks.registerHook(
    		"beforeAutocompleteProductTransformResponseHits",
    		(hits, results) => {
    			console.log(hits);
    			return hits;
    		},
    	);
    });
    ```
  </Accordion>
</AccordionGroup>

## `afterAutocompleteProductClickAction` (deprecated)

<Note>
  This hook is deprecated.
  Use [`beforeAutocompleteProductTemplate`](#beforeautocompleteproducttemplate) instead.
</Note>

Adds a click handler function to the product template.
Call this hook after a user clicks a product.

### Parameters

<ParamField body="_" type="any">
  First parameter (unused).
</ParamField>

<ParamField body="line_item" type="object">
  Product line item that was clicked.
</ParamField>

## See also

* [Add custom hooks](/doc/integration/shopify/building-search-ui/frontend-custom-events)
* [Insights and Recommend hooks](/doc/integration/shopify/building-search-ui/insights-recommend-hooks)
* [InstantSearch hooks](/doc/integration/shopify/building-search-ui/instantsearch-hooks)