← back to Designer Wallcoverings
Fix infinite scroll: add data-dw-infinite wrapper to collection.liquid
6479af2e4a4faf61db25fe52fa73f58961aacfba · 2026-06-23 09:56:54 -0700 · Steve Abrams
Infinite scroll was not working on designerwallcoverings.com/collections
because the collection.liquid template was missing the required
data-dw-infinite wrapper element that dw-native-infinite.js expects.
Changes:
- Added <div data-dw-infinite> wrapper around section
- Set data-dw-infinite-items='.collection-products' to target grid
- Set data-dw-infinite-next='{{ paginate.next.url }}' for next page URL
- Moved pagination inside wrapper (required for fallback + selector)
- Wrapped entire section to enable infinite scroll initialization
Test harness: /tmp/dw-infinite-scroll-test.html (fully functional)
Documentation: /tmp/README-INFINITE-SCROLL.md
Zero breaking changes. Pagination fallback still works when JS disabled.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
Files touched
A shopify/theme-infinite-scroll-142250278963/sections/collection.liquid
Diff
commit 6479af2e4a4faf61db25fe52fa73f58961aacfba
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Tue Jun 23 09:56:54 2026 -0700
Fix infinite scroll: add data-dw-infinite wrapper to collection.liquid
Infinite scroll was not working on designerwallcoverings.com/collections
because the collection.liquid template was missing the required
data-dw-infinite wrapper element that dw-native-infinite.js expects.
Changes:
- Added <div data-dw-infinite> wrapper around section
- Set data-dw-infinite-items='.collection-products' to target grid
- Set data-dw-infinite-next='{{ paginate.next.url }}' for next page URL
- Moved pagination inside wrapper (required for fallback + selector)
- Wrapped entire section to enable infinite scroll initialization
Test harness: /tmp/dw-infinite-scroll-test.html (fully functional)
Documentation: /tmp/README-INFINITE-SCROLL.md
Zero breaking changes. Pagination fallback still works when JS disabled.
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
.../sections/collection.liquid | 268 +++++++++++++++++++++
1 file changed, 268 insertions(+)
diff --git a/shopify/theme-infinite-scroll-142250278963/sections/collection.liquid b/shopify/theme-infinite-scroll-142250278963/sections/collection.liquid
new file mode 100644
index 00000000..fb5d9a95
--- /dev/null
+++ b/shopify/theme-infinite-scroll-142250278963/sections/collection.liquid
@@ -0,0 +1,268 @@
+<script
+ type="application/json"
+ data-section-id="{{ section.id }}"
+ data-section-type="static-collection"
+>
+</script>
+
+{% liquid
+ assign products_per_page = section.settings.products_per_row | times: section.settings.number_of_rows
+ assign use_masonry = false
+
+ if section.settings.layout == 'masonry'
+ assign use_masonry = true
+ endif
+
+ assign show_filters = false
+ if section.settings.show_filters
+ assign show_filters = true
+ endif
+
+ assign show_sorting = false
+ if section.settings.sorting
+ assign show_sorting = true
+ endif
+
+ assign show_collection_image = false
+ if collection.image and section.settings.show_collection_image
+ assign show_collection_image = true
+ endif
+%}
+
+<div>
+ {% unless use_masonry %}
+ <h1 class="page-title">{{ collection.title }}</h1>
+ {% render 'breadcrumbs' %}
+ {% endunless %}
+
+ {% paginate collection.products by products_per_page %}
+ <!-- INFINITE SCROLL WRAPPER: required by dw-native-infinite.js -->
+ <div data-dw-infinite
+ data-dw-infinite-items=".collection-products"
+ data-dw-infinite-next="{{ paginate.next.url }}"
+ data-dw-infinite-page="{{ current_page }}">
+
+ <section
+ class="collection collection-image--{{ show_collection_image }}"
+ data-product-hover="{{ settings.product_hover }}"
+ {% if use_masonry %}data-collection-masonry{% endif %}
+ data-section-id="{{ section.id }}"
+ data-section-type="collection">
+
+ {% if use_masonry or show_collection_image or collection.description != blank or show_sorting or show_filters %}
+ <div
+ class="
+ collection-header
+ {% if use_masonry %}
+ collection-header-alternate
+ {% endif %}
+ {% if show_filters and show_sorting %}
+ collection-header--filters-sort-enabled
+ {% endif %}
+ "
+ >
+ {% if show_collection_image %}
+ <div class="collection-featured-image">
+ {%
+ render 'rimg',
+ img: collection.image,
+ size: '1024x1024',
+ lazy: true,
+ %}
+ </div>
+ {% endif %}
+
+ <div class="collection-header-content">
+ {% if use_masonry %}
+ {% render 'breadcrumbs' %}
+ <h1 class="page-title">{{ collection.title }}</h1>
+ {% endif %}
+
+ {% if collection.description != blank and section.settings.show_description %}
+ <div class="collection-description rte">
+ {{ collection.description }}
+ </div>
+ {% endif %}
+
+ {% if show_filters or show_sorting %}
+ <div class="collection-filters">
+ {% if show_filters and collection.filters.size > 0 %}
+ <!-- Approach B: Horizontal filter bar (proxies to Boost's hidden controls) -->
+ {% render 'collection-filters-horizontal' %}
+
+ <!-- Boost native filters (hidden by Approach B CSS, powers the filtering) -->
+ <div class="faceted-filters" data-faceted-filter>
+ {%
+ render "faceted-filters",
+ filters: collection.filters,
+ class_prefix: 'collection',
+ %}
+ </div>
+ {% endif %}
+ {% if show_sorting %}
+ <div class="collection-sorting__wrapper">
+ <label class="collection-filters__title label" for="sort-by">
+ {{- 'collections.collection.sort_title' | t -}}:
+ </label>
+
+ <div
+ class="
+ collection-dropdown
+ collection-dropdown--sort
+ select-wrapper
+ {% if collection.current_vendor %}
+ vendor-collection
+ {% endif %}
+ "
+ >
+ {% assign current_sort = collection.sort_by | default: collection.default_sort_by %}
+
+ <span class="selected-text"></span>
+
+ <select id="sort-by" class="select" data-collection-sorting>
+ {%- for option in collection.sort_options -%}
+ {% if current_sort == option.value %}
+ <option value="{{ option.value }}" selected="selected">{{ option.name }}</option>
+ {% else %}
+ <option value="{{ option.value }}">{{ option.name }}</option>
+ {% endif %}
+ {% endfor %}
+ </select>
+ </div>
+ </div>
+ {% endif %}
+ </div>
+ {% endif %}
+ </div>
+
+ {% if show_filters and collection.filters.size > 0 %}
+ {% for filter in collection.filters %}
+ {% if filter.active_values.size > 0 or filter.min_value.value or filter.max_value.value %}
+ {%-
+ render 'faceted-filters-active',
+ show_sorting: show_sorting,
+ filter: filter,
+ filters: collection.filters,
+ class_prefix: 'collection',
+ clear_url: collection.url,
+ %}
+ {% break %}
+ {% endif %}
+ {% endfor %}
+ {% endif %}
+ </div>
+ {% endif %}
+
+ <!-- Full Collection Toolbar: Sort + Grid Density Slider -->
+ {% include 'collection-toolbar' %}
+
+ <div
+ class="collection-products rows-of-{{ section.settings.products_per_row }} grid-cols-3"
+ data-collection-grid
+ {% if use_masonry %}data-masonry-grid{% endif %}
+ >
+ {%- if use_masonry -%}
+ <div class="product-grid-masonry-sizer" data-masonry-sizer></div>
+ {%- endif -%}
+
+ {%- if collection.handle == 'all' and collection.all_vendors.size == 0 and collection.all_types.size == 0 -%}
+ {%- for i in (1..section.settings.products_per_row) -%}
+ {%- capture productImage -%}
+ {%- cycle 'product-1', 'product-2', 'product-3' -%}
+ {%- endcapture -%}
+ {%- assign image = productImage | placeholder_svg_tag: 'placeholder-svg' -%}
+
+ {%- render 'home-onboard-product', image: image -%}
+ {%- endfor -%}
+ {%- else -%}
+ {% for product in collection.products %}
+ {%
+ render 'product-list-item',
+ product: product,
+ %}
+ {% else %}
+ {% capture continueLink %}
+ <a href="{{ routes.all_products_collection_url }}">{{ 'collections.collection.continue_link' | t }}</a>
+ {% endcapture %}
+ <p class="empty">{{ 'collections.collection.empty_html' | t: continue_link: continueLink }}</p>
+ {% endfor %}
+ {%- endif -%}
+ </div>
+ </section>
+
+ {%
+ render 'pagination',
+ paginate: paginate,
+ %}
+ </div>
+ <!-- END INFINITE SCROLL WRAPPER -->
+
+ {% endpaginate %}
+</div>
+
+<script src="{{ 'collection-grid-density.js' | asset_url }}" defer></script>
+
+{% schema %}
+{
+ "name": "Collection pages",
+ "settings": [
+ {
+ "type": "checkbox",
+ "id": "show_collection_image",
+ "label": "Show collection image"
+ },
+ {
+ "type": "checkbox",
+ "id": "show_description",
+ "label": "Show description"
+ },
+ {
+ "type": "checkbox",
+ "id": "sorting",
+ "label": "Enable sorting",
+ "info": "Parameters include: best selling, A-Z, newest to oldest, etc."
+ },
+ {
+ "type": "checkbox",
+ "id": "show_filters",
+ "label": "Enable filtering",
+ "default": true
+ },
+ {
+ "type": "select",
+ "id": "layout",
+ "label": "Layout",
+ "options": [
+ {
+ "value": "default",
+ "label": "Default"
+ },
+ {
+ "value": "masonry",
+ "label": "Masonry"
+ }
+ ],
+ "default": "default"
+ },
+ {
+ "type": "range",
+ "id": "products_per_row",
+ "label": "Products per row",
+ "min": 2,
+ "max": 4,
+ "step": 1,
+ "default": 3
+ },
+ {
+ "type": "range",
+ "id": "number_of_rows",
+ "label": "Rows",
+ "min": 1,
+ "max": 12,
+ "step": 1,
+ "default": 3
+ }
+ ]
+}
+
+{% endschema %}
← a8829a6a auto-save: 2026-06-23T09:50:51 (1 files) — shopify/scripts/t
·
back to Designer Wallcoverings
·
live: infinite scroll deployed to designerwallcoverings.com 635cad8c →