{"title":"Pagination \u0026 Infinite Scroll","description":"\u003cp\u003ePagination \u0026amp; Infinite Scroll work for Shopify and Shopify Plus stores, handled as a flat-rate task by an in-house team that has worked on this since 2016.\u003c\/p\u003e\u003cp\u003eWe have completed 111 pagination \u0026amp; infinite scroll requests for merchants, including work on Brooklyn, Mobilia and Impulse. Below are 4 real examples with the request, the approach and what shipped.\u003c\/p\u003e","products":[{"product_id":"implement-infinite-scroll-on-collection-mobilia","title":"Implement Infinite Scroll on Collection","description":"\u003cp class=\"task-lead\"\u003eA boutique had infinite scroll on collection pages but the sort order was breaking when more products loaded.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eI have a working implementation of infinite scroll on the collection page, but when it loads more products, the sort order gets messed up. Products from later pages appear out of sequence.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eThe scroll worked but the ordering didn't. Customers sorting by price would see the sequence break after the first batch.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe rebuilt the infinite scroll so it respects the customer's active sort and filter when loading additional products. The URL updates as they scroll, so sharing a link or hitting back returns them to the same spot.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eInfinite scroll respects active sort and filters\u003c\/li\u003e\n\u003cli\u003eURL updates as products load\u003c\/li\u003e\n\u003cli\u003eBack button returns to the same scroll position\u003c\/li\u003e\n\u003cli\u003eWorks across all collections\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44154835271754,"sku":"TASK-0041","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"traditional-pagination-impulse","title":"Traditional Pagination","description":"\u003cp class=\"task-lead\"\u003eA stationery brand wanted infinite scroll for shoppers but proper page numbers underneath for search engines, so both got what they needed.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eWe're interested in adding infinite scroll that still creates pagination for search engines. Have you done this before? Please give us an estimate.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eInfinite scroll on its own hides most of a collection from crawlers. The brand wanted the smooth shopping experience without giving up indexing.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe set up the collection pages so visitors get infinite scroll while real paginated URLs stay in place underneath for crawlers and for anyone with scripting off. A back-to-top link appears after the first load so long collections stay navigable.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eInfinite scroll for shoppers\u003c\/li\u003e\n\u003cli\u003ePaginated URLs preserved for search engines\u003c\/li\u003e\n\u003cli\u003eBack-to-top link on long collections\u003c\/li\u003e\n\u003cli\u003eWorks with the theme's existing sort and filter\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155511210058,"sku":"TASK-0061","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"load-more-button-brooklyn","title":"Load More Button","description":"\u003cp class=\"task-lead\"\u003eA brand wanted pagination replaced with a load more button on collections and search results.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eRemove pagination from collection pages and search results and switch to a load more button. Load thirty products, then more on click.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003ePagination that interrupted browsing.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe replaced pagination with a load more button on collections and search results, loading products in batches while keeping the URL updated so back navigation works.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eLoad more button on collections\u003c\/li\u003e\n\u003cli\u003eLoad more on search results\u003c\/li\u003e\n\u003cli\u003eBatch size set in the theme editor\u003c\/li\u003e\n\u003cli\u003eBack navigation preserved\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155693858890,"sku":"TASK-0271","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"pagination-on-blog-and-search-brooklyn","title":"Pagination on Blog and Search","description":"\u003cp class=\"task-lead\"\u003eA brand wanted infinite scroll on the blog and search results, matching their collections.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eWe already have infinite scroll on collections. Add it to the blog and search results so the experience is consistent.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eConsistency across the store's list pages.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe extended infinite scroll to blog listings and search results with the same behavior as collections, including URL updates so back navigation works.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eInfinite scroll on the blog\u003c\/li\u003e\n\u003cli\u003eInfinite scroll on search results\u003c\/li\u003e\n\u003cli\u003eConsistent with collections\u003c\/li\u003e\n\u003cli\u003eBack navigation preserved\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155698151498,"sku":"TASK-0351","price":0.0,"currency_code":"USD","in_stock":false}]}],"url":"https:\/\/www.taskhusky.com\/collections\/pagination-infinite-scroll.oembed","provider":"TaskHusky","version":"1.0","type":"link"}