How Do I Update the Cart Counter Immediately via AJAX?

6 0 6



I need to access cart.item_count to update the cart counter on a click event, but despite much research, haven't found a helpful example.


Here's the scenario:

On the homepage, Jane adds an item to her cart. Without reloading the page, Jane can view the cart in a slide-out drawer and see the items she's added. The cart counter should follow suit, but this comes back undefined: 

Shopify.onItemAdded = function(cart) {
  	alert('There are now ' + cart.item_count + ' items in the cart.');

This updates the counter successfully, but only with the number of items just added—not the total items in the cart:

Shopify.addItem(variant_id, quantity, function(line_item){

Finally, here's the simple method I'm using to add items to the cart:

<a href="#" onclick="Shopify.addItem(jQuery('#add_item{{}}').val(), jQuery('#add_item_qty').val()); return false" class="btn highlight add-to-cart"><span class="btn-text">Add To Cart</span></a>


In Summary…

Where can I find an example of how to handle this simple scenario? How exactly does one acces the cart.item_count via the Shopify API? I'd be so grateful if someone could outline how this is done or point me in the direction of more complete documentation. 





Replies 5 (5)
Shopify Staff (Retired)
Shopify Staff (Retired)
146 0 30

Hi Lindsey,

You can find documentation for the Ajax API here:

The /cart/add.js response only contains the line item, but you can always get the complete cart using /cart.js — something like this should work:

 jQuery.getJSON('/cart.js', function(cart) {
  alert('There are now ' + cart.item_count + ' items in the cart.');
} );

The entire cart is also returned if you use /cart/update.js instead of /cart/add.js. 

6 0 6

Hi Josh, 


Thanks so much! That's exactly what I needed. 


For anyone reading this down the road, here's the code:


Shopify.onItemAdded = function(cart) {
	jQuery.getJSON('/cart.js', function(cart) {


New Member
2 0 1
This is working for me also I have found this on

cartItemCounter = document.querySelector('span.cart-item-count');
url: '/cart.js',
dataType: 'json'
var newCount = data.item_count;
cartItemCounter.innerText = newCount;
New Member
1 0 0

Hi, how can I implement this? Where do I need to put the code?

Shopify Partner
4211 303 902

@RafaelGhilus1 This  will vary wildly by theme.

If you have an onlinestore2.0 theme see if it lets you add a custom-liquid or custom-html section/block to either the footer or header.

If so place that javascript in it with the surrounding <script></script> tags


Otherwise backup your theme and either add it to the bottom of theme.liquid before the closing </body> tag again with <script></script> tags surrounding that javascript.

Or add the javascript to your themes theme.js file or similar.


Finally Combinable Discounts - EARLY ACCESS ONLY - Use Free Shipping With Other Discounts

Answers powered by coffee Buy Paul a Coffee for more answers or donate to
Problem Solved? ✔Accept and Like solutions to help future merchants
Confused? Busy? Buy a custom solution