> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/overlay-group/cart-drawer.md).

# Cart drawer

A slide-in panel that opens when a customer adds a product to the cart or clicks the cart icon. It is built from two blocks — Content and Summary — below a title shown by the section. These two zones cannot be reordered, but you can toggle and arrange the blocks inside each one.

![Cart drawer overview](https://3215967854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlyCMfKbEVTf3hu8uxjSZ%2Fuploads%2Fgit-blob-e5101fd672c203a14af31e995ec30ecfa95663b7%2Foverlay-group-cart-drawer-overview.png?alt=media)

***

## Structure

```
┌─────────────────────────────┐
│                             │
│  Content Block              │  ← scrollable, blocks are reorderable
│                             │
├─────────────────────────────┤
│  Summary Block              │  ← sticky bottom, blocks are reorderable
│  [Checkout button]          │
└─────────────────────────────┘
```

[**Content Block**](#content-block) — The scrollable body. Holds the cart items list and optional feature blocks.

[**Summary Block**](#summary-block) — Sticks to the bottom of the drawer. Always includes the subtotal and checkout button, with optional feature blocks above it.

***

## Settings

| Setting         | Description                                                                                                                                                        |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Mobile layout   | How the drawer opens on phones — a sheet from the bottom, or a drawer from the side.                                                                               |
| Show cart count | Adds the number of items next to the cart title — for example, **Cart (3)**. The title text comes from [**Theme Settings → Cart**](/helix/theme-settings/cart.md). |

***

## Content Block

The scrollable body. Its own setting is the **Gap** (Desktop / Mobile) between the blocks inside it. The Content Block also accepts **app blocks**, so features from your apps can sit alongside the built-in ones.

### Free shipping progress

A progress bar showing how close the customer is to qualifying for free shipping. The amount and message text are set in [**Theme Settings → Cart**](/helix/theme-settings/cart.md). See [Free shipping bar](/helix/features/free-shipping-bar.md) for matching it to a real shipping rate.

| Setting   | Description                                 |
| --------- | ------------------------------------------- |
| Alignment | Aligns the bar text left, center, or right. |
| Size      | Sets the size of the bar text.              |
| Color     | Sets the color of the bar text.             |
| Padding   | Space above and below the bar.              |

### Cart items

The list of products currently in the cart. Like the other feature blocks, it can be reordered, removed, and added back at any time.

| Setting                | Description                               |
| ---------------------- | ----------------------------------------- |
| Show dividers          | Adds a line between each product.         |
| Show vendor            | Shows the product vendor under the title. |
| Gap — Desktop / Mobile | Space between products.                   |
| Padding                | Space above and below the list.           |

**Quick edit** lets customers change variant options right inside the drawer, without opening the product page. See [Quick edit](/helix/features/quick-edit.md) for what the panel shows.

| Quick edit setting     | Description                                      |
| ---------------------- | ------------------------------------------------ |
| Enable quick edit      | Turns on editing variants inside the drawer.     |
| Show product media     | Shows the product image in the quick edit panel. |
| Show badges            | Shows product badges in the quick edit panel.    |
| Show quantity selector | Adds a quantity control to the quick edit panel. |

### Discount code

A panel where customers can enter a discount code. It opens from the bottom when tapped.

| Setting        | Description                             |
| -------------- | --------------------------------------- |
| Heading font   | Font used for the panel label.          |
| Font size      | Size of the label text.                 |
| Letter spacing | Space between the letters of the label. |

{% hint style="info" %}
This block can go in the **Content Block** or the **Summary Block**. Placing it in the Summary Block keeps it near the checkout button, so customers don't have to scroll to find it.
{% endhint %}

### Shipping estimator

A panel where customers can estimate shipping by entering their address. It opens from the bottom when tapped.

| Setting        | Description                             |
| -------------- | --------------------------------------- |
| Heading font   | Font used for the panel label.          |
| Font size      | Size of the label text.                 |
| Letter spacing | Space between the letters of the label. |

{% hint style="info" %}
The rates shown here are estimates. The final shipping cost is confirmed at checkout based on the customer's address and chosen method.
{% endhint %}

### Order note

A panel where customers can add a note to their order. The note is saved to the order in **Shopify Admin → Orders**.

| Setting        | Description                             |
| -------------- | --------------------------------------- |
| Heading font   | Font used for the panel label.          |
| Font size      | Size of the label text.                 |
| Letter spacing | Space between the letters of the label. |

### Recommended products

A scrollable row of products suggested from the first item in the cart. It always contains two blocks: a **Heading** for the row title, and a **Product list** that controls which products appear and how the row behaves. The Heading can play an entrance animation when block animations are enabled in theme settings.

| Setting                | Description                                 |
| ---------------------- | ------------------------------------------- |
| Gap — Desktop / Mobile | Space between the heading and the products. |
| Padding                | Space above and below the block.            |

**Product list**

| Setting                | Description                                                                                                                               |
| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| Type                   | Where the suggestions come from — Shopify's automatic related products, or complementary products you pair in the Search & Discovery app. |
| Products               | A fallback list shown when no recommendations are available.                                                                              |
| Max products           | How many products the row shows.                                                                                                          |
| Gap — Desktop / Mobile | Space between the products.                                                                                                               |
| Style                  | Look of the navigation arrows.                                                                                                            |
| Icon                   | Shape of the navigation arrows.                                                                                                           |
| Auto-rotate slides     | Advances the row on its own.                                                                                                              |
| Pause on hover         | Stops the timer while the cursor is over the row. Shown when Auto-rotate slides is on.                                                    |
| Speed                  | How long each product stays before advancing. Shown when Auto-rotate slides is on.                                                        |

{% hint style="info" %}
Inside the cart drawer, the row always uses a layout tuned to the narrow panel, so the column settings (**Desktop columns**, **Mobile columns**, **Custom columns**, **Columns per breakpoint**) are hidden here. They appear when the same Product list block is used in a full-width section.
{% endhint %}

{% hint style="info" %}
**Complementary** suggestions must first be set up in the **Search & Discovery** app in your Shopify admin. If you haven't paired any products there, use the automatic option or add products to the **Products** list as a fallback.
{% endhint %}

{% hint style="info" %}
The block hides itself automatically when there are no recommendations and no fallback products.
{% endhint %}

***

## Summary Block

The sticky bottom zone. The Discount code, Shipping estimator, and Order note blocks can also go here — see [Content Block](#content-block) above.

| Setting                | Description                                                                                                                                         |
| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| Gap — Desktop / Mobile | Space between the blocks inside the zone.                                                                                                           |
| Type                   | **Inherit** keeps the drawer's own colors and lifts the zone with a soft shadow. **Color scheme** paints the zone with a scheme of its own instead. |
| Color scheme           | The scheme used for the zone. Available when Type is Color scheme.                                                                                  |

{% hint style="info" %}
Giving the Summary Block its own color scheme separates the checkout area from the product list above it — useful when the drawer is light and you want the checkout button to sit on a darker panel.
{% endhint %}

### Order summary

Always sits at the bottom of the Summary Block. Holds the subtotal, checkout button, and a few optional extras.

| Setting                      | Description                                                                                |
| ---------------------------- | ------------------------------------------------------------------------------------------ |
| Show tax and shipping notice | Shows a "Taxes and shipping calculated at checkout" line under the subtotal.               |
| Show view cart button        | Adds a second button linking to the full [Cart page](/helix/other-sections/cart-page.md).  |
| Show accelerated buttons     | Shows express checkout options such as Shop Pay, Apple Pay, and Google Pay when available. |
| Show payment icons           | Shows accepted payment method icons below the buttons.                                     |
| Icon width                   | Size of each payment icon.                                                                 |

{% hint style="info" %}
Accelerated buttons appear only when the customer's device supports them and the matching payment methods are active in **Shopify Admin → Settings → Payments**.
{% endhint %}