Skip to content

  • Home
  • About Us
  • Add-ons
  • Services
    • Shopify Development Services
    • Shopify Maintenance services
    • Shopify PageSpeed Optimization
    • Shopify Training
    • Shopify App Development
    • Shopify App Integration Services
    • Shopify Email Marketing
    • Shopify Web Design Agency
  • Blog
  • Contact Us
  • Search button

Infinite scroll to my Collection pages – Shopify

Sep 20, 2022Dec 7, 2022

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.

Posted in Shopify Tutorials

Post navigation

Prev Detailed Guide To Migrate Your Clients To Shopify POS
Next Shopify Updates 2022: What’s New For Developers And Partners?

One thought on “Infinite scroll to my Collection pages – Shopify”

  1. Mark says:
    Sep 8, 2022 at 4:09 am

    This is really cool – unfortunately the current theme I’m using has a collection.json template. Any idea how this would be written in?

    Reply

Leave a Reply Cancel reply

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

Latest Posts

  • Shopify winter edition
    Understanding The Shopify Winter Edition 2023 UpdatesMar 14, 2023
  • Steps To Set Up Shopify Test Order For Quality Assurance
    Steps To Set Up Shopify Test Order For Quality AssuranceMar 1, 2023
  • Why You Should Implement Shopify Inventory Management for Increased EfficiencyFeb 16, 2023
  • Shopify theme detector
    Shopify Theme Detector: Uncover the Perfect Shopify Theme for Your StoreFeb 10, 2023

Subscribe Now

Follow Us

  • facebook
  • twitter
  • instagram
  • linkedin2

OriginateWeb.com is the realization of a dream. Our founder previously spent several years working for a large website development company.

Quick Links

  • Shopify Services
  • About Us
  • Shopify Theme Add-ons
  • Blog
  • Contact Us
  • Careers

Services

  • Shopify Theme Add-ons
  • Website Development
  • Page Speed Optimization
  • App Development
  • Maintenance
  • Training

Need Help?

  • Licensing Agreement
  • Terms and Conditions
  • Privacy Policy
  • Sitemap
  • facebook
  • twitter
  • instagram
  • linkedin2

© 2023 Originate Web. All Rights Reserved