How to add infinite scroll pagination to Shopify collection pages

  • by

In Shopify stores, this is most usually required when managing an enormous number of products and collections that have hundreds or even a great many things in them. Customarily in these cases, when the guest has seen, for example, the initial 24 items, the user would need to click a “next” button or explore to the following page through pagination joins, which have one number for each page of products. The infinite scroll feature helps to get the user’s more attention. It improves the user experience and makes browsing pages easier.

on Shopify store you can find apps for this feature, but if you have some knowledge of coding you follow this method below for your store,

  1. In your Shopify admin go to Online Store > Theme.
  1. Find the theme you want to edit and then click Action > Edit code.
  2. Download ajaxinate.min.js file and upload in the assets folder.

  1. Now open theme.liquid in the online code editor. an paste the following code just above the </head>  which is given below.

or add this code instead of uploading file and pasting above code:

  1. Save it
  2. Go to collection.liquid in the online editor and find {% for product in collection.products %}. add a the and add more a <div> tag to the wrapper and add one more <div> tag just below it. as added in below example:
  1. Add the following JavaScript code to the end of the file.
  1. Save the file, you are done

Leave a Reply

Your email address will not be published. Required fields are marked *