Cart summary

A cart summary gives customers quick access to their shopping cart and reminds them of its contents.

You can add elements on your site to interact with Snipcart. For instance, you can add a special CSS class to any element to make the cart pop up.

Adding a show cart button

Add a button with the class snipcart-checkout to open up the cart when customers click on it.

<button class="snipcart-checkout">Click here to checkout</button>

Changing the cart summary behavior

The cart summary behavior can be modified directly in the div#snipcart element, where you set your API key.

For instance, setting the data-config-add-product-behavior key to none prevents the cart from opening every time a product is added.

<div hidden id="snipcart" data-api-key="<API_KEY>" data-config-add-product-behavior="none"></div>

Displaying number of items and total price

You can display the number of items in the cart, and its total price by adding snipcart-items-count or snipcart-total-price class on an HTML element.

<span class="snipcart-items-count"></span>
<span class="snipcart-total-price"></span>