Where you can achieve what your competitors can’t

Shopify Animate Cart Items Count Bubble

Benefits of Animating Cart Items Count Bubble in Shopify

Implementing a lively, micro‑interactive cart counter unlocks several strategic advantages:

Visual Engagement

  • Captures attention instantly through motion‑based visual cues
  • Highlights real‑time cart status with eye‑catching animation pulses or bounces
  • Adds playful brand personality without overwhelming the interface
  • Elevates the cart icon within the visual hierarchy, preventing “cart blindness”
  • Sustains visitor interest by introducing subtle, ever‑present movement

User Experience

  • Delivers immediate, reassuring feedback after each “Add to Cart” action
  • Confirms successful item additions without requiring a page reload or popup
  • Reduces cognitive load by communicating cart state at a glance
  • Encourages seamless browsing while keeping purchase progress visible
  • Enhances perceived speed and responsiveness of the storefront experience.

CODE : cart-icon-bubble.liquid

{% if cart == empty %}
  <span class="svg-wrapper">{{ 'icon-cart-empty.svg' | inline_asset_content }}</span>
{% else %}
  <span class="svg-wrapper">{{ 'icon-cart.svg' | inline_asset_content }}</span>
{% endif %}
<span class="visually-hidden">{{ 'templates.cart.cart' | t }}</span>
{%- if cart != empty -%}
  <div class="cart-count-bubble onhow-cart-bubble" id="onhow-cart-bubble">
    {%- if cart.item_count < 100 -%}
      <span aria-hidden="true">{{ cart.item_count }}</span>
    {%- endif -%}
    <span class="visually-hidden">{{ 'sections.header.cart_count' | t: count: cart.item_count }}</span>
  </div>
{%- endif -%}

CODE : theme.liquid

<style>
@keyframes onhow-bubble-bounce {
  0% { transform: scale(1); }
  25% { transform: scale(1.4); }
  50% { transform: scale(0.9); }
  75% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.cart-count-bubble.animating {
  animation: onhow-bubble-bounce 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
</style>

<script>
{% comment %}
<!-- Designed by OnHOW YouTube Channel - Anas El Medlaoui -->
{% endcomment %}
document.addEventListener('DOMContentLoaded', function() {
  console.log('OnHOW cart animation initialized');
  
  var cartCount = 0;
  var cartBubble = document.querySelector('.cart-count-bubble');
  if (cartBubble) {
    var countElement = cartBubble.querySelector('[aria-hidden="true"]');
    if (countElement) {
      cartCount = parseInt(countElement.textContent, 10) || 0;
    }
  }
  
  function checkCartCount() {
    var bubble = document.querySelector('.cart-count-bubble');
    if (!bubble) return;
    
    var countElement = bubble.querySelector('[aria-hidden="true"]');
    if (!countElement) return;
    
    var newCount = parseInt(countElement.textContent, 10) || 0;
    
    if (newCount !== cartCount) {
      console.log('Cart count changed from ' + cartCount + ' to ' + newCount);
      cartCount = newCount;
      
      bubble.classList.add('animating');
      setTimeout(function() {
        bubble.classList.remove('animating');
      }, 600);
    }
  }
  
  setInterval(checkCartCount, 500);
  
  var originalFetch = window.fetch;
  window.fetch = function() {
    return originalFetch.apply(this, arguments).then(function(response) {
      
      if (response.url.includes('/cart') || response.url.includes('cart.js')) {
        setTimeout(checkCartCount, 300);
      }
      return response;
    });
  };
});
</script>