From 3fbabdc43216ffc8956365fabec58e0ab0370caa Mon Sep 17 00:00:00 2001
From: Ludo <ludo.segura@shopify.com>
Date: Tue, 5 Jul 2022 13:41:51 -0400
Subject: [PATCH] Add pagination to main collection list (#1745)

---
 sections/main-list-collections.liquid | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/sections/main-list-collections.liquid b/sections/main-list-collections.liquid
index 47cd76760a9..f8245b5bbf6 100644
--- a/sections/main-list-collections.liquid
+++ b/sections/main-list-collections.liquid
@@ -14,14 +14,23 @@
     if section.settings.sort == 'products_high' or section.settings.sort == 'date_reversed' or section.settings.sort == 'alphabetical_reversed'
       assign collections = collections | reverse
     endif
+
+    assign moduloResult = 28 | modulo: section.settings.columns_desktop
+    assign paginate_by = 30
+    if moduloResult == 0
+      assign paginate_by = 28
+    endif
   -%}
-  <ul class="collection-list grid grid--{{ section.settings.columns_desktop }}-col-desktop grid--{{ section.settings.columns_mobile }}-col-tablet-down" role="list">
-    {%- for collection in collections -%}
-      <li class="collection-list__item grid__item">
-        {% render 'card-collection', card_collection: collection, media_aspect_ratio: section.settings.image_ratio, columns: 3 %}
-      </li>
-    {%- endfor -%}
-  </ul>
+  {%- paginate collections by paginate_by -%}
+    <ul class="collection-list grid grid--{{ section.settings.columns_desktop }}-col-desktop grid--{{ section.settings.columns_mobile }}-col-tablet-down" role="list">
+      {%- for collection in collections -%}
+        <li class="collection-list__item grid__item">
+          {% render 'card-collection', card_collection: collection, media_aspect_ratio: section.settings.image_ratio, columns: 3 %}
+        </li>
+      {%- endfor -%}
+    </ul>
+    {% render 'pagination', paginate: paginate %}
+  {%- endpaginate -%}
 </div>
 {% schema %}
 {