# Cart Drawer

> **What You’ll Learn**
>
> * How to enable and style the slide-out cart drawer
> * How to use the optional FOMO timer for urgency

***

### Overview

The **Cart Drawer** is a slide-out panel that appears when a customer adds a product to their cart. It improves shopping flow by letting users check their cart without leaving the current page.

> 💡 This is different from the traditional cart page. You can use either, but not both at the same time.

***

### How to Enable

1. Go to **Theme Settings** > **Cart Drawer**
2. Toggle **Enable Cart Drawer** to `on`

***

### Customization Options

#### Colors & Width

* **Background Color**: Color of the drawer panel
* **Text Color**: General text inside the drawer
* **Button Color**: Add to cart / checkout button color
* **Button Text Color**: Text on the button
* **Drawer Width**: Set the width in pixels (default is `300px`)

#### FOMO Timer

Use this to create urgency inside the cart drawer.

* **Show FOMO Timer**: Toggle to enable
* **FOMO Timer Background Color**: Customize alert style
* **FOMO Timer Text Color**: Customize text color
* **FOMO Timer Text**: Custom text (e.g., “Your cart will expire soon!”)
* **FOMO Timer Duration**: Set countdown time in hours

#### Price Display

* **Show Price with Currency**: Toggle to display prices with the currency symbol (e.g., `$10.00 USD`)

> 💡 You can use the FOMO timer to encourage faster checkout, especially during product drops or sales.

***

### When to Use It

Use the cart drawer if:

* You want to keep users on the same page while shopping
* You're running limited-time promotions and want to increase urgency
* You prefer a modern, app-style UX

***

### **Need Help?**

* 💬 **Join our community on Discord:** <https://discord.gg/hcc2GvgZc6>
* 📧 **Email us at:** <support@openspaces.design>
* 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website


---

# 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://docs.openspaces.design/plain-jane-interactive/theme-settings/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.
