# Cart popup

The Cart Popup style in Pipeline brings attention to the middle of the screen with an overlay-style cart. While also making it easy for shoppers to access their cart details, and with full controls to manage items in their cart before proceeding to checkout. The Check-out button at the bottom displays their order subtotal. 

This popup style along with the drawer style is popular for mobile and desktop shoppers allowing customers to quickly view and manage their cart items without disrupting their shopping flow. It also simplifies the checkout process.

<figure><img src="https://3528441459-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LovEU3LvzkJzFkXarYD-4120580575%2Fuploads%2F8cMJhOl6BaRm5HQekSjB%2FKapture%202023-07-23%20at%2007.51.38.gif?alt=media&#x26;token=3a941380-aa23-4e14-a945-43e82b2728dc" alt=""><figcaption></figcaption></figure>

## Popup cart configuration

Use the "**Cart Drawer**" under the **Overlay** group to manage the **Popup** cart options. These are both overlay cart styles and the settings are managed together under Cart Drawer.&#x20;

* In the **Overlay group**, click on **Cart Drawer** (both popup and drawer share the same settings)

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

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

<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><p><strong>Cart Drawer is a different set of settings from the Cart under the Template group</strong></p></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;

### Popup Cart Options

The Cart Drawer (used for Popup and Drawer styles) 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%2FRKbxXYYhfwNW0QULhxFz%2Fpopup%20features%20on%20screen.png?alt=media&#x26;token=12e5283c-966a-4afc-8976-656d3d4003a0" 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 Popup cart 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 %}