# How to Customize your Cart

## What are Design and Templates?

The Design settings let you control the overall visual appearance of your cart drawer. You can choose from pre-built templates, pick preset color schemes, auto-match your store's theme, or fully customize every color from the header background to the discount text.

## Why customize your design?

* **Brand consistency** — Match the cart drawer's look to your store's branding so it feels like a seamless part of the shopping experience.
* **Professional appearance** — Pre-built templates and presets give you a polished design in seconds.
* **Pixel-perfect control** — Customize individual colors for the header, body, footer, buttons, text, prices, and discounts.

## Requirements before using

* You must have the **AOV.ai Cart Drawer** app installed and active.
* The Cart Editor should be open so you can access the **Design** section.

## How to Set Up?

### Step 1: Choose a Template

1. Go to **AOV.ai Cart Drawer > Cart Editor**.
2. Click **Design** in the left menu under **Settings**.
3. Under **Template**, click **Choose template** to browse available designs:
   * **Classic** — A simple, calming design with soft colors, perfect for highlighting timeless and effortless styles across domains. Best for: Fashion, Fitness, Beauty.
   * **Minimal** — A clean, distraction-free layout that puts your products in the spotlight for a modern shopping experience. Best for: Home & Garden.
4. Select a template and confirm. If you have unsaved changes, you will be prompted to **Save settings** or **Discard settings** before switching.

![Choose template](/files/ca1qmJMWXYPXGKxEgONg)

### Step 2: Select a Preset Color Scheme

1. Under **Preset**, browse the available color presets.
2. Click any preset to instantly apply its color scheme to your cart drawer.
3. (Optional) Click **Auto-match theme** to pull colors directly from your Shopify theme. Click repeatedly to preview different color schemes from your theme.

> **Tip:** Auto-match theme is a great starting point. You can always fine-tune individual colors afterward.

![Preset color schemes](/files/Wz0j6Ool8pMOJm3uSObv)

### Step 3: Customize Background Colors

1. Under **Background**, set colors for each section of the cart drawer:
   * **Header background** — The color behind the cart title and logo.
   * **Body background** — The color behind the product list area.
   * **Footer background** — The color behind the subtotal and checkout button.

![Background colors](/files/X8DrkzJaPifdBuUqnoC7)

### Step 4: Customize Button, Text, and Price Colors

1. Under **Button**, configure:
   * **Background color** — The button's fill color.
   * **Button text color** — The text color on buttons.
   * (Optional) Toggle **Enable gradient background** and set **Gradient start color** and **Gradient end color** for a gradient button.
2. Under **General**, set:
   * **Text color** — The main text color throughout the drawer.
   * **Icon color** — The color of icons.
   * **Divider & delete icon color** — The color of section dividers and the product remove icon.
3. Under **Price & discount**, set:
   * **Price color** — The color of product prices.
   * **Compare price color** — The color of the original strikethrough price.
   * **Saving color** — The color of savings text.
   * **Discount background** — The background color of discount badges.
   * **Discount text & icon color** — The text and icon color inside discount badges.

![Button, text, and price colors](/files/mWqPbu5bEtXIZl5hwOSd)

### Step 5: Add Custom CSS and Save

1. (Optional) Scroll to **Custom CSS** and enter your own CSS rules to further customize the cart drawer's appearance. The placeholder reads: "Beauty your cart drawer with custom CSS."
2. Review the live preview on the right to confirm your design changes.
3. Click **Save** to apply all design settings.

![Custom CSS and save](/files/XHIhxDqW1t7mPn3taSAG)

Your cart drawer design is now customized. A well-branded cart creates trust and keeps customers engaged all the way to checkout! 🚀


---

# 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-customize.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.