# 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="/files/b6kKCwRpGgEnefGoHIY9" 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://alhena.gitbook.io/docs/features/chat-widget/product-recommendations.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.