Shopify Sticky Add to Cart Bar

Shopify Sticky Add to Cart Bar

Create a sticky add to cart bar that appears when the main add to cart button scrolls out of view, improving conversion rates especially on mobile devices.

// Sticky Add to Cart Class
class StickyAddToCart {
    constructor(options = {}) {
        this.mainButton = document.querySelector(options.mainButton || '[data-main-add-to-cart]');
        this.stickyBar = document.querySelector(options.stickyBar || '[data-sticky-cart]');
        this.threshold = options.threshold || 100;

        if (!this.mainButton || !this.stickyBar) {
            console.error('Required elements not found');
            return;
        }

        this.isVisible = false;
        this.init();
    }

    init() {
        // Watch scroll
        window.addEventListener('scroll', () => this.handleScroll(), { passive: true });

        // Sync quantity and variant selection
        this.syncFormData();

        // Handle sticky bar add to cart
        this.handleStickySubmit();

        // Initial check
        this.handleScroll();
    }

    handleScroll() {
        const mainButtonRect = this.mainButton.getBoundingClientRect();
        const mainButtonVisible = mainButtonRect.top >= 0 && mainButtonRect.bottom <= window.innerHeight;

        if (!mainButtonVisible && window.scrollY > this.threshold) {
            this.show();
        } else {
            this.hide();
        }
    }

    show() {
        if (!this.isVisible) {
            this.stickyBar.classList.add('is-visible');
            this.isVisible = true;
        }
    }

    hide() {
        if (this.isVisible) {
            this.stickyBar.classList.remove('is-visible');
            this.isVisible = false;
        }
    }

    syncFormData() {
        // Sync variant selection
        const mainVariantSelect = document.querySelector('[name="id"]');
        const stickyVariantSelect = this.stickyBar.querySelector('[name="id"]');

        if (mainVariantSelect && stickyVariantSelect) {
            mainVariantSelect.addEventListener('change', (e) => {
                stickyVariantSelect.value = e.target.value;
                this.updateStickyPrice();
            });
        }

        // Sync quantity
        const mainQuantity = document.querySelector('[data-main-quantity]');
        const stickyQuantity = this.stickyBar.querySelector('[data-sticky-quantity]');

        if (mainQuantity && stickyQuantity) {
            mainQuantity.addEventListener('change', (e) => {
                stickyQuantity.value = e.target.value;
            });

            stickyQuantity.addEventListener('change', (e) => {
                mainQuantity.value = e.target.value;
            });
        }
    }

    handleStickySubmit() {
        const form = this.stickyBar.querySelector('form');

        if (!form) return;

        form.addEventListener('submit', async (e) => {
            e.preventDefault();

            const formData = new FormData(form);
            const data = {
                items: [{
                    id: formData.get('id'),
                    quantity: parseInt(formData.get('quantity') || 1)
                }]
            };

            try {
                const response = await fetch('/cart/add.js', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(data)
                });

                if (response.ok) {
                    this.showSuccess();
                    // Trigger cart update
                    document.dispatchEvent(new CustomEvent('cart:updated'));
                } else {
                    this.showError();
                }
            } catch (error) {
                console.error('Add to cart error:', error);
                this.showError();
            }
        });
    }

    updateStickyPrice() {
        const variantSelect = this.stickyBar.querySelector('[name="id"]');
        const priceElement = this.stickyBar.querySelector('[data-sticky-price]');

        if (!variantSelect || !priceElement) return;

        const selectedOption = variantSelect.options[variantSelect.selectedIndex];
        const price = selectedOption.dataset.price;

        if (price) {
            priceElement.textContent = this.formatMoney(price);
        }
    }

    showSuccess() {
        const button = this.stickyBar.querySelector('button[type="submit"]');
        const originalText = button.textContent;

        button.textContent = 'Added! ✓';
        button.classList.add('success');

        setTimeout(() => {
            button.textContent = originalText;
            button.classList.remove('success');
        }, 2000);
    }

    showError() {
        const button = this.stickyBar.querySelector('button[type="submit"]');
        const originalText = button.textContent;

        button.textContent = 'Error!';
        button.classList.add('error');

        setTimeout(() => {
            button.textContent = originalText;
            button.classList.remove('error');
        }, 2000);
    }

    formatMoney(cents) {
        return '$' + (parseInt(cents) / 100).toFixed(2);
    }
}

// Initialize
document.addEventListener('DOMContentLoaded', () => {
    new StickyAddToCart({
        mainButton: '[data-main-add-to-cart]',
        stickyBar: '[data-sticky-cart]',
        threshold: 150
    });
});

Liquid Template

