Hooks

Nobi’s frontend hooks allow you to inject custom JavaScript logic into Nobi to control the display and behavior of products in the Nobi assistant. This enables fine-grained control over your product presentation without requiring code changes to Nobi itself.

How It Works

Nobi looks for custom hook functions on the global window.NobiFeatureHooks object. When Nobi encounters a hook point, it calls the corresponding function if it exists, passing relevant data as parameters. If the hook doesn't exist or encounters an error, Nobi falls back to its default behavior.

Setting Up Hooks

Add a global NobiFeatureHooks object to your site before Nobi loads:


window.NobiFeatureHooks = {
	hookName: function(param1, param2, etc) {
		// Your custom logic here
	}
};

Available Hooks

Show a badge or extra message for product variants

Hook name: shouldShowProductVariantMessage

Controls whether to display the product variant message (which can be either the product's message-to-shopper field or a headline from product tags).

Parameters:

productVariant - The product variant object being rendered

Default Value: true

Returns:

boolean - true to show the message, false to hide it

Example:


window.NobiFeatureHooks = {
	shouldShowProductVariantMessage: function(productVariant) {
		// Use external method to show message
		return myMerchantConfig.showBadges;
}

Update the cart after quick add

Hook name: onCartAdd
Called after a shopper adds an item to their cart via the Quick Add overlay. Use this to refresh your cart drawer, update the cart count badge, or trigger any other cart UI updates. The Quick Add overlay will only appear on your store if you have registered this hook (or if your store uses Alpine.js).


window.NobiFeatureHooks = {
    onCartAdd: function(cartResponse) {
        // cartResponse is the JSON from Shopify cart/add.js
        // Refresh your cart drawer, update count badge, etc.
    }
};

Transform product names

Hook name: transformProductName
Called when Nobi displays a product name on a product card. Use this to apply custom formatting to product names. Nobi already applies built-in transforms (stripping :: suffixes, converting all-caps to title case), and this hook runs after those. Return the transformed name.


window.NobiFeatureHooks = {
    transformProductName: function(name) {
        // name has already been cleaned by Nobi
        // (:: suffixes stripped, all-caps converted to title case)
        // Apply any additional formatting here
        return name;
    }
};

Apply the filters chosen in the filter panel

Hook name: onFiltersSelected
This hook is only used by Ask AI in Filters, which is currently in beta. Nobi does not call it anywhere else.

Called once Nobi has worked out which of your own filters a shopper's words mean, before anything on the page changes. Use it to apply those filters the way your listing page applies them when a shopper ticks a box, so the shopper keeps their place and their scroll position.

Return true to tell Nobi you have applied them, and Nobi will leave the page alone. Return anything else, including nothing at all, and Nobi loads the filtered address instead. That still works, but it reloads the page.

Parameters:

chosenFilters.filters - each chosen filter as { param, value }, using the parameter names and values your own page expects
chosenFilters.url - the address those filters produce, if you would rather navigate than apply them yourself
chosenFilters.query - what the shopper typed, in their own words

Returns:

boolean - true when you have applied the filters yourself

Example:


window.NobiFeatureHooks = {
    onFiltersSelected: function(chosenFilters) {
        // Apply them the way your own filter controls do
        myListingPage.apply(chosenFilters.filters);
        return true;
    }
};

Tell Nobi which filters your page offers

Hook name: getAvailableFilters
This hook is only used by Ask AI in Filters, which is currently in beta. Nobi does not call it anywhere else.

By default Nobi reads your filter panel straight off the page, which works on a standard Shopify storefront and asks nothing of you. Answer this hook instead when your filters are not plain checkboxes, or when you would rather Nobi did not read your markup at all. Whatever you return here is the only thing Nobi is allowed to choose from.

Setting detect-filters="off" on the element stops Nobi reading the page entirely, so this hook becomes the only source. Note that a shopper cannot then filter by price, because a price range can only be read off the page.

Returns:

An array of filter options, each with facetName (the heading a shopper reads, such as "Material"), param (the URL parameter your page expects), value (the value that parameter takes, which may be an opaque id), and label (what the shopper reads, such as "Caiman")

Example:


window.NobiFeatureHooks = {
    getAvailableFilters: function() {
        return [
            {
                facetName: 'Material',
                param: 'filter.p.m.custom.material',
                value: 'caiman',
                label: 'Caiman'
            }
        ];
    }
};

Error Handling

If your hook function throws an error, Nobi will:

Log a warning to the browser console
Fall back to the default behavior for that hook point

This ensures errors in your custom logic won't break the Nobi assistant.

Hooks How It Works Setting Up Hooks Available Hooks Show a badge or extra message for product variants Update the cart after quick add Transform product names Apply the filters chosen in the filter panel Tell Nobi which filters your page offers Error Handling