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.

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.



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:
{%- 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 %}

 

  • In the Assets directory, create a new file named infinite-scroll.js and add the following code:
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
  });
}

 

  • In the Templates directory, find collection.liquid and add the following code at the very end of the file:
{% section 'collection-infinite-scroll' %}

 

  • 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.

 

cart search