<!-- Main Product Form -->
<form action="/cart/add" method="post" class="product-form">
    <select name="id" data-variant-select>
        {% for variant in product.variants %}
            <option
                value="{{ variant.id }}"
                data-price="{{ variant.price }}"
                {% unless variant.available %}disabled{% endunless %}>
                {{ variant.title }} - {{ variant.price | money }}
            </option>
        {% endfor %}
    </select>

    <input type="number" name="quantity" value="1" min="1" data-main-quantity>

    <button type="submit" data-main-add-to-cart class="btn btn--add-to-cart">
        Add to Cart
    </button>
</form>

<!-- Sticky Add to Cart Bar -->
<div class="sticky-cart-bar" data-sticky-cart>
    <div class="sticky-cart-content">
        <div class="sticky-cart-product">
            {% if product.featured_image %}
                <img src="{{ product.featured_image | img_url: '80x' }}" alt="{{ product.title }}">
            {% endif %}

            <div class="sticky-cart-info">
                <h4 class="sticky-cart-title">{{ product.title }}</h4>
                <div class="sticky-cart-price" data-sticky-price>
                    {{ product.price | money }}
                </div>
            </div>
        </div>

        <form action="/cart/add" method="post" class="sticky-cart-form">
            <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">

            <input
                type="number"
                name="quantity"
                value="1"
                min="1"
                class="sticky-quantity"
                data-sticky-quantity>

            <button type="submit" class="btn btn--sticky-cart">
                Add to Cart
            </button>
        </form>
    </div>
</div>

CSS Styling

/* Sticky Cart Bar */
.sticky-cart-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #e0e0e0;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    padding: 15px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    z-index: 999;
}

.sticky-cart-bar.is-visible {
    transform: translateY(0);
}

.sticky-cart-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.sticky-cart-product {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
}

.sticky-cart-product img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
}

.sticky-cart-info {
    flex: 1;
}

.sticky-cart-title {
    font-size: 14px;
    margin: 0 0 5px 0;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sticky-cart-price {
    font-size: 16px;
    font-weight: bold;
}

.sticky-cart-form {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sticky-quantity {
    width: 60px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
}

.btn--sticky-cart {
    padding: 12px 30px;
    background: #000;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.3s;
}

.btn--sticky-cart:hover {
    background: #333;
}

.btn--sticky-cart.success {
    background: #4caf50;
}

.btn--sticky-cart.error {
    background: #f44336;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .sticky-cart-content {
        flex-wrap: wrap;
    }

    .sticky-cart-title {
        font-size: 13px;
    }

    .sticky-cart-price {
        font-size: 14px;
    }

    .btn--sticky-cart {
        padding: 10px 20px;
        font-size: 14px;
    }
}

@media (max-width: 576px) {
    .sticky-cart-bar {
        padding: 10px;
    }

    .sticky-cart-product img {
        width: 50px;
        height: 50px;
    }

    .sticky-quantity {
        width: 50px;
        padding: 8px;
    }

    .btn--sticky-cart {
        flex: 1;
    }
}

With Variant Selector

// Extended version with variant options in sticky bar
class StickyAddToCartAdvanced extends StickyAddToCart {
    init() {
        super.init();
        this.createVariantSelector();
    }

    createVariantSelector() {
        const mainSelect = document.querySelector('[data-variant-select]');
        const stickyForm = this.stickyBar.querySelector('.sticky-cart-form');

        if (!mainSelect || !stickyForm) return;

        // Clone variant select
        const stickySelect = mainSelect.cloneNode(true);
        stickySelect.classList.add('sticky-variant-select');

        // Insert before quantity
        const quantity = stickyForm.querySelector('[data-sticky-quantity]');
        stickyForm.insertBefore(stickySelect, quantity);

        // Sync selections
        mainSelect.addEventListener('change', (e) => {
            stickySelect.value = e.target.value;
            this.updateStickyPrice();
        });

        stickySelect.addEventListener('change', (e) => {
            mainSelect.value = e.target.value;
            this.updateStickyPrice();

            // Update hidden input
            const hiddenInput = stickyForm.querySelector('[name="id"]');
            if (hiddenInput) {
                hiddenInput.value = e.target.value;
            }
        });
    }
}

Features

• Smart Detection: Shows only when main button is out of view
• Synchronized: Keeps quantity and variants in sync
• AJAX Add to Cart: No page reload when adding items
• Visual Feedback: Success/error states
• Mobile Optimized: Perfect for mobile shoppers
• Product Info: Shows product image and price
• Customizable: Easy to modify appearance and behavior
• Performance: Passive scroll listeners for smooth scrolling