> For the complete documentation index, see [llms.txt](https://docs.northcommerce.com/north-commerce/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.northcommerce.com/north-commerce/blocks/cart-drawer.md).

# Cart Drawer

The Cart Drawer is the slide-out bag. The **Cart Drawer Trigger** is the bag icon with a count. Customers click the icon, the drawer slides out, and they can check out.

This is the block version of the older `[nc-cart-icon]` and cart drawer shortcodes. You no longer need those shortcodes.

{% hint style="info" %}
The drawer is the bag. [Cart Checkout](/north-commerce/blocks/cart-checkout.md) is the register. Do not put Cart Checkout in the header.
{% endhint %}

## Before you start

1. North Commerce and North Commerce Blocks are installed and turned on
2. You have at least one product people can add to the cart. See Create a product

You need **both** pieces:

* **Cart Drawer Trigger** — the icon. Put this in the header.
* **Cart Drawer Blocks** — the slide-out bag. Put this once on the site (the header or footer is fine, as long as it loads on every shop page).

## Add the bag icon to your header

1. In WordPress go to **Appearance** and open the header (or the page / template that holds your menu)
2. Click the **+** button near the menu
3. Search for **Cart Drawer Trigger**
4. Click it once

![Search for Cart Drawer Trigger in the block inserter](https://3754649969-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD2GW0FgHldEZwt1FAF7r%2Fuploads%2Fn6eN1mIaZWtZg6uULl8u%2Feditor-add-cart-drawer-trigger.jpg?alt=media)

5. Click the icon so it is selected
6. In the right-hand sidebar you can pick the **Icon** (Shopping Cart, Shopping Bag, Shopping Basket, or Handbag), the **Icon size**, and the **Count badge** size, position, and colors
7. Click **Save** / **Update**

{% hint style="success" %}
You can put more than one trigger on a page. Each one opens the same bag.
{% endhint %}

## Add the slide-out bag

1. Stay in the header, or open the footer
2. Click the **+** button
3. Search for **Cart Drawer Blocks**
4. Click it once

![Search for Cart Drawer Blocks in the block inserter](https://3754649969-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD2GW0FgHldEZwt1FAF7r%2Fuploads%2FBc6jasBPmbootg3HDGES%2Feditor-add-cart-drawer.jpg?alt=media)

The header (“My Bag”), the product list, the empty-bag message, and the **Checkout** button all come with it.

5. Click **Save** / **Update**

You only need one Cart Drawer Blocks on the site.

## What comes in the drawer

You can leave everything as-is.

* **Cart Drawer Header** — the title (starts as **My Bag**) and the close button
* **Cart Drawer Product** — each item in the bag (photo, name, price, quantity)
* **Cart Drawer Checkout Button** — takes them to [Cart Checkout](/north-commerce/blocks/cart-checkout.md). The label starts as **Checkout**. You can show the total on the button.
* **Cart Drawer Empty Cart** — what they see when the bag is empty. The message starts as **Your Cart Is Empty**. The button starts as **Shop All Products**.

To design the empty bag in the editor, click **Cart Drawer Blocks** and turn on **Preview empty cart state**. That switch is editor-only. The live site picks the full or empty state from the real cart.

## What your customer will do

1. Add a product from a Product page or a [Product Query](/north-commerce/blocks/product-query.md) card
2. Click the bag icon in the header
3. See what is in the bag, change the quantity, or remove an item
4. Click **Checkout**

![The open cart drawer with a product in the bag](https://3754649969-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD2GW0FgHldEZwt1FAF7r%2Fuploads%2FNMZLHashBprHfKYmnDAN%2Flive-cart-drawer.jpg?alt=media)

If the bag is empty they see the empty message and a way back to the shop.

## Make sure it works

Open your site in a new browser tab, as if you were the customer.

1. You should see the bag icon in the header
2. Add a product to the cart
3. The icon should show a count
4. Click the icon. The drawer should slide out with that product.
5. Click **Checkout**. You should land on [Cart Checkout](/north-commerce/blocks/cart-checkout.md).

## If something looks wrong

* **No bag icon.** You did not add **Cart Drawer Trigger** to the header.
* **The icon does nothing.** **Cart Drawer Blocks** is missing, or it is not on this page.
* **The bag is always empty.** The customer did not add a product, or Add to Cart is missing on the product page.
* **Checkout goes nowhere.** Your Checkout page does not have a [Cart Checkout](/north-commerce/blocks/cart-checkout.md) block.

SEE ALSO: Product · [Cart Checkout](/north-commerce/blocks/cart-checkout.md) · [Order Confirmation](/north-commerce/blocks/order-confirmation.md)