How to add infinite scroll collection - Dawn Theme Shopify

Shopify โ€บ Dawn โ€บ Theme
, ,

Before you start it

  • Dawn theme version at this post is 6.0.2
  • Duplicate your theme

Quick Look ๐Ÿ‘€

Getting started โœ๏ธ

main-collection-product-grid.liquid

  • Online store > themes > Actions > Edit code > Sections > main-collection-product-grid.liquid

  • Insert this code before {% schema %}

1
{% include 'collection-infinite-scroll' %}
  • find pagination
1
2
3
{%- if paginate.pages > 1 -%}
     {% render 'pagination', paginate: paginate, anchor: '' %}
{%- endif -%}
  • And insert this code after it
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% if paginate.next %}
              <a class="pagination__next" href="{{ paginate.next.url }}">
    
              </a>
              <!-- status elements -->
              <div class="scroller-status">
                  <div class="loader-ellips">
                    <span class="loader-ellips__dot"></span>
                    <span class="loader-ellips__dot"></span>
                    <span class="loader-ellips__dot"></span>
                    <span class="loader-ellips__dot"></span>
                  </div>
                  <p class="infinite-scroll-last" style="text-align:center;">End of content</p>
                  <p class="infinite-scroll-error" style="text-align:center;">No more pages to load</p>
              </div>
{% endif %}

collection-infinite-scroll.liquid

  • Online store > themes > Actions > Edit code > Snippets > โž• Create a new snippet

  • Paste code and save 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
{{ 'infinite-scroll.pkgd.min.js' | asset_url | script_tag }}
<script>
  (function() {
      // init InfiniteScroll
      function initInfScroll() {
        let elem = document.querySelector('#product-grid');
        let infScroll = new InfiniteScroll( elem, {
          // options
          path: '.pagination__next',
          append: '.product-grid .grid__item',
          status: '.scroller-status',
          hideNav: '.pagination-wrapper',
          history: false
        });
        infScroll.on( 'last', function( body, path ) {
          let status = document.querySelector('.scroller-status');
          status.remove();
        });
      }
      // run InfiniteScroll
      initInfScroll();
      // re-bind InfiniteScroll when new items inserted
      let elem = document.querySelector('#ProductGridContainer');
      elem.addEventListener("DOMNodeInserted", function (e) {
          try {
            initInfScroll();
          } catch (error) {
          }
      }, false);
  })();
</script>
<style>
  .loader-ellips {
    font-size: 20px; /* change size here */
    position: relative;
    width: 4em;
    height: 1em;
    margin: 10px auto;
  }
  
  .loader-ellips__dot {
    display: block;
    width: 1em;
    height: 1em;
    border-radius: 0.5em;
    background: #555; /* change color here */
    position: absolute;
    animation-duration: 0.5s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
  }
  
  .loader-ellips__dot:nth-child(1),
  .loader-ellips__dot:nth-child(2) {
    left: 0;
  }
  .loader-ellips__dot:nth-child(3) { left: 1.5em; }
  .loader-ellips__dot:nth-child(4) { left: 3em; }
  
  @keyframes reveal {
    from { transform: scale(0.001); }
    to { transform: scale(1); }
  }
  
  @keyframes slide {
    to { transform: translateX(1.5em) }
  }
  
  .loader-ellips__dot:nth-child(1) {
    animation-name: reveal;
  }
  
  .loader-ellips__dot:nth-child(2),
  .loader-ellips__dot:nth-child(3) {
    animation-name: slide;
  }
  
  .loader-ellips__dot:nth-child(4) {
    animation-name: reveal;
    animation-direction: reverse;
  }
</style>

Infinite Scroll

  • Online store > themes > Actions > Edit code > Assets > โž• Add a new asset

  • Upload the file you just download

Thatโ€™s all! ๐ŸŽ‰