# Cart

> Cart islands — legacy CartDrawer and cart-profile islands for composable, customizable cart experiences.

Canonical URL: https://fa7e86e3d553:3005/islands/cart

All cart-related islands live here. `CartDrawer` is deprecated and should be
used only by existing legacy pages. New pages use the configured Cart V2
profile automatically.

## Legacy CartDrawer

Single monolithic island — drop in and done.

| Island | Purpose |
|--------|---------|
| [CartDrawer](/islands/cart/cart-drawer) | Slide-out cart drawer with built-in line items, subtotal, checkout |

## Cart V2 profiles (recommended)

The effective published cart profile chooses and configures atomic cart
islands inside DrawerShell. The renderer injects the complete experience after
page sections. Storefront page source must not manually embed these islands.

[Full Cart Profile Guide](/guides/cart-v2)

| Island | Purpose |
|--------|---------|
| [DrawerShell](/islands/cart/drawer-shell) | Multi-mode container (drawer, bottom-sheet, modal, fullscreen, dropdown) |
| [CartLines](/islands/cart/cart-lines) | Cart line items with quantity controls and remove |
| [CartSummary](/islands/cart/cart-summary) | Subtotal, discounts, taxes, total |
| [CartCheckoutButton](/islands/cart/cart-checkout-button) | Checkout CTA button |
| [CartProgressBar](/islands/cart/cart-progress-bar) | Free shipping / tiered discount progress bar |
| [CartDiscountInput](/islands/cart/cart-discount-input) | Promo code input with validation |
| [CartRewardProgress](/islands/cart/cart-reward-progress) | Cumulative reward milestones with gift and discount reconciliation |
| [CartCoupons](/islands/cart/cart-coupons) | Curated coupon summary, offer drawer, and manual code entry |
| [CartCrossSell](/islands/cart/cart-cross-sell) | Cart-aware recommendations from profile upsell configuration |

Configure a published store default, campaign assignment, or page assignment.
Purchase controls without an effective profile produce a validation/preview
warning. Do not add a Cart V2 flag to new page source.

## When to Use Which

| Scenario | Use |
|----------|-----|
| Existing page already using CartDrawer | Keep temporarily, then migrate |
| New commerce page | Cart profile (DrawerShell) |
| Premium brand wanting custom cart design | Cart profile (DrawerShell) |
| Need conditional upsells based on cart contents | Cart profile + Rules |
| Need different cart style on mobile vs desktop | Cart profile (responsive modes) |
| Need progress bars, discount inputs, cross-sells | Cart profile |

Add-to-cart opens the effective drawer only after a successful mutation. The
header cart button uses the same state and opens the same profile.