Customizing The Quick Add Overlay

The Quick Add overlay is an interactive element that appears within Nobi's chat modal when customers hover over product recommendations. It provides a streamlined way for shoppers to add product variants directly to their cart without leaving the chat interface.

What it is

The Quick Add overlay displays available product variants (typically sizes or colors) as clickable buttons that allow customers to add specific product options to their cart instantly. The overlay appears with a smooth fade-in animation when customers hover over product tiles in the chat modal's product recommendations.

When it appears

The Quick Add overlay automatically appears when:

Customers hover over product recommendations in the chat interface

The product has multiple available variants (different sizes, colors, etc.)

The merchant has not disabled the feature

The customer is on a Shopify store (required for cart functionality)

How it works

Display Behavior

Hover activation: The overlay fades in when customers hover over a product tile

Fade out: The overlay disappears when the customer moves their mouse away

Responsive layout: Buttons automatically arrange in single or multiple rows based on the number of variants

Visual feedback: Successfully added variants show a green checkmark and color change

Cart Integration

Direct cart addition: Clicking a variant button immediately adds the item to the customer's cart

Quantity: Each click adds 1 quantity of the selected variant

Cart refresh: Automatic for Alpine.js themes. Other themes must register the onCartAdd hook (see below) for the Quick Add overlay to appear

Alpine.js compatibility: Alpine.js-based themes work automatically with no additional setup needed

⚠️ Opening the cart on quick add

For ecommerce sites, Nobi automatically handles displaying cart drawers for customers using the Alpine theme on Shopify. For all other sites, Nobi requires you to register a cart refresh hook so it knows how to update your cart UI after an item is added. The Quick Add overlay will only appear on your store if either Alpine is detected or you have registered the hook below:


window.NobiFeatureHooks = {
    onCartAdd: function(cartResponse) {
        // Your cart refresh logic here.
        // cartResponse is the JSON response from Shopify's cart/add.js endpoint.
        // Use it to update your cart icon, open your cart drawer, etc.
    }
};

This hook is called after a successful add-to-cart. The cartResponse parameter contains the Shopify cart data for the item that was just added.

Alternatively, you can listen for the nobi-quick-add-product window event for additional tracking or custom behavior. See our documentation on Events for more details.

Visual States

Default: Light gray border with white background

Hover: Subtle background highlight for better interactivity

Added: Green background with animated checkmark to confirm addition

Multi-row layout: Quick add buttons are centered when shown on a single row, and left-aligned when there are multiple rows

Configuration Options

For Custom Components

All Nobi custom components support hiding the Quick Add overlay via the hide-quick-add attribute:

Button Component


<nobi-button hide-quick-add="true"></nobi-button>

Search Bar Component


<nobi-search-bar hide-quick-add="true"></nobi-search-bar>

Toggle Component


<nobi-toggle hide-quick-add="true"></nobi-toggle>

For Javascript API

The Quick Add overlay can be controlled when opening the chat programmatically:


// Hide Quick Add for this session
Nobi.openChat({
    message: "Show me running shoes",
    hideQuickAdd: true
});

// Default behavior (Quick Add enabled)
Nobi.openChat({
    message: "Show me running shoes"
});

Customizing The Quick Add Overlay What it is When it appears How it works Display Behavior Cart Integration Visual States Configuration Options For Custom Components Button Component Search Bar Component Toggle Component For Javascript API