# How to Set Up Your Cart

## What is the Cart Editor?

The Cart Editor is the central hub where you build and customize every section of your slide-out cart drawer. From the header and product cards to the subtotal area and checkout button, you control exactly how your cart looks and behaves.

## Why use the Cart Editor?

* **Full control over your cart layout** — Customize the header, product cards, subtotal, and checkout button to match your brand and shopping experience.
* **Boost conversions with smart defaults** — Features like compare-at prices, stock-left indicators, and savings labels encourage customers to complete their purchase.
* **Seamless shopping experience** — Configure behaviors like auto-opening the drawer when items are added, so customers never lose track of their cart.

## Requirements before using

* You must have the **AOV.ai Cart Drawer** app installed and active.
* Your store should have products added in Shopify so the cart drawer can display them.

## How to Set Up?

### Step 1: Open the Cart Editor

1. Go to **AOV.ai Cart Drawer > Cart Editor**.
2. You will see the editor with a live preview on the right and a settings menu on the left.
3. The left menu is organized into three sections: **Settings**, **Body**, and **Footer**.

![Cart Editor main view](/files/93lFem5AxvpGbNcCc3E3)

### Step 2: Configure the Header

1. Click **Header** in the left menu under **Settings**.
2. Set the **Cart title** — this is the heading customers see at the top of the drawer.
3. Choose the **Text alignment** — **Left**, **Center**, or **Right**.
4. Adjust the **Height** of the header area.
5. (Optional) Toggle **Show store logo** to display your store's logo above the cart title.
   * If no logo appears, click **Refetch logo** or **Set up logo in Shopify** to configure it.

![Header settings](/files/1h3Uw4DWh3V0MhZm0GuF)

### Step 3: Customize the Product Card

1. Click **Product card** in the left menu under **Body**.
2. Toggle the options you want to show for each item in the cart:
   * **Show variant options** — Display variant names and values below the product title.
   * **Show product reviews** — Show review stars on each product.
   * **Show vendor** — Display the product vendor name.
   * **Show SKU** — Show the SKU code.
   * **Show compare-at price** — Display the original price with a strikethrough.
   * **Show discount** — Highlight the discount amount.
   * **Show stock left** — Show remaining inventory. You can set it to **Show only when stock left is less than** a specific number of items.
   * **Show savings below product prices** — Display how much the customer is saving.
3. Adjust the **Image Width**, **Image Height**, and **Image Border Radius** to control product thumbnails.
4. Choose a **Delete icon** style for the remove button.

![Product card settings](/files/b3wjqMgv7SXDLjFaC1rZ)

### Step 4: Set Up the Subtotal and Checkout Button

1. Click **Subtotal** in the left menu under **Footer**.
   * Toggle **Show compare-at price** to display the original total before discounts.
   * Toggle **Show savings** to highlight how much the customer saves.
2. Click **Checkout and View cart button**.
   * Enter a **Checkout button label** (e.g., "Checkout" or "Proceed to payment").
   * Enter a **View cart button label** (e.g., "View cart").
   * Choose an **Icon** to display on the checkout button.
   * Adjust the **Button height**.
   * (Optional) Toggle **Redirect to cart page when clicking checkout button** if you want the button to go to the cart page instead of checkout.

![Subtotal and checkout button settings](/files/U48pSqgAwLVwDsTP9KmR)

### Step 5: Configure General Settings

1. Click **General settings** in the left menu under **Settings**.
2. Toggle behaviors:
   * **Open Cart Drawer when an item is added to the cart** — The drawer slides out automatically after an add-to-cart action.
   * **Open Cart Drawer when the cart icon is clicked** — The drawer opens when a customer clicks the cart icon.
   * **Show "Continue shopping" button** — Adds a button that closes the drawer.
3. Set the **Cart width for Desktop** to control how wide the drawer appears.
4. Configure the **Empty cart** section:
   * Enter an **Empty cart message** for when the cart has no items.
   * Set the **Continue shopping label** and choose where the button redirects — **All collections page** or **Other page** with a custom URL.

![General settings](/files/ZnxAhT7yA0TvPrKZLxlY)

### Step 6: Preview and Save

1. Review the **Preview** on the right panel to see how the cart drawer will look on your store.
2. Click **Preview Cart** at the top to open a full preview.
3. Once satisfied, click **Save** to apply all your changes.

![Preview and save](/files/C4V0pnk95onuZKGpv8eM)

Your cart drawer is now configured. Start customizing other features like **Announcements**, **Upsell Products**, and **Rewards Bar** to maximize your store's conversion rate! 🚀


---

# 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://help.aov.ai/aov-cart-drawer-help-center/cart-editor/how-to-set-up.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.