Work with the cart in your theme code

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:

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