> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Cart settings

> Behavior settings for the Aftersell Cart — when the drawer opens and the theme selectors that keep your storefront in sync.

Beyond [styling](/aftersell/cart/design-settings), the cart has a few **behavior** settings that control how it interacts with your storefront — when the drawer opens, and which theme elements Aftersell keeps in sync with the cart.

## Where to find these

In the cart editor, open **Cart settings**. The options below are grouped under **Behavior** and **Custom selector**.

## Open the cart when an item is added

**Open cart when an item is added** controls whether the drawer pops open automatically each time a shopper adds a product. It's on by default. Turn it off if you'd rather the cart stay closed until the shopper opens it themselves.

## Theme selectors

Aftersell hooks into your storefront through CSS selectors — for example, to know which element opens the cart, or which cart-icon count to keep in sync. Built-in detection covers the most popular Shopify themes (Dawn, Sense, Crave, Debut, Impulse, Horizon, and many others), so **most stores never need to touch these**. Adjust a selector only if something isn't wiring up correctly on your theme.

### Selector modes

Each selector offers the same three modes:

| Mode                 | What it does                                                                                                                                                         |
| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Default**          | Uses Aftersell's built-in detection for supported themes.                                                                                                            |
| **Default + custom** | Keeps the built-in detection and adds your own selector on top — use this when the default mostly works but misses an element (for example, a separate mobile icon). |
| **Custom only**      | Ignores the built-in detection and uses only your selector — use this when the default targets the wrong element or conflicts with your theme.                       |

The selector input is enabled only for the **Default + custom** and **Custom only** modes.

### The three selectors

| Selector                 | What it targets                                                                                          | Example                     |
| ------------------------ | -------------------------------------------------------------------------------------------------------- | --------------------------- |
| **Open cart selector**   | The element(s) that should open the cart drawer.                                                         | `.header__cart-toggle`      |
| **Add to cart selector** | The add-to-cart button(s) Aftersell should hook into.                                                    | `.product-form__add-button` |
| **Cart count selector**  | The element on your theme's cart icon that displays the item count, so it stays in sync with the drawer. | `.header__cart-count span`  |

### How to find a selector

1. Open your storefront in a browser (Chrome recommended).
2. Right-click the element you want to target — your cart icon, the count number, or the add-to-cart button — and choose **Inspect**.
3. In the panel that opens, find the element that represents it (the count is often a `span` inside the cart icon).
4. Note its class (starts with `.`) or ID (starts with `#`) — for example `.header__cart-count span` or `#CartCount`.
5. Back in **Cart settings**, set the selector to **Default + custom** or **Custom only** and paste it in.
6. Save, then test on both desktop and mobile.

<Tip>
  Start with **Default** — it works for most themes with no setup. Reach for **Default + custom** when only one of several icons updates (say, desktop works but mobile doesn't), and **Custom only** when the default is targeting the wrong element. If you're unsure which selector to use, your theme developer can point it out — you don't need to write any code, just copy and paste.
</Tip>