As mobile shoppers scroll down long product descriptions, customer reviews, and FAQ sections, the primary Add to Cart button disappears from the viewport. Implementing a persistent Sticky Add-to-Cart Bar at the bottom of the screen keeps checkout frictionless and can increase mobile add-to-cart rates by 10% to 22%.
1. Create the Snippet snippets/sticky-add-to-cart.liquid
<div id="sticky-atc-bar" class="sticky-atc fixed bottom-0 left-0 right-0 z-50 p-3 bg-[#121216] border-t border-white/15 flex items-center justify-between shadow-2xl transition-transform duration-300 translate-y-full">
<div class="flex items-center gap-3">
<img src="{{ product.featured_image | image_url: width: 80 }}" class="w-10 h-10 rounded-lg object-cover" alt="{{ product.title | escape }}">
<div class="text-left">
<span class="text-xs font-bold text-white block truncate max-w-[140px]">{{ product.title }}</span>
<span class="text-xs text-brand-orange font-mono font-bold">{{ product.price | money }}</span>
</div>
</div>
<button onclick="document.querySelector('form[action*="/cart/add"] button[type="submit"]').click()" class="px-5 py-2.5 rounded-xl btn-flame text-white text-xs font-extrabold shadow-lg">
Add to Cart
</button>
</div>
2. Hook the Intersection Observer in JavaScript
We only want the sticky bar to slide in when the main product form scrolls out of view:
const mainBtn = document.querySelector('form[action*="/cart/add"] button[type="submit"]');
const stickyBar = document.getElementById('sticky-atc-bar');
if (mainBtn && stickyBar) {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (!entry.isIntersecting) {
stickyBar.classList.remove('translate-y-full');
} else {
stickyBar.classList.add('translate-y-full');
}
});
});
observer.observe(mainBtn);
}