> ## 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.

#### 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>