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

# Cart

> The Cart component displays the user's cart.

### Code

```javascript theme={null}
<marzipan-cart></marzipan-cart>
```

### Props

Props should be passed as attributes to the component element.

<ResponseField name="checkout-path" type="string">
  The path to the checkout page.

  Defaults to `/checkout`
</ResponseField>

<ResponseField name="empty-cart-message" type="string">
  The message to display when the cart is empty.

  Defaults to `You have nothing in your cart.`
</ResponseField>

<ResponseField name="shop-path" type="string">
  The path to the shop page.

  Defaults to `/shop`
</ResponseField>

### Features

#### Free Shipping Notification

The cart can display a progress message showing how much more a customer needs to spend to qualify for free shipping. This is configured in your [web component settings](/web-components/customisation#free-shipping-notification) and includes a customisable message with an `{amount}` placeholder and per-market display thresholds.

The amount remaining is measured on the goods total after discounts, matching how the [shipping method's minimum order value](/settings/shipping#conditions) is applied. The banner is hidden once there's nothing left to add, so it never tells a customer they're £0.00 away.

#### Checkout Requirements

If you've set a [minimum item count or full-case requirement](/settings/cart-and-checkout#checkout-requirements), the cart tells the customer what's missing and won't let them continue until it's met. A customer who reaches checkout below the minimum is sent back to the cart.

#### Related Products

Display product recommendations within the cart to encourage additional purchases. Configure the section title, number of products, and toggle visibility from your [web component settings](/web-components/customisation#related-products).

#### Container Styling

The cart component supports optional background colour and border styling, configurable from your [web component settings](/web-components/customisation#container-styling).

### Styling

The following parts are available to style the cart component:

<ResponseField name="--cart-container">
  The containing `<div>` around the cart.
</ResponseField>

<ResponseField name="--cart-checkout-button">
  The checkout button element.
</ResponseField>

<ResponseField name="--cart-image">
  The `<img>` element that contains the product image.
</ResponseField>

<ResponseField name="--cart-image-container">
  The containing `<div>` around the product image.
</ResponseField>

<ResponseField name="--cart-shopping-link">
  The "continue shopping" link element.
</ResponseField>

<ResponseField name="--empty-cart-message">
  The `<div>` that contains the empty cart message.
</ResponseField>

<ResponseField name="--loading-colour">
  The pulsating loading elements that are shown when the cart is loading.
</ResponseField>