# CartCrossSell

> Cart-aware product recommendations driven by the store's upsell configuration

Canonical URL: https://fa7e86e3d553:3005/islands/cart/cart-cross-sell

> Reactive cross-sell recommendations for the cart drawer. The island reads upsell rules from the storefront cart configuration.

The effective Cart V2 profile creates this module from
`commerce_config.upsells`. Do not embed it in page source or pass normal
product data through island props.

## Preview

**Category**: Cart

## Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| heading | string | no | - | Optional heading above recommendations |
| max | number | no | 3 | Maximum number of recommendations |
| layout | enum | no | horizontal | `horizontal`, `grid`, or `stack` |
| size | `"sm" \| "md" \| "lg"` | no | Profile setting | Card scale |
| imageAspect | `"square" \| "portrait"` | no | Profile setting | Product-image shape |
| density | `"compact" \| "comfortable" \| "spacious"` | no | Profile setting | Card spacing |
| showPrice | boolean | no | Profile setting | Display price |
| showQuickAdd | boolean | no | true | Show add-to-cart controls |
| buttonLabel | string | no | Profile setting | Add-button text |
| placement | `"header" \| "after_line" \| "after_lines" \| "before_checkout"` | no | `"after_lines"` | Profile module placement |

## Profile module example

```json
{
  "heading": "Complete your routine",
  "layout": "horizontal",
  "placement": "after_lines",
  "max": 3,
  "showPrice": true,
  "showQuickAdd": true
}
```

## Usage

Place inside `DrawerShell` so it can subscribe to cart state and the
configured `commerce_config.upsells` rules. Do not pass product data through
the island props for the normal configuration-driven flow.

The module re-evaluates whenever cart lines change and hides itself when no
configured trigger matches.

## Stylable parts

`root`, `fallback`, `heading`, `item`, `item-image`, `item-info`,
`item-title`, `item-price`, and `add-button`.

## Related Islands

- [DrawerShell](/islands/cart/drawer-shell) — Provides the cart context
- [CartLines](/islands/cart/cart-lines) — Shows the current cart contents
- [QuickAdd](/islands/commerce/quick-add) — Standalone add-to-cart behavior