Skip to main content

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.

​
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.
This shortcode ships inside the Khaime Storefront plugin (v2.0.0+). No separate install.

​
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:
ModeWhat happens
drawer (default)Cart icon opens the slide-out drawer. Cart page unused.
pageCart icon navigates to the Cart Page URL. No drawer.
page mode requires a published page containing [khaime_cart] at the configured Cart Page URL — otherwise clicking the cart icon 404s.
The legacy both mode was retired in v2.0.0. Stores still set to both are automatically mapped to page on save.

​
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

AttributeDescriptionDefault
continue_url”Continue shopping” destination shown in the empty state(from settings → Store Page URL)
empty_messageText shown when the cart has no itemsYour cart is empty.
Theme is inherited from your merchant bootstrap config. There’s no per-shortcode theme override — styling stays consistent with the storefront.

​
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: 
.ks-cart-page { /* Page container */ }
.ks-cart-item { /* Individual line item */ }
.ks-cart-page-checkout-btn { /* Checkout CTA */ }