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.
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>
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>
You can display the number of items in the cart, and its total price by adding
snipcart-total-price class on an HTML element.
<span class="snipcart-items-count"></span> <span class="snipcart-total-price"></span>