{"id":3400,"date":"2024-02-06T11:45:37","date_gmt":"2024-02-06T11:45:37","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/how-to-add-infinite-scroll-to-shopify-collection-page\/"},"modified":"2025-11-19T13:25:32","modified_gmt":"2025-11-19T07:55:32","slug":"how-to-add-infinite-scroll-to-shopify-collection-page","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/how-to-add-infinite-scroll-to-shopify-collection-page\/","title":{"rendered":"How to Add Infinite Scroll to Shopify Collection Page?"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">There are multiple ways to make your online store experience memorable for the visitors. One such feature you can implement is the Infinite Scroll to Shopify collection page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The default pagination on the Shopify collection pages requires visitors to click the next and previous buttons to navigate through all the products in the store.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It can add a bit of friction to your customer&#8217;s purchase journey with the store. Infinite scroll in the Shopify store solves this issue by autoloading more products once the visitor reaches the bottom of the page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this Shopify how-to tutorial post, we&#8217;ll learn how to add infinite scroll functionality to Shopify collection pages.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-is-infinite-scroll-in-shopify\">What is Infinite Scroll in Shopify?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Shopify infinite scroll is a feature that auto-loads the following products on the collection page as soon as the visitor scrolls down to the bottom. It eliminates the need to click the next and previous pagination buttons to browse the products.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"options-to-add-infinite-scroll-to-shopify-collection-page\">Options to Add Infinite Scroll to Shopify Collection Page<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Shopify infinite scroll is a valuable feature you can add to your store to improve the customer product browsing experience. You can add infinite scroll to Shopify store in mainly two ways:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Use an app:<\/strong> Plenty of apps are available to add an infinite scroll to Shopify. It&#8217;s the easiest way\u2013but it can cost a monthly subscription fee.<\/li>\n\n\n\n<li><strong>Modify liquid theme code:&nbsp;<\/strong>Use a custom code to add Shopify infinite scroll to Shopify collection pages. It requires you to have a basic coding knowledge.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">In this post, we&#8217;re going to cover the tech-savvy method\u2013i.e. how to create infinite scroll in Shopify without app. You can follow the step-by-step process below to add an infinite scroll feature to your Shopify collection pages.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Caution: Editing Shopify theme code requires knowledge of Liquid, HTML, CSS, and JavaScript. Proceed with caution and consider consulting a professional if unsure.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-to-add-infinite-scroll-to-shopify-colection-page-manually\">How to Add Infinite Scroll to Shopify Collection Page?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To add Shopify infinite scroll to collection pages, you can add a custom liquid snippet to the theme. And render it in the collection page template. Our experts have prepared a theme code to add the infinite scroll in Shopify, which you can use.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here&#8217;s the step-by-step process on add infinite scrolling to Shopify collection pages.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In Shopify admin, navigate to Online Store &gt; Themes. Click the three dots beside the <strong>Customize<\/strong> button and click &#8216;<strong>Edit code<\/strong>&#8216; from the dropdown as shown below.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2024\/02\/1-edit-shopify-theme-code.png\" alt=\"Go to Shopify online store &gt; Themes and edit theme code.\" class=\"wp-image-43531\"\/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the Shopify theme editor, click <strong>\u2018Add a new asset\u2018<\/strong> in the left menu and name it <strong>meetanshi-infinite-scroll.js.<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter is-resized\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXd74yExuGbnKh-dPabD4c49ibJlXEq1nJpBVaGAxIk3H4Q57yYXUjJoELjPYdFj97MKl14ZmPMYXiIJUvMgNrlxStt9VNDx5mIkPH-Oscd0CJg-T8dev8_l3ZB-NXtkFhD-981SIw?key=RxCzIxGATrYGtXjd47Idrw\" alt=\"Add a new asset\" style=\"width:644px;height:auto\"\/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Copy the following theme code to add the infinite scroll in Shopify:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">var MeetAjaxForProduct = function ajaxConstructor(settings) {\n  var default_Data = {\n    container: \"#infinteLoop\",\n    method: \"scroll\",\n    callback: null,\n    loadingText: \"Loading Now....\",\n    pagination: \"#infinitePagination\",\n    offset: 0,\n  };\n\n  var data = settings || {};\n  this.data = Object.assign(default_Data, data);\n\n  this.meetProductClick = this.meetProductClick.bind(this);\n  this.meetProductScroll = this.meetProductScroll.bind(this);\n  this.meetProductDestroy = this.meetProductDestroy.bind(this);\n  this.meetStopProductMultipleClicks = this.meetStopProductMultipleClicks.bind(this);\n  this.meetProductPaginationlnView = this.meetProductPaginationlnView.bind(this);\n\n  this.meetProductpagination = document.querySelector(this.data.pagination);\n  this.meetProductcontainer = document.querySelector(this.data.container);\n\n  this.meetProductInitialize();\n};\n\nMeetAjaxForProduct.prototype.meetProductInitialize = function basedProductsInitializeTheCorrectFunctionsMethod() {\n  if (this.meetProductcontainer) {\n    var initialidata = {\n      click: this.meetProductClick,\n      scroll: this.meetProductScroll,\n    };\n    if (initialidata[this.data.method]) {\n      initialidata[this.data.method]();\n    }\n  }\n};\n\nMeetAjaxForProduct.prototype.meetProductScroll = function productsPageScrolling() {\n  if (this.meetProductpagination) {\n    document.addEventListener(\"scroll\", this.meetProductPaginationlnView);\n    window.addEventListener(\"resize\", this.meetProductPaginationlnView);\n    window.addEventListener(\"orientationchange\", this.meetProductPaginationlnView);\n  }\n};\n\nMeetAjaxForProduct.prototype.meetProductClick = function productsPageClicking() {\n  if (this.meetProductpagination) {\n    this.nextPageLinkElement = this.meetProductpagination.querySelector(\"a\");\n    this.clickActive = true;\n    if (this.nextPageLinkElement) {\n      this.nextPageLinkElement.addEventListener(\"click\", this.meetStopProductMultipleClicks);\n    }\n  }\n};\n\nMeetAjaxForProduct.prototype.meetStopProductMultipleClicks = function prouctPageHandleClickEvent(event) {\n  event.preventDefault();\n  if (this.clickActive) {\n    this.nextPageLinkElement.innerHTML = this.data.loadingText;\n    this.nextPageUrl = this.nextPageLinkElement.href;\n    this.clickActive = false;\n    this.loadMore();\n  }\n};\n\nMeetAjaxForProduct.prototype.meetProductPaginationlnView = function prouctPageHandleScrollEvent() {\n  var top = this.meetProductpagination.getBoundingClientRect().top - this.data.offset;\n  var bottom = this.meetProductpagination.getBoundingClientRect().bottom + this.data.offset;\n\n  if (top &lt;= window.innerHeight &amp;&amp; bottom >= 0) {\n    this.nextPageLinkElement = this.meetProductpagination.querySelector(\"a\");\n    this.removeScrollListener();\n\n    if (this.nextPageLinkElement) {\n      this.nextPageLinkElement.innerHTML = this.data.loadingText;\n      this.nextPageUrl = this.nextPageLinkElement.href;\n      this.loadMore();\n    }\n  }\n};\n\nMeetAjaxForProduct.prototype.loadMore = function nextPageRequest() {\n  var loaderElement = document.getElementById(\"loader\");\n  if (loaderElement) loaderElement.style.display = \"block\";\n\n  setTimeout(() => {\n    this.request = new XMLHttpRequest();\n    this.request.onreadystatechange = function success() {\n      if (this.request.readyState === 4 &amp;&amp; this.request.status === 200) {\n        var cratedPagination = this.request.responseXML.querySelector(this.data.pagination);\n        var cratedContaner = this.request.responseXML.querySelector(this.data.container);\n\n        if (cratedPagination) {\n          this.meetProductpagination.innerHTML = cratedPagination.innerHTML;\n        } else {\n          this.meetProductpagination.innerHTML = \"\"; \/\/ Remove pagination if none left\n        }\n\n        if (cratedContaner) {\n          this.meetProductcontainer.insertAdjacentHTML(\"beforeend\", cratedContaner.innerHTML);\n        }\n\n        if (this.data.callback &amp;&amp; typeof this.data.callback === \"function\") {\n          this.data.callback(this.request.responseXML);\n        }\n\n        if (!this.request.responseXML.querySelector(`${this.data.pagination} a`)) {\n          console.log(\"No more products to load.\");\n          this.removeScrollListener();\n          if (loaderElement) loaderElement.style.display = \"none\";\n        } else {\n          this.meetProductInitialize();\n        }\n      }\n    }.bind(this);\n\n    this.request.open(\"GET\", this.nextPageUrl);\n    this.request.responseType = \"document\";\n    this.request.send();\n  }, 2000);\n};\n\nMeetAjaxForProduct.prototype.removeScrollListener = function removeProductScroll() {\n  document.removeEventListener(\"scroll\", this.meetProductPaginationlnView);\n  window.removeEventListener(\"resize\", this.meetProductPaginationlnView);\n  window.removeEventListener(\"orientationchange\", this.meetProductPaginationlnView);\n};\n\nMeetAjaxForProduct.prototype.meetProductDestroy = function removeProductReturnData() {\n  var yereData = {\n    click: this.removeClickListener,\n    scroll: this.removeScrollListener,\n  };\n  if (yereData[this.data.method]) {\n    yereData[this.data.method]();\n  }\n  return this;\n};\n\nMeetAjaxForProduct.prototype.removeClickListener = function removeProductClick() {\n  if (this.nextPageLinkElement) {\n    this.nextPageLinkElement.removeEventListener(\"click\", this.meetStopProductMultipleClicks);\n  }\n};<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Paste the copied into the meetanshi-infinite-scroll.js file and click \u2018<strong>Save<\/strong>\u2018.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcOSKHxwclcHPjO6todiQvSyGGYmDujTtgYDwha6dVZb1qWBRROj6XUKjKA2hcD6KVUGMChXR-7YVYqpa9CQ2r53CwVX5z_yeRjfluV0QtGeIkeEAKNTcd5SnkIFw91a5w4BHmK?key=RxCzIxGATrYGtXjd47Idrw\" alt=\"meetanshi-infinite-scroll.js\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Now, we&#8217;ll call the previously saved Shopify infinite scroll snippet on the collections page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">First, open the <strong>main-collection-product-grid.liquid<\/strong> and add this link to the main-collection-product-grid at the top.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   &lt;script src=\"{{ 'meetanshi-infinite-scroll.js' | asset_url }}\" >&lt;\/script><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Then in the same <strong>main-collection-product-grid.liquid<\/strong> find <strong>{% schema %}<\/strong> and paste the below code above it.&nbsp;<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div id=\"loader\" style=\"display: none; width: 100%;text-align: center;\">&lt;img src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0668\/1398\/5008\/files\/Iphone-spinner-2.gif?v=1735809435\" style=\"margin: 0 auto;\" width=\"50px\" height=\"50px\"> &lt;\/div>\n&lt;script>\nconst infiniteCollection = new MeetAjaxForProduct({\ncontainer: '#product-grid',\npagination: '.meet_infinite_next',\n});\n&lt;\/script> <\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">And click \u2018<strong>Save<\/strong>\u2018 to update the code.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfXI0wFF7vfskY0ff8B7rw99RwYQu3XsJd4yvEOEul2_KoZlgHUyx6ZroZfK3KTlJh4fqvU8wIQrGAw2rU0WWpLOSH08V9AVhU0zs7UzoP2GNkqRhDENxg80TzIvlKno2M3FT_slQ?key=RxCzIxGATrYGtXjd47Idrw\" alt=\"snippet folder\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Then, in the snippet folder, open pagination.liquid&nbsp;find&nbsp;<strong> {%- if paginate.next -%}&nbsp;<\/strong> and add class&nbsp;<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;li class=\"meet_infinite_next\"><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Head to the assets folder, open the <strong>component-pagination<\/strong> head to the bottom and add this code.&nbsp;<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.pagination__list{\n  display: none;\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The Shopify collection pages will now auto-load the next page when users reach the bottom. This method also adds a scroll top button to the pages. Here&#8217;s what the Shopify infinite scroll looks like on the collection page:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2024\/02\/5-shopify-infinite-scroll-on-collection-page.gif\" alt=\"Shopify collection page loads products automatically as soon as the visitor scrolls down the page\" class=\"wp-image-43532\"\/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">So this is how you can enable infinite scroll on Shopify theme code.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><div class=\"meetanshi-cta\">\r\n<div class=\"cta-content-wrapper\">\r\n<span>Shopify Infinite Scroll Section<\/span>\r\n<p>Get this and 130+ more useful Shopify sections to directly add into your store.<\/p>\r\n<a href=\"https:\/\/apps.shopify.com\/mit-custom-sections\" target=\"_blank\" class=\"btn-primary\" rel=\"noopener\">Get App<\/a>\r\n<\/div>\r\n<div class=\"cta-image-new\">\r\n<img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/11\/shopify-infinite-scroll-section.png\" alt=\"Shopify Infinite Scroll Section\">\r\n<\/div>\r\n<\/div><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"improve-ux-with-shopify-infinite-scroll\">Improve UX with Shopify Infinite Scroll<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Setting up infinite scroll on collections pages in Shopify is an effective way to grease the customer journey in your store. Another way you can improve your store&#8217;s experience is by offering a quick customer support facility to the customers. You can <a href=\"https:\/\/meetanshi.com\/blog\/how-to-add-whatsapp-chat-button-to-shopify\/\" target=\"_blank\" rel=\"noopener\">add WhatsApp chat button to Shopify<\/a> and help your customers chat with you on WhatsApp with a single click!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Smooth customer experience is an essence of successful online business. You may need to change the theme. Tweak and twist the layout. And make some bold moves. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We know it because our experts have done it for hundreds of stores and can do it for yours too. Consult now!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>There are multiple ways to make your online store experience memorable for the visitors. One such feature you can implement is the Infinite Scroll to&#8230;<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[787],"tags":[],"class_list":["post-3400","post","type-post","status-publish","format-standard","hentry","category-shopify"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/3400","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=3400"}],"version-history":[{"count":24,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/3400\/revisions"}],"predecessor-version":[{"id":24386,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/3400\/revisions\/24386"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=3400"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=3400"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=3400"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}