> ## Documentation Index
> Fetch the complete documentation index at: https://codebeans-customer-cart-manager.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Theme compatibility

> Supported themes, and how to place the widget correctly in a custom or heavily modified theme.

The widget finds the right place in your theme automatically. It has built-in placement rules for **more than 150 popular Shopify themes**, including Dawn and the other free Shopify themes (Refresh, Sense, Craft, Taste, Spotlight, Studio, Crave, Colorblock, Ride, Publisher) and widely used premium themes such as Impulse, Prestige, Impact, Symmetry, Warehouse, Broadcast, Focal, Motion, Pipeline, Empire, Expanse, Be Yours, Kalles and Stiletto.

For each theme the widget knows three places:

| Location | Where the widget goes |
| - | - |
| **Cart page** | The summary area of the `/cart` page, just above the checkout button. |
| **Cart drawer** | The footer of the slide-out cart. |
| **Cart popup** | The small "added to cart" notification some themes show. |

If your theme isn't recognised, the widget uses the Dawn layout as a fallback.

> [!NOTE]
>
> Themes are recognised by the name shown in **Online Store → Themes**. If you've renamed your theme (for example, to *Summer 2026*), the widget may not recognise it and will fall back to the Dawn layout. Either keep the original theme name in the title (*Impulse – Summer 2026*), or set the selectors below.

## When the widget is missing or in the wrong place

Custom themes, page builders, or heavily edited themes can move the cart elements the widget looks for. You can tell the widget exactly where to go.

Go to **Settings → Advanced → Advanced CSS Selectors**:

| Field | Example |
| - | - |
| **Custom Cart Page Selector** | `.cart__footer` or `#cart-form` |
| **Custom Drawer/Sliding Cart Selector** | `.cart-drawer .drawer__inner` |
| **Custom Popup Selector** | `.mini-cart-popup` |

Leave a field blank to keep automatic detection for that location. The widget is added at the **top** of the element you choose.

### Find the right selector

**1. Open your cart**

On your storefront, add a product and open the cart page (or the drawer).

**2. Inspect the area**

Right-click just above the **Check out** button and choose **Inspect**. Your browser's developer tools open with that element highlighted.

**3. Copy a class or ID**

Move up through the highlighted elements until you reach the container that wraps the subtotal and checkout button. Note its `id` (use `#the-id`) or a distinctive `class` (use `.the-class`).

**4. Save and test**

Paste the selector into the right field, click **Save**, and reload your storefront.

> [!TIP]
>
> Prefer IDs and specific class names. A selector that matches many elements uses the first one on the page, which may not be the one you expect.

## Dynamic carts

Many themes update the cart without reloading the page. The widget watches for this and re-appears automatically when the drawer opens or the cart changes, so you don't need any extra setup.

Still stuck? [Contact support](https://codebeans-customer-cart-manager.mintlify.site/help/support.md) with your theme name and a link to your store — we'll find the selector for you.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.