← back to Designer Wallcoverings
Restore collection page: show descriptions + add grid density slider (3-12 cols with localStorage)
659024e5c5019eed87380c80f5b3baf92e0c070b · 2026-06-22 17:41:18 -0700 · Steve Abrams
Files touched
A shopify/_cwGRID/assets/collection-grid-density.jsM shopify/_cwGRID/assets/custom.cssM shopify/_cwGRID/sections/collection.liquid
Diff
commit 659024e5c5019eed87380c80f5b3baf92e0c070b
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Mon Jun 22 17:41:18 2026 -0700
Restore collection page: show descriptions + add grid density slider (3-12 cols with localStorage)
---
shopify/_cwGRID/assets/collection-grid-density.js | 61 +++++++++++++
shopify/_cwGRID/assets/custom.css | 106 +++++++++++++++++++++-
shopify/_cwGRID/sections/collection.liquid | 24 ++++-
3 files changed, 187 insertions(+), 4 deletions(-)
diff --git a/shopify/_cwGRID/assets/collection-grid-density.js b/shopify/_cwGRID/assets/collection-grid-density.js
new file mode 100644
index 00000000..88650f02
--- /dev/null
+++ b/shopify/_cwGRID/assets/collection-grid-density.js
@@ -0,0 +1,61 @@
+/**
+ * Collection Grid Density Slider
+ * Controls grid columns (3-12) with localStorage persistence
+ */
+
+(function() {
+ 'use strict';
+
+ const STORAGE_KEY = 'dw_collection_grid_density';
+ const MIN_COLS = 3;
+ const MAX_COLS = 12;
+ const DEFAULT_COLS = 3;
+
+ function initGridDensity() {
+ const slider = document.querySelector('[data-collection-grid-slider]');
+ const gridContainer = document.querySelector('[data-collection-grid]');
+ const valueDisplay = document.querySelector('[data-grid-density-value]');
+
+ if (!slider || !gridContainer) return;
+
+ // Get saved preference from localStorage
+ const savedDensity = localStorage.getItem(STORAGE_KEY);
+ const initialDensity = savedDensity ? parseInt(savedDensity, 10) : DEFAULT_COLS;
+
+ // Set initial slider value
+ slider.value = initialDensity;
+ updateGridDensity(initialDensity);
+
+ // Listen for slider changes
+ slider.addEventListener('input', (e) => {
+ const cols = parseInt(e.target.value, 10);
+ updateGridDensity(cols);
+ localStorage.setItem(STORAGE_KEY, cols.toString());
+ });
+
+ function updateGridDensity(cols) {
+ // Remove old class
+ for (let i = MIN_COLS; i <= MAX_COLS; i++) {
+ gridContainer.classList.remove(`grid-cols-${i}`);
+ }
+
+ // Add new class
+ gridContainer.classList.add(`grid-cols-${cols}`);
+
+ // Update display
+ if (valueDisplay) {
+ valueDisplay.textContent = cols;
+ }
+ }
+ }
+
+ // Initialize when DOM is ready
+ if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', initGridDensity);
+ } else {
+ initGridDensity();
+ }
+
+ // Re-initialize on AJAX/dynamic content loads (Shopify resets)
+ document.addEventListener('shopify:section:load', initGridDensity);
+})();
diff --git a/shopify/_cwGRID/assets/custom.css b/shopify/_cwGRID/assets/custom.css
index 710ab4ca..25d5d7fa 100644
--- a/shopify/_cwGRID/assets/custom.css
+++ b/shopify/_cwGRID/assets/custom.css
@@ -1330,7 +1330,107 @@ input.add-to-cart:hover,
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
-/* Hide description when grid is dense (> 4 cols via dw-grid-control) */
-.dw-gc-dense .product-list-item-description {
- display: none;
+
+/* === Grid Density Slider Control === */
+.collection-grid-controls {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ margin: 20px 0;
+ padding: 12px 16px;
+ background: #f9f9f9;
+ border-radius: 4px;
+ flex-wrap: wrap;
+}
+
+.collection-grid-controls label {
+ font-size: 13px;
+ font-weight: 500;
+ color: #666;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ white-space: nowrap;
+}
+
+.collection-grid-controls-slider {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ flex: 1;
+ min-width: 200px;
+}
+
+.collection-grid-controls-slider input[type="range"] {
+ flex: 1;
+ min-width: 120px;
+ height: 6px;
+ border-radius: 3px;
+ background: #ddd;
+ outline: none;
+ -webkit-appearance: none;
+ appearance: none;
+}
+
+.collection-grid-controls-slider input[type="range"]::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ appearance: none;
+ width: 18px;
+ height: 18px;
+ border-radius: 50%;
+ background: #111;
+ cursor: pointer;
+ box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+}
+
+.collection-grid-controls-slider input[type="range"]::-moz-range-thumb {
+ width: 18px;
+ height: 18px;
+ border-radius: 50%;
+ background: #111;
+ cursor: pointer;
+ border: none;
+ box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+}
+
+.collection-grid-density-value {
+ min-width: 45px;
+ text-align: center;
+ font-weight: 600;
+ color: #111;
+ font-size: 14px;
+}
+
+/* Dynamic grid columns (3-12) */
+.collection-products {
+ --grid-columns: 3;
+ display: grid !important;
+ grid-template-columns: repeat(var(--grid-columns), 1fr) !important;
+ gap: 16px !important;
+}
+
+.collection-products.grid-cols-3 { --grid-columns: 3; }
+.collection-products.grid-cols-4 { --grid-columns: 4; }
+.collection-products.grid-cols-5 { --grid-columns: 5; }
+.collection-products.grid-cols-6 { --grid-columns: 6; }
+.collection-products.grid-cols-7 { --grid-columns: 7; }
+.collection-products.grid-cols-8 { --grid-columns: 8; }
+.collection-products.grid-cols-9 { --grid-columns: 9; }
+.collection-products.grid-cols-10 { --grid-columns: 10; }
+.collection-products.grid-cols-11 { --grid-columns: 11; }
+.collection-products.grid-cols-12 { --grid-columns: 12; }
+
+/* Responsive: reduce max columns on mobile */
+@media (max-width: 768px) {
+ .collection-grid-controls {
+ flex-direction: column;
+ align-items: flex-start;
+ }
+
+ .collection-grid-controls-slider {
+ width: 100%;
+ }
+
+ .collection-products {
+ --grid-columns: 2 !important;
+ }
}
diff --git a/shopify/_cwGRID/sections/collection.liquid b/shopify/_cwGRID/sections/collection.liquid
index 08438676..2d6cbf95 100644
--- a/shopify/_cwGRID/sections/collection.liquid
+++ b/shopify/_cwGRID/sections/collection.liquid
@@ -143,8 +143,28 @@
</div>
{% endif %}
+ <!-- Grid Density Slider Control -->
+ <div class="collection-grid-controls">
+ <label for="grid-density-slider">Grid Density:</label>
+ <div class="collection-grid-controls-slider">
+ <span class="collection-grid-density-value" data-grid-density-value>3</span>
+ <input
+ type="range"
+ id="grid-density-slider"
+ data-collection-grid-slider
+ min="3"
+ max="12"
+ value="3"
+ step="1"
+ aria-label="Grid density control"
+ />
+ <span style="font-size: 12px; color: #999;">columns</span>
+ </div>
+ </div>
+
<div
- class="collection-products rows-of-{{ section.settings.products_per_row }}"
+ 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 -%}
@@ -183,6 +203,8 @@
{% endpaginate %}
</div>
+<script src="{{ 'collection-grid-density.js' | asset_url }}" defer></script>
+
{% schema %}
{
"name": "Collection pages",
← 62023bad auto-save: 2026-06-22T17:37:42 (3 files) — shopify/scripts/d
·
back to Designer Wallcoverings
·
Add push script for collection grid slider + descriptions de f74571ed →