Add this css:
.load-more_wrap { text-align: center; margin-top: 40px; }
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.
1 Like