# Work with the cart in your theme code

> For theme developers: open the cart from your own buttons, keep counts in step, and style it safely.

Source: https://help.attravo.com/drawer-cart/articles/work-with-the-cart-in-your-theme-code
Updated: 2026-10-06

The cart works without theme edits. If you build custom buttons or sections, these hooks let them work with it.

## Open the cart from your own button

Add the `data-avc-cart-open` attribute to any element, and a click on it opens the drawer:

```html
<button type="button" data-avc-cart-open>View cart</button>
```

From a script, call `window.avcCartOpen()` once the page has loaded.

Your theme's usual cart icon and links to `/cart` open the drawer already, so most themes need neither.

## Add products from your own code

Products added with your store's standard cart requests, from a form posting to `/cart/add` or a script calling `/cart/add.js`, are picked up by the cart, which then opens with the product in it. Other apps' add-to-cart buttons work the same way.

## Keep your theme in step

After every change it makes, the cart:

- updates the cart counts your theme shows, such as the header bubble;
- sends `cart:refresh` and `cart:updated` events on `document`, for a theme or app that listens for them.

## Style it

The drawer's elements sit under `.avc-cart` and the full cart page's under `.avc-pgcart`. Use the design settings first, and add CSS on Pro for the rest. See [Style the cart with custom CSS](https://help.attravo.com/drawer-cart/articles/style-the-cart-with-custom-css.md).

> [!NOTE]
> The cart's markup can change when the app is updated. Hooks on this page are the ones to build on.