> ## Documentation Index
> Fetch the complete documentation index at: https://docs.khaime.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Cart Page

> Give shoppers a dedicated /cart page on your WordPress site.

# Khaime Cart Page

The `[khaime_cart]` shortcode renders a full Khaime-powered cart page. It shares the same cart state as the storefront's slide-out drawer, so items stay in sync across both.

<Note>
  This shortcode ships inside the **Khaime Storefront** plugin (v2.0.0+). No separate install.
</Note>

## When you need this

By default the storefront uses an overlay drawer for the cart. Use the cart page when you want:

* A **standalone `/cart` page** that shoppers can bookmark or link to.
* A **pre-checkout review step** instead of the drawer.

## Basic Usage

```
[khaime_cart]
```

## Wiring it to the storefront

The cart page only becomes the destination of the cart icon when the storefront is configured to use it. Set **Cart display** in **Settings → Khaime** (or pass `cart_display` on `[khaime_storefront]`) to one of:

| Mode               | What happens                                            |
| ------------------ | ------------------------------------------------------- |
| `drawer` (default) | Cart icon opens the slide-out drawer. Cart page unused. |
| `page`             | Cart icon navigates to the Cart Page URL. No drawer.    |

<Warning>
  `page` mode requires a published page containing `[khaime_cart]` at the configured Cart Page URL — otherwise clicking the cart icon 404s.
</Warning>

<Note>
  The legacy `both` mode was retired in v2.0.0. Stores still set to `both` are automatically mapped to `page` on save.
</Note>

## Setup

1. Create a WordPress page with slug `cart` (URL: `/cart`).
2. Paste `[khaime_cart]` into the page content.
3. In **Settings → Khaime**, set **Cart display** to `page`.
4. Ensure **Cart Page URL** matches the page slug (default `/cart`).

## Full Example

```
[khaime_cart
  continue_url="/store"
  empty_message="Your cart is empty — go pick something out."
]
```

## Attributes

| Attribute       | Description                                              | Default                          |
| --------------- | -------------------------------------------------------- | -------------------------------- |
| `continue_url`  | "Continue shopping" destination shown in the empty state | (from settings → Store Page URL) |
| `empty_message` | Text shown when the cart has no items                    | `Your cart is empty.`            |

<Note>
  Theme is inherited from your merchant bootstrap config. There's no per-shortcode theme override — styling stays consistent with the storefront.
</Note>

## Behavior

* **Live sync** — items added/removed anywhere (drawer, storefront product cards, cart page) update everywhere the cart is visible.
* **Empty state** — shows the `empty_message` with a "Continue shopping" link routing to `continue_url`.
* **Checkout** — "Proceed to checkout" opens the same checkout modal used by the drawer.

## CSS Customization

Cart surfaces use `ks-cart-*` class names:

```css theme={null}
.ks-cart-page { /* Page container */ }
.ks-cart-item { /* Individual line item */ }
.ks-cart-page-checkout-btn { /* Checkout CTA */ }
```