Shopify Infinite Scroll for Collections

Shopify Infinite Scroll for Collections

Implement infinite scroll pagination on collection pages, automatically loading more products as users scroll to the bottom of the page.

// Infinite Scroll Class
class InfiniteScroll {
    constructor(options = {}) {
        this.container = options.container || '[data-products-container]';
        this.pagination = options.pagination || '[data-pagination]';
        this.loading = options.loading || '[data-loading]';
        this.offset = options.offset || 200;

        this.isLoading = false;
        this.hasMore = true;
        this.currentPage = 1;

        this.init();
    }

    init() {
        this.containerEl = document.querySelector(this.container);
        this.paginationEl = document.querySelector(this.pagination);
        this.loadingEl = document.querySelector(this.loading);

        if (!this.containerEl) {
            console.error('Container not found');
            return;
        }

        // Hide default pagination
        if (this.paginationEl) {
            this.paginationEl.style.display = 'none';
        }

        // Get total pages from pagination
        this.getTotalPages();

        // Bind scroll event
        window.addEventListener('scroll', () => this.onScroll());
    }

    getTotalPages() {
        const lastPageLink = this.paginationEl?.querySelector('a:last-of-type');

        if (lastPageLink) {
            const url = new URL(lastPageLink.href);
            this.totalPages = parseInt(url.searchParams.get('page')) || 1;
        } else {
            this.totalPages = 1;
        }

        this.hasMore = this.currentPage < this.totalPages;
    }

    onScroll() {
        if (this.isLoading || !this.hasMore) return;

        const scrollPosition = window.scrollY + window.innerHeight;
        const documentHeight = document.documentElement.scrollHeight;

        if (scrollPosition >= documentHeight - this.offset) {
            this.loadMore();
        }
    }

    async loadMore() {
        if (this.isLoading || !this.hasMore) return;

        this.isLoading = true;
        this.showLoading();

        this.currentPage++;

        try {
            const url = new URL(window.location.href);
            url.searchParams.set('page', this.currentPage);

            const response = await fetch(url.toString());
            const html = await response.text();

            const parser = new DOMParser();
            const doc = parser.parseFromString(html, 'text/html');

            const newProducts = doc.querySelectorAll('[data-product-item]');

            if (newProducts.length > 0) {
                newProducts.forEach(product => {
                    this.containerEl.appendChild(product.cloneNode(true));
                });

                // Trigger custom event for analytics or other scripts
                document.dispatchEvent(new CustomEvent('infiniteScroll:loaded', {
                    detail: {
                        page: this.currentPage,
                        productsLoaded: newProducts.length
                    }
                }));
            }

            // Check if there are more pages
            if (this.currentPage >= this.totalPages) {
                this.hasMore = false;
                this.showEndMessage();
            }

        } catch (error) {
            console.error('Error loading more products:', error);
            this.showError();
        } finally {
            this.isLoading = false;
            this.hideLoading();
        }
    }

    showLoading() {
        if (this.loadingEl) {
            this.loadingEl.style.display = 'block';
        }
    }

    hideLoading() {
        if (this.loadingEl) {
            this.loadingEl.style.display = 'none';
        }
    }

    showEndMessage() {
        const message = document.createElement('div');
        message.className = 'infinite-scroll-end';
        message.innerHTML = '<p>You've reached the end of the collection</p>';
        this.containerEl.parentElement.appendChild(message);
    }

    showError() {
        const error = document.createElement('div');
        error.className = 'infinite-scroll-error';
        error.innerHTML = `
            <p>Failed to load more products</p>
            <button onclick="location.reload()">Retry</button>
        `;
        this.containerEl.parentElement.appendChild(error);
    }
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', () => {
    const infiniteScroll = new InfiniteScroll({
        container: '[data-products-container]',
        pagination: '[data-pagination]',
        loading: '[data-loading]',
        offset: 300 // Trigger 300px before bottom
    });
});

Liquid Template Structure

<!-- Collection Template -->
<div class="collection-products">
    <div class="products-grid" data-products-container>
        {% for product in collection.products %}
            <div class="product-item" data-product-item>
                <a href="{{ product.url }}">
                    {% if product.featured_image %}
                        <img src="{{ product.featured_image | img_url: '400x' }}" alt="{{ product.title }}">
                    {% endif %}

                    <h3 class="product-title">{{ product.title }}</h3>

                    <div class="product-price">
                        {{ product.price | money }}
                    </div>
                </a>
            </div>
        {% endfor %}
    </div>

    <!-- Loading Indicator -->
    <div class="loading-spinner" data-loading style="display: none;">
        <div class="spinner"></div>
        <p>Loading more products...</p>
    </div>

    <!-- Default Pagination (will be hidden) -->
    <div class="pagination" data-pagination>
        {% if paginate.previous %}
            <a href="{{ paginate.previous.url }}">Previous</a>
        {% endif %}

        {% for part in paginate.parts %}
            {% if part.is_link %}
                <a href="{{ part.url }}">{{ part.title }}</a>
            {% else %}
                <span class="current">{{ part.title }}</span>
            {% endif %}
        {% endfor %}

        {% if paginate.next %}
            <a href="{{ paginate.next.url }}">Next</a>
        {% endif %}
    </div>
</div>

CSS Styling

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

.product-item {
    text-align: center;
}

.product-item img {
    width: 100%;
    height: auto;
    margin-bottom: 15px;
}

.product-title {
    font-size: 16px;
    margin-bottom: 10px;
}

.product-price {
    font-size: 18px;
    font-weight: bold;
}

/* Loading Spinner */
.loading-spinner {
    text-align: center;
    padding: 40px 0;
}

.spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #333;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* End Message */
.infinite-scroll-end {
    text-align: center;
    padding: 40px 0;
    color: #666;
    border-top: 1px solid #eee;
    margin-top: 40px;
}

/* Error Message */
.infinite-scroll-error {
    text-align: center;
    padding: 40px 0;
    color: #c00;
}

.infinite-scroll-error button {
    margin-top: 15px;
    padding: 10px 20px;
    background: #333;
    color: #fff;
    border: none;
    cursor: pointer;
}

Advanced: With Load More Button

// Hybrid approach: Show button after certain pages
class HybridInfiniteScroll extends InfiniteScroll {
    constructor(options = {}) {
        super(options);
        this.autoScrollPages = options.autoScrollPages || 3;
        this.loadMoreBtn = null;
    }

    init() {
        super.init();
        this.createLoadMoreButton();
    }

    createLoadMoreButton() {
        this.loadMoreBtn = document.createElement('button');
        this.loadMoreBtn.className = 'btn-load-more';
        this.loadMoreBtn.textContent = 'Load More Products';
        this.loadMoreBtn.style.display = 'none';
        this.loadMoreBtn.addEventListener('click', () => this.loadMore());

        this.containerEl.parentElement.appendChild(this.loadMoreBtn);
    }

    onScroll() {
        // Only auto-scroll for first few pages
        if (this.currentPage < this.autoScrollPages) {
            super.onScroll();
        } else {
            // Show load more button instead
            if (this.hasMore && !this.isLoading) {
                this.loadMoreBtn.style.display = 'block';
            }
        }
    }

    async loadMore() {
        this.loadMoreBtn.style.display = 'none';
        await super.loadMore();
    }
}

// Use hybrid version
document.addEventListener('DOMContentLoaded', () => {
    new HybridInfiniteScroll({
        autoScrollPages: 3, // Auto-scroll first 3 pages, then show button
    });
});

Integration with Filters

// Reset infinite scroll when filters change
document.addEventListener('filter:changed', () => {
    const infiniteScroll = new InfiniteScroll();
    infiniteScroll.currentPage = 1;
    infiniteScroll.hasMore = true;
    infiniteScroll.getTotalPages();
});

Features

• Seamless Loading: Products load automatically on scroll
• Performance Optimized: Debounced scroll events
• Error Handling: Graceful failure with retry option
• Progress Indicator: Loading spinner while fetching
• End Detection: Shows message when all products loaded
• Hybrid Mode: Option to show "Load More" button
• Event System: Custom events for integration
• SEO Friendly: Maintains pagination URLs