Infinite scroll to my Collection pages – Shopify

If your store has lots of products for a specific collection page on your Shopify store? Instead of getting customers to navigate to multiple pages of products you can now add infinite scroll to your Shopify collections pages so customers can keep scrolling through.

Collection Page for Shopify’s infinite scroll to display products automatically when a user scrolls down without having to wait for the page to load. Users can discover content that they would not have seen otherwise thanks to infinite scrolling.    

The infinite scroll feature helps to gain customer attention. It improves the user experience and makes browsing pages easier. Scrolling is easier for users than clicking (and then scrolling again) and requires less action. Infinite scroll lets users find the content they might not otherwise see. The more products your visitors see the better chances they buy from you.

On Shopify App Store has some apps that help you set up this feature for your store. But if you have the technical skills, you can do this manually.

In this video, you will learn how to add infinite scrolling and multiple product loads to Shopify collection pages. Instead of forcing customers to navigate through multiple product pages, you can now include an infinite scroll on Shopify app development collection pages, allowing customers to scroll indefinitely.

Let’s do it

Editing your theme code to add the Infinite scroll

Required files: assets [infinite-scroll.js] ; sections [collection-infinite-Scroll.liquid]

• In the Section directory, create a new file named collection-infinite-scroll.liquid and add the following code:

[code]
{%- if section.settings.enable_infinite_scroll -%}
<div class="page-load-status">
  <p class="infinite-scroll-request">{{section.settings.status_info}}</p>
  <p class="infinite-scroll-last">{{section.settings.status_end}}</p>
  <p class="infinite-scroll-error">No more pages to load</p>
</div>
{%  assign container_selector = section.settings.container_selector %}
{%  assign path = section.settings.path | default: ".pagination a" %}
{%  assign append = section.settings.append | default: false %}
{%  assign hide_nav = section.settings.hide_nav | default: ".pagination"  %}
{%  assign status = section.settings.status | default: ".page-load-status" %}
<script>
  var isSettings = '{ "container" : "{{container_selector}}", "path" : "{{path}}", "append" : "{{append}}", "hideNav" : "{{hide_nav}}", "status" : "{{status}}" }';
</script>
<script src="https://unpkg.com/[email protected]/dist/infinite-scroll.pkgd.min.js" defer></script>
<script src="{{ 'infinite-scroll.js' | asset_url }}" defer="defer"></script>
<style>
  .page-load-status{display:none;text-align:center;margin:30px auto 10px;padding:5px;max-width:300px;background:#eee;}
  .page-load-status p{margin:0;padding:5px;}
</style>
{%- endif %}
{% schema %}
  {
    "name": "Infinite Scroll",
    "settings": [
      {
        "type": "checkbox",
        "id": "enable_infinite_scroll",
        "label": "Enable Infinite Scroll",
        "default": false
      },
      {
        "type": "text",
        "id": "container_selector",
        "label": "Container Selector"
      },
      {
        "type": "text",
        "id": "path",
        "label": "Path",
        "info": "Determines the URL for the next page"
      },
      {
        "type": "text",
        "id": "append",
        "label": "Append",
        "info": "Appends selected elements from loaded page to the container."
      },
      {
        "type": "text",
        "id": "hide_nav",
        "label": "Page nav selector",
        "info": "Hides navigation element"
      },
      {
        "type": "text",
        "id": "status",
        "label": "Status selector",
        "info": "Displays status elements indicating state of page loading"
      },
      {
        "type": "text",
        "id": "status_info",
        "label": "Loading Text",
        "default": "Loading..."
      },
      {
        "type": "text",
        "id": "status_end",
        "label": "End result text",
        "default": "No more product to load!"
      }
    ]
  }
{% endschema %}
[/code]

• In the Assets directory, create a new file named infinite-scroll.js and add the following code:

[code]
var isSettingsObj = JSON.parse(isSettings);
var elem = document.querySelector(isSettingsObj.container);
if($(isSettingsObj.path).length > 0){
  var infScroll = new InfiniteScroll( elem, {
    path: isSettingsObj.path,
    append: isSettingsObj.append,
    history: false,
    hideNav: isSettingsObj.hideNav,
    status: isSettingsObj.status
  });
}
[/code]

• In the Templates directory, find collection.liquid and add the following code at the very end of the file:

[code]
{% section 'collection-infinite-scroll' %}
[/code]

• Congrats, You’ve completed the coding parts.
• Now it’s available in Themes>customization>collection pages page section settings. Just check the enable infinite scroll to enable this feature.

  Frequently Asked Questions:

  How can I make Shopify collection pages have infinite scroll pagination?

  It can now be found under Themes>customization>collection pages page section settings. To use this feature, simply check the enabled infinite scroll box.

  How do I display more products on the Shopify collection page?

  Choose Collection pages from the drop-down menu at the top of the page, or from the Templates menu on mobile. Select Collection pages or Collection. If your theme allows you to change the number of products that appear on collection pages, adjust the settings to meet your needs. Save the changes.

  Is there a collection limit in Shopify?

  On Shopify, you can have an unlimited number of collections. This is fantastic news for shop owners who want to organize their products in various ways. Shopify allows you to create collections based on product type, season, or any other criteria you can think of.

  How can I stop the endless scrolling?

  To control infinite scrolling within your web browser, use a browser plugin. To avoid the extra memory usage, you can disable all JavaScript in your system settings. Be aware that disabling JavaScript may prevent other websites from functioning properly.