Product Carousel

Display product cards in an interactive carousel.

Overview

Product carousels allow AI agents to showcase multiple products in a swipeable card format:

[Product 1] [Product 2] [Product 3] →

Each card displays:

• Product image
• Title
• Price
• Quick action buttons (View, Add to Cart)

When to Use

Product carousels are automatically triggered when:

• Customer asks about products
• AI recommends products
• Browsing assistance is provided
• Comparison shopping

Card Content

Required Fields

Field	Description
title	Product name
price	Formatted price
image	Product image URL
url	Link to product page

Optional Fields

Field	Description
compareAtPrice	Original price (for sales)
description	Short description (1-2 lines)
badge	Label like "Sale" or "New"
rating	Star rating (1-5)
reviewCount	Number of reviews
variants	Available variants
availability	In stock, low stock, out of stock

Example

Customer: "Show me blue widgets"

AI Response:

Here are our blue widgets:

[Carousel with 3 products]

• Blue Widget Mini - $19.99 [View] [Add to Cart]
• Blue Widget Standard - $29.99 [View] [Add to Cart]
• Blue Widget Pro - $49.99 [View] [Add to Cart]

Card Actions

View Button

Opens the product page:

• In new tab (default)
• In same tab (configurable)
• In mini-browser (mobile app)

Add to Cart

When connected to Shopify:

• Adds product to cart
• Shows confirmation
• Updates cart badge

For other stores, redirects to product page.

Quick Actions

Optional additional actions:

• "Quick View" - Expands details
• "Compare" - Adds to comparison
• "Wishlist" - Saves for later

Configuration

Dashboard Settings

In Settings → Widget → Rich Messages:

Setting	Options
Enable Carousels	Yes/No
Cards Per View	1-3
Show Prices	Yes/No
Show Ratings	Yes/No
Add to Cart	Yes/No

Card Size

Size	Best For
Compact	1 card visible, quick browse
Standard	2 cards visible, balanced
Wide	3 cards visible, comparison

Styling

Cards inherit your widget theme:

• Background matches widget
• Primary color for buttons
• Font styling consistent

Image Handling

Aspect Ratio	Display
Square (1:1)	Full display
Portrait	Cropped to fit
Landscape	Letterboxed

Recommended: 1:1 ratio, 400x400px minimum

Shopify Integration

When connected to Shopify, carousels are enhanced:

• Real-time inventory status
• Variant selection in card
• Direct add-to-cart
• Price sync

See Shopify Integration for setup.

Analytics

Track carousel interactions:

Event	Description
carousel_viewed	Carousel was displayed
product_clicked	Product card clicked
add_to_cart_clicked	Add to cart action
carousel_scrolled	User scrolled carousel

Best Practices

Product Selection

• Show 3-6 relevant products
• Lead with best matches
• Include price range variety

Images

• Use high-quality images
• Consistent styling
• Show product clearly

Copy

• Short, clear titles
• Highlight key features
• Include pricing