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

# Cart drawer

> A bag that slides in from the side after a product is added or the bag icon is selected, so shoppers can keep browsing.

<Frame caption="Cart drawer, highlighted on the demo store">
  <img src="https://mintcdn.com/kwebby/C74euD6erxKg5PtE/images/puggy/guide-cart-drawer.webp?fit=max&auto=format&n=C74euD6erxKg5PtE&q=85&s=a032e3f967c7ae77250aa13d548db82c" alt="Cart drawer on the storefront" width="2160" height="1350" data-path="images/puggy/guide-cart-drawer.webp" />
</Frame>

## Where to find it

Every page except the cart page, when Theme settings > Cart > Cart type is Drawer. In the theme editor, open any page other than Cart and select Cart drawer in the sidebar; the drawer opens in the preview while it's selected.

## How it works

* Opens when a product is added anywhere (product page, product cards, quick view, featured product) or when the bag icon is selected, on phones and desktops alike.
* Shows the same items, quantity controls, discounts and totals as the cart page.
* Goes well with suggests products related to the newest item in the bag, or your own picks, never repeating items already in the bag.
* The gift wrap checkbox, gift message and order note appear when they are set up.
* Continue to checkout, express payment buttons and View bag (the full cart page) sit at the bottom.
* Problems such as not enough stock show under the add button that was used.
* Escape, the close button or a click outside closes it and returns focus to where the shopper was.
* It refreshes when shoppers come back to the page, so changes made in another tab show up.

<Frame caption="The cart drawer is set in 1 Theme settings · 2 Cart">
  <img src="https://mintcdn.com/kwebby/C74euD6erxKg5PtE/images/puggy/settings-cart.webp?fit=max&auto=format&n=C74euD6erxKg5PtE&q=85&s=e9058e85229464782684603cf7676dcb" alt="Cart settings" width="1470" height="812" data-path="images/puggy/settings-cart.webp" />
</Frame>

## Edit it

* Edit Heading, Color scheme and Empty bag image.
* Turn Show vendor, Show order note and Show accelerated checkout buttons on or off.
* Under Related products, choose Product source, Selected products or fallback, Fallback collection, Products to show (2 to 6) and Show add buttons, or turn off Show related products.
* To skip the drawer and send shoppers to the cart page instead, set Theme settings > Cart > Cart type to Page.

## Settings

<Tip>Shown when Theme settings > Cart > Cart type is set to Drawer. The cart page keeps its own settings.</Tip>

| Setting | What it does |
| - | - |
| **Heading** | Text. Default: Your bag. |
| **Show vendor** | On or off. Default: off. |
| **Show accelerated checkout buttons** | On or off. Shows the express payment buttons enabled for your store, such as Shop Pay, Apple Pay or PayPal. Default: on. |
| **Color scheme** | Color scheme for this area (edit the schemes in Theme settings → Colors). Default: Scheme 1. |
| **Empty bag image** | Image: upload one or choose from Content → Files. |

**Related products**

| Setting | What it does |
| - | - |
| **Show order note** | On or off. Default: on. |
| **Show related products** | On or off. Default: on. |
| **Heading** | Text. Default: Goes well with. |
| **Description** | Text. |
| **Product source** | Options: Related to the newest bag item, Your selected products. Automatic suggestions use Shopify recommendations. Your selected products or collection are shown while loading and if no suggestions are available. Default: Related to the newest bag item. |
| **Selected products or fallback** | Choose products. |
| **Fallback collection** | Choose a collection. Used when no products are selected. Defaults to the store catalog. |
| **Products to show** | Slider from 2 to 6. Default: 3. |
| **Show add buttons** | On or off. Default: on. |

<Note>
  Express buttons appear only when an express payment method is active in Settings > Payments.
</Note>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.