Update cart contents counter after Ajax update

Photo of author
Written By Ryan Rana





A short post that will hopefully be helpful to somebody – I’ve had to write this because Shopify have an annoying policy of closing old forum threads when it’d be more useful to keep them open and have them updated.

This thread;


Has an outdated solution for the problem.


If you enable the Ajax updating in the drawer / minicart in Shopify you can update the quantities of the individual items in the cart. But you may have a small cart total items icon in your link to that minicart – how to update that without a page refresh?

The Solution Part 1 – Collections page

If you have add to cart buttons on the collections page you need to modify the file assets/ajax-cart.js.liquid. Specifically the adjustCartCallback method.

adjustCartCallback = function (cart) {
  // Update quantity and price

  // This is the new line that updates the cart counter

  // Reprint cart on short timeout so you don't see the content being removed
  setTimeout(function() {
    isUpdating = false;
  }, 150)

The Solution Part 2 – Product page

Assuming you’ve Ajaxified the product view page using this guide » , then you’d update the snippets/ajaxify-cart.liquid template and specifically the Ajax success callback;

$.getJSON(_config.shopifyAjaxCartURL, function (cart) {
    if (_config.cartCountSelector && $(_config.cartCountSelector).size()) {
        var value = $(_config.cartCountSelector).html() || '0';
        $(_config.cartCountSelector).html(value.replace(/[0-9]+/, cart.item_count)).removeClass('hidden-count');


Leave a Comment