Show All Products on BigCommerce Category Pages (Lazy Loading or Infinite Scroll)

BigCommerce provides built-in pagination controls that allow you to navigate through product pages. However, there is a major limitation: category pages can only display a maximum of 100 products per page.

You can see this limit in action by adding ?limit=100 to any category URL. Even then, BigCommerce won’t show more than 100 products and for good reason: performance.

For many store owners, this can be inconvenient, especially if customers want to browse an entire product catalog without the friction of clicking through pagination.

How to Work Around BigCommerce’s 100-Product Pagination Restriction

You can work around BigCommerce’s product display limits by adding a “Show All Products” button that loads items progressively using lazy loading or infinite scroll scripts.

The best part is that you can keep standard pagination, giving users the choice of how they want to browse.

This script automatically sends an API request for the next page as the user scrolls, loading new products before they ever reach the bottom. This keeps the experience smooth, maintains performance, and avoids hitting BigCommerce’s API restrictions.

What is Progressive Loading?

Progressive loading (also known as lazy loading or infinite scrolling) is a technique that dynamically loads content as users scroll down the page. With progressive loading, you can:

• Load products on demand without page reloads.
• Provide a good browsing experience.
• Work within BigCommerce’s API limits by fetching products in batches.
• Give users control over when to load additional products.

Add a “Show All Products” Button with Progressive Loading

1. Add the Button HTML to Your Category Template

1. Navigate to templates/components/category/product-listing.html.
2. Find the paginator line in your template.
3. Add the button HTML above the paginator.

2. Insert the Button Code

Below is the HTML code that adds a “Show All Products” button before the pagination controls:

{{#if pagination.category.links}}
      <div class="show-all-products-wrapper text-center mb-2">
          <button type="button" class="button button--small" id="show-all-products">
              Show All Products
          </button>
      </div>
  {{/if}}
  {{> components/common/paginator pagination.category}}
  

3. Add the Progressive Loading Script

• Navigate to the category page template: templates/pages/category.html
• Add the JavaScript inside the {{#partial "page"}} section, just before {{/partial}}.
• The script handles fetching products, detecting scroll position, and appending new items.

4. Copy and Paste the Script

Below is the complete script that handles progressive loading, fetches products using BigCommerce’s API, and automatically loads more products as users scroll:

<script>
  (function() {
      const $grid = $('.productGrid');
      const $pagination = $('.pagination');
      const $showAllBtn = $('#show-all-products');

      // Exit if required elements don't exist
      if (!$grid.length || !$pagination.length || !$showAllBtn.length) return;

      let page = 2; // Start at page 2 (page 1 is already loaded)
      let loading = false;
      let done = false;
      let observer = null;
      let $sentinel = null;

      // Build the base URL for fetching pages
      const basePath = window.location.pathname;
      const qs = window.location.search.replace(/([?&])page=\d+/i, '').replace(/\?$/, '');
      const glue = qs ? '&' : '?';

      // Function to load the next page
      const loadNext = () => {
          if (loading || done) return;
          loading = true;

          const url = `${basePath}${qs}${glue}page=${page}`;

          // Use BigCommerce's stencilUtils API to fetch the next page
          stencilUtils.api.getPage(url, { template: 'category/product-listing' }, (err, html) => {
              loading = false;

              if (err || !html) {
                  done = true;
                  if (observer) observer.disconnect();
                  return;
              }

              const $html = $(html);
              const $items = $html.find('.productGrid').children();

              // No more products found
              if (!$items.length) {
                  done = true;
                  if (observer) observer.disconnect();
                  $showAllBtn.text('All Products Loaded').prop('disabled', true);
                  if ($sentinel) $sentinel.remove();
                  return;
              }

              // Append new products to the grid
              $grid.append($items);

              // Check if there's a next page
              const hasNext = $html.find('.pagination-item--next').length > 0;

              if (hasNext) {
                  page += 1;
              } else {
                  // All products loaded
                  done = true;
                  if (observer) observer.disconnect();
                  $showAllBtn.text('All Products Loaded').prop('disabled', true);
                  if ($sentinel) $sentinel.remove();
              }
          });
      };

      // Button click handler
      $showAllBtn.on('click', (e) => {
          e.preventDefault();
          $showAllBtn.prop('disabled', true).text('Loading...');
          $pagination.hide();

          // Create invisible sentinel element for intersection observer
          $sentinel = $('<div id="infinite-sentinel" style="height:1px;"></div>');
          $grid.after($sentinel);

          // Set up IntersectionObserver for lazy loading
          observer = new IntersectionObserver((entries) => {
              if (entries[0].isIntersecting) {
                  loadNext();
              }
          }, { rootMargin: '800px 0px' }); // Start loading 800px before reaching bottom

          observer.observe($sentinel[0]);

          // Load first batch immediately
          loadNext();
      });
  })();
  </script>
  

5. Customize the Button Styling (Optional)

• Add custom CSS to assets/custom.css to enhance the button appearance.
• Customize hover effects and disabled states to match your theme.
• Adjust spacing and sizing as needed for your design.

6. Add Custom Styling

To customize the button appearance:

/* Show All Products Button */
  .show-all-products-wrapper {
      margin-bottom: 1rem;
  }

  #show-all-products {
      min-width: 200px;
      transition: all 0.3s ease;
  }

  #show-all-products:hover:not(:disabled) {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }

  #show-all-products:disabled {
      opacity: 0.6;
      cursor: not-allowed;
  }
  

7. Test the Implementation

To verify everything works correctly:

1. Navigate to a category page with multiple pages of products.
2. Scroll to the bottom and verify the “Show All Products” button appears.
3. Click the button and confirm it changes to “Loading…”
4. Scroll down and watch new products load automatically.
5. Continue scrolling until the button displays “All Products Loaded”.

Benefits of Using Progressive Loading for BigCommerce

User Control – Customers decide when to load all products, not automatic infinite scroll.
Works Within API Limits – Respects BigCommerce’s 100-product per-page limit by fetching multiple pages progressively.
Better Performance – Only loads products as needed, reducing initial page load time and bandwidth usage.
No Additional Costs – No custom apps or paid solutions required.

Conclusion

Using progressive loading with a “Show All Products” button, you can provide a seamless browsing experience while working within BigCommerce’s platform limitations. This method eliminates the
need for logging in and allows customers to browse your entire product catalog without leaving the page.