# How to Set Up

## What is the Sticky Cart?

The Sticky Cart is a floating button that stays visible on your store as customers scroll. When clicked, it opens the cart drawer instantly — so shoppers can review their cart without navigating away from the current page.

## Why use the Sticky Cart?

* **Always accessible** — A persistent cart button means customers can check their cart at any time, from any page.
* **Reduce cart abandonment** — Keeping the cart one click away encourages shoppers to complete their purchase.
* **Fully customizable** — Choose the layout, position, icon, colors, and behavior to match your store's design.

## Requirements before using

* You must have the **AOV.ai Cart Drawer** app installed and active.
* The Cart Editor must be set up with at least the basic configuration.

## How to Set Up?

### Step 1: Enable the Sticky Cart

1. Go to **AOV.ai Cart Drawer > Sticky Cart**.
2. Toggle the **Status** to **Active** to enable the sticky cart button on your store.

![Enable sticky cart](/files/jLK7SYC3G7YckIMf3gI4)

### Step 2: Choose the Layout and Position

1. Under **Layout & Icon**, select a layout:
   * **Corner button** — A circular floating button in the corner of the screen.
   * **Side tab** — A tab that sticks to the side edge of the page.
2. Choose the **Position** — **Left** or **Right** side of the screen.
3. Select an **Icon** that appears on the button (cart, bag, or other options).
4. (Optional) Enter **Button text** to display a label next to the icon.

![Layout and position settings](/files/uuHy6Y2R4oHNQmBNLdGb)

### Step 3: Adjust Style and Spacing

1. Under **Style & Spacing**, fine-tune the button's appearance:
   * **Bottom distance** — How far the button sits from the bottom of the screen.
   * **Side distance** — How far the button sits from the left or right edge.
   * **Roundness** — Control the corner radius of the button.
   * **Icon size** — Make the icon larger or smaller.

![Style and spacing settings](/files/mwdTBb3h6RLIFQb47NjP)

### Step 4: Customize Colors and Advanced Settings

1. Set the colors for the sticky cart button:
   * **Shape color** — The background color of the button.
   * **Icon color** — The color of the cart icon.
   * **Count badge color** — The background color of the item count badge.
   * **Count text color** — The text color of the item count number.
2. Under **Advanced settings**, configure behavior:
   * **On click behavior** — Choose between **Open cart** (opens the drawer) or **Go to checkout page** (redirects to checkout).
   * **Device visibility** — **Show on all devices**, **Desktop only**, or **Mobile only**.
   * Toggle **Show item count badge** to display the number of items in the cart.
   * Toggle **Hide when cart is empty** to hide the button when there are no items.

![Colors and advanced settings](/files/OdOtCdSR15tagINS8KYi)

### Step 5: Preview and Save

1. Click **Preview** to see how the sticky cart button looks on your store.
2. Once satisfied, click **Save** to apply your settings.

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

Your sticky cart button is now live. Customers will see a floating cart icon as they browse your store, making it easy to check out at any time! 🚀


---

# 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/sticky-cart/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.