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

# Insights and Recommend custom hooks

> Custom hooks that change the behavior of recommendations and the Insights integration for sending events.

## Insights hooks

The following hooks change aspects of the Insights integration for sending [click and conversion events](/doc/integration/shopify/building-search-ui/events).

### `beforeAlgoliaAnalyticsOptions`

Changes options for the Insights library.

### Parameters

<ParamField body="options" type="object">
  Insights [options](/doc/libraries/search-insights/init#parameters).
</ParamField>

### Returns

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

### Examples

<AccordionGroup>
  <Accordion title="Opt out of Insights events">
    Set `userHasOptedOut` to `true` to prevent the integration from sending Insights events.

    ```js JavaScript icon=code theme={"system"}
    document.addEventListener("algolia.hooks.initialize", () => {
    	algoliaShopify.hooks.registerHook(
    		"beforeAlgoliaAnalyticsOptions",
    		(options) => {
    			return {
    				...options,
    				userHasOptedOut: true,
    			};
    		},
    	);
    });
    ```
  </Accordion>
</AccordionGroup>

### `beforeAddToCartSelector`

Changes the CSS selector for the add-to-cart button.

### Parameters

<ParamField body="selector" type="string">
  Default CSS selector for the add-to-cart button: `'[name="add"]'`.
</ParamField>

### Returns

<ResponseField name="selector" type="string">
  Modified CSS selector.
</ResponseField>

### Examples

<AccordionGroup>
  <Accordion title="Use a custom add-to-cart selector">
    Return a custom selector if your theme uses a different add-to-cart button.

    ```js JavaScript icon=code theme={"system"}
    document.addEventListener("algolia.hooks.initialize", () => {
    	algoliaShopify.hooks.registerHook("beforeAddToCartSelector", (selector) => {
    		return "#add-to-cart";
    	});
    });
    ```
  </Accordion>
</AccordionGroup>

## Recommend hook

This hook changes the behavior of recommendations from Algolia Recommend.

### `beforeRecommendHitTemplate`

Customize the HTML template that renders the recommendations panel.

### Parameters

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

<ParamField body="html">
  Tagged template function for rendering HTML.
</ParamField>

<ParamField body="item" type="object">
  Recommendation item.
</ParamField>

### Returns

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

### Examples

<AccordionGroup>
  <Accordion title="Customize the recommendation item template">
    Return a custom HTML template to match your theme's recommendation card layout.

    ```js JavaScript icon=code theme={"system"}
    document.addEventListener("algolia.hooks.initialize", () => {
    	algoliaShopify.hooks.registerHook(
    		"beforeRecommendHitTemplate",
    		(_defaultTemplate, html, item) => {
    			return html`
            <div
              id="${item.objectID}"
              class="card-wrapper product-card-wrapper underline-links-hover"
            >
              <div class="card card--standard card--media" style="--ratio-percent: 100%;">
                <div
                  id="Card--${item.objectID}"
                  class="card__inner gradient ratio"
                  style="--ratio-percent: 100%;"
                >
                  <div class="card__content">
                    <div class="card__information">
                      <h3 class="card__heading">
                        <a
                          id="StandardCardNoMediaLink--${item.objectID}"
                          class="full-unstyled-link"
                          aria-labelledby="StandardCardNoMediaLink--${item.objectID} NoMediaStandardBadge--${item.objectID}"
                        >
                          ${item.title}
                        </a>
                      </h3>
                    </div>
                    <div class="card__badge bottom left"></div>
                  </div>
                </div>
              </div>
            </div>
          `;
    		},
    	);
    });
    ```
  </Accordion>
</AccordionGroup>

## `beforeAddToCartSelectorString` (deprecated)

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

Changes the CSS selector for the add-to-cart button.

### Parameters

<ParamField body="_selector" type="string" default="'[name=&#x22;add&#x22;]'">
  CSS selector.
</ParamField>

### Returns

<ResponseField name="selector" type="string">
  CSS selector.
</ResponseField>

## See also

* [Add custom hooks](/doc/integration/shopify/building-search-ui/frontend-custom-events)
* [Autocomplete hooks](/doc/integration/shopify/building-search-ui/autocomplete-hooks)
* [InstantSearch hooks](/doc/integration/shopify/building-search-ui/instantsearch-hooks)