Customizing The Quick Add Overlay

GET THE QUICK ADD OVERLAY TO WORK FOR YOU

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.
notion image

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: The store's cart is automatically updated to reflect the new items
  • Alpine.js compatibility: Supports Alpine.js-based cart systems for seamless integration
 
⚠️ Opening the cart on quick add
Nobi automatically handles displaying cart drawers for customers using the Alpine theme on Shopify. For all other customers, you can use Nobi’s event dispatching system to show your cart when a customer adds an item to their cart via the Quick Add overlay. The following event is dispatched:
Event Name: Quick Add Product
Window Event: nobi-quick-add-product
Description: Fired when a shopper adds an item to their cart from Nobi’s quick add overlay
Data Properties:
conversationId (string) - The conversation ID associated with the current conversation
size (string) - The size of the variant that was added to cart
recommendationStrategy (string, optional) - The recommendation algorithm used
price (number) - The price of the variant that was added to the cart
productVariantId (string) - The added variant’s ID
See our documentation on Events for additional information on how handling events emitted by Nobi.

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"
});