The cart

Note: As long as your site is responsive, your shopping cart will remain optimized for mobile commerce.

You can choose if you want the cart to pop or not when a user adds an item to it. And if you wish to display the cart on your website and give access so the user can view what's in it, then again it is a simple html markup you'll need to add.

Adding a show cart button

Just add a link having the class snipcart-checkout and the cart will pop when your visitors click on it.

<a href="#" class="snipcart-checkout">Click here to checkout</a>

Adding a cart summary

If you wish to display the cart summary on any part of your website, simply set an html element with the class markup we've set up for that. Check this example:

<div class="snipcart-summary">
    Number of items: <span class="snipcart-total-items"></span>
    Total price: <span class="snipcart-total-price"></span>
</div>

Notice that the container element has the snipcart-summary class. Add the markup you want within this container, then add snipcart-total-items and snipcart-total-price to the elements that will contain cart information. If you need you can have multiple cart summaries on a same page, you could, this way you could show the customer dashboard data in it's own summary and having the cart totals in another element.

Here is an example of two summaries on a same page.

<div class="snipcart-summary">
    <a href="#" class="snipcart-user-email snipcart-user-profile">
        Customer dashboard
    </a>
</div>
<div>
    Lots of content
</div>
<div class="snipcart-summary">
    Number of items: <span class="snipcart-total-items"></span>
    Total price: <span class="snipcart-total-price"></span>
</div>

Preventing the cart from popping up when adding an item

If you need to prevent the cart from automatically popping when a customer adds something to the cart, you need to use the data-autopop="false" attribute in the snipcart.js script tag.

<script
  type="text/javascript"
  id="snipcart"
  src="https://cdn.snipcart.com/scripts/2.0/snipcart.js"
  data-api-key="{API_KEY}"
  data-autopop="false"></script>