> For the complete documentation index, see [llms.txt](https://alhena.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://alhena.gitbook.io/docs/features/chat-widget/product-recommendations.md).

# Product Recommendations

When a customer asks about products, Alhena's AI displays rich product cards directly in the chat conversation. Products are shown in a horizontally scrollable carousel, making it easy for customers to browse recommendations without leaving the chat.

**Requires:** [E-commerce integration](/docs/integrations/ecommerce.md) (Shopify, WooCommerce, Magento, etc.)

<figure><img src="https://2864633804-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKZ3bWFAIdLAqpW2uafZ4%2Fuploads%2Fgit-blob-85573c6d0d21a104738a7764c99a3c0eb9d95527%2Fchat-widget-product-recommendations.png?alt=media" alt=""><figcaption><p>[Chat Widget with product cards showing in carousel]</p></figcaption></figure>

## Product Cards

Each product card displays:

* **Product image**
* **Product title**
* **Price** (with support for sale prices and custom labels)
* **Star rating** and review count (when available)
* **Action buttons** — typically "View Product" and "Add to Cart"

When a customer asks something like "What running shoes do you have under $100?", the AI searches your product catalog and returns matching products as cards.

### Add to Cart

The "Add to Cart" button appears on product cards when you have a supported e-commerce integration or a custom add-to-cart handler configured.

* **Shopify:** Add to Cart works automatically on Shopify-hosted pages using the native Shopify cart API.
* **Other platforms:** Implement a custom handler using the `product:added_to_cart` event. See [Events](/docs/developer-reference/website-sdk/events.md#productadded_to_cart) for details.

## Product Carousel

When the AI recommends multiple products, they are displayed in a carousel — a horizontally scrollable row of product cards. Customers can swipe on mobile or use the left/right chevron buttons on desktop to browse through the recommendations.

## Outfit Builder

For fashion and apparel stores, the AI can suggest complete outfits. Outfit cards display:

* A **collage** of product images, with one hero image shown larger alongside smaller product tiles
* A **combined price** for all items in the outfit
* A **"View Look"** button that expands the outfit to show each product individually

> Contact the Alhena team to enable the Outfit Builder for your account.

## Boosting Products

You can influence which products the AI recommends by using the [Boost Products](/docs/ai-configuration/tuning/boosting-products.md) feature. Boosted products are given higher priority in recommendations.

## SDK Events

Product cards emit events you can use for analytics or custom cart integrations:

| Event                    | Description                             |
| ------------------------ | --------------------------------------- |
| `product:displayed`      | A product card was rendered in the chat |
| `product:page_opened`    | Customer clicked "View Product"         |
| `product:added_to_cart`  | Customer clicked "Add to Cart"          |
| `products:added_to_cart` | Multiple products added to cart at once |

See [Events](/docs/developer-reference/website-sdk/events.md#e-commerce-events) for callback parameters and examples.