# Cart drawer

The Cart Drawer in Pipeline when selected brings easy access to the cart details with full controls for the shopper to manage items in their cart before proceeding to checkout. The Check-out button at the bottom displays their order subtotal. 

This popular style for mobile and desktop shoppers allows customers to quickly view and manage their cart items without disrupting their shopping flow and also simplifies the checkout process.

<div data-full-width="false"><figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2Fk0JIs7RJptpSEXsQeEQu%2FKapture%202023-07-23%20at%2007.46.38c.gif?alt=media&#x26;token=7a1a6a86-dc5e-4cf9-898e-987e810acef3" alt=""><figcaption></figcaption></figure></div>

## Configuring the drawer

The Cart drawer options are configured under the Overlay section in your Theme Editor.&#x20;

* In the **Overlay group**, click on Cart Drawer

<div data-full-width="false"><figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2FxMpA7ZDMzgfNrUMUGU90%2Foverlay%20drawer%20home.png?alt=media&#x26;token=83650e6a-dd46-42be-b7d2-c59d5179a808" alt=""><figcaption></figcaption></figure></div>

When you click on "**Cart Drawer**" in the **Overlay group**, you'll have options to customize the Drawer:

<div data-full-width="false"><figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2FPkdPO9RJJJCGmLv2rU6m%2Fexample%20of%20cart%20page%20but%20drawer.png?alt=media&#x26;token=0165aef8-3049-414b-898c-c6c030bd22d3" alt=""><figcaption></figcaption></figure></div>

#### Two separate Cart settings

* The Cart Drawer (orange highlight) under the **Overlay** group has settings to manage the Cart Drawer and the Popup Cart styles in Pipeline.&#x20;
* The Cart (gray highlight) under the **Template** group has a separate set of settings to manage only the Page style cart. The Page version can incorporate additional sections.&#x20;

### Options

The Cart Drawer includes a few features you can activate and customize for your customers:

<div data-full-width="true"><figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2FgPlG6628vT8GQCs17iTQ%2FCart%20drawer%20arrows.png?alt=media&#x26;token=f9e9f323-bba0-4568-b382-ac05563c6d60" alt=""><figcaption></figcaption></figure></div>

* **Estimate shipping** \
  An accordion-based shipping cost calculator with country and region lookup. Prices are based on your shipping prices configured in the main Shopify Admin settings.&#x20;
* **Show quantity selectors**\
  Toggle to show or hide the quantity value and buttons
* **Show product vendor** \
  Toggle to show or hide the vendor name
* **Show Cart notes**\
  Include a mini-input form for customers to add additional notes with their order like engraving details or custom information regarding products ordered.&#x20;
* **Free Shipping message**\
  This dynamic message informs customers how close they are to qualifying for free shipping. The threshold is set in the Theme Settings -> Cart. The message text is configured in the Cart section settings along with a toggle to show or hide. When the threshold is reached, an animated congratulations message is displayed.&#x20;
* **Custom Cart message**\
  A badge-styled message box where you can display a coupon code or other short important information.
* **Colors**\
  Change the background color of the Cart drawer
* **Additional Checkout buttons**\
  Show or hide the additional payment methods like Apple Pay, Google Pay, Amazon Pay, and PayPal. This is not recommended for the Cart Drawer due to the size these buttons occupy. When unchecked, these buttons will appear on the Checkout page.&#x20;

#### Empty cart link

{% hint style="info" %}
The Empty cart link has been moved to the Theme Settings -> Cart

You can customize the default link for shoppers to use if their cart is empty when viewing the cart. This is an opportunity to send them to a collection with special promotions or featured products.&#x20;
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://pipeline.groupthought.com/cart/pipeline-cart/cart-drawer.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.