How can i set continue load product on collection page without go to next page

Topic summary

Goal: show more products on a Shopify collection page via a “Load more” button without navigating to the next page (AJAX/infinite pagination).

Debut theme approach:

  • Add hidden inputs (next URL, total pages, current page) and a button in collection-template.liquid; add jQuery in theme.js to fetch paginate.next.url and append items to .grid–view-items.
  • Fixes: replace missing icon with text loader; center the button via .load-more_wrap { text-align: center; }.
  • Bugs addressed: repeated first page (increment currentPage before building next URL), button persists at end (disable/hide when currentPage >= totalPages). An alternative JS updates the next link using the collection URL and shows “Products Finished” when done.

Dawn theme approach:

  • Use a custom web component (LoadMore) with fetch; append new items to the product grid container ID (must match your theme). Implementation requires adding markup in theme.liquid, JS in assets (e.g., loadmore.js), and hooking after pagination in sections/main-collection-product-grid.liquid. Ensure dataset attributes and container selectors are correct.

Common issues:

  • “$ is not defined” indicates jQuery isn’t loaded; use the fetch-based solution or include jQuery.
  • Multiple sections loading simultaneously or duplicating non-target collections are theme-specific selector/pagination conflicts; custom code review needed.

Status: Debut solution confirmed working by OP; Dawn solution shared with implementation steps. Discussion remains open; code snippets and selectors are central.

Summarized with AI on January 2. AI used: gpt-5.

Add this css:

.load-more_wrap { text-align: center; margin-top: 40px; }
1 Like