← back to Designer Wallcoverings

Transform collection filters from vertical sidebar to horizontal tabs + extend grid density 3-12 columns

837f4d8ce5bd0038bc8bd3dbfab2a524b563ff21 · 2026-06-22 13:48:27 -0700 · Steve Abrams

Files touched

• M shopify/scripts/cadence/data/cadence-cursor.json
• A shopify/scripts/cadence/data/cadence-plan-pm-2026-06-22.json
• M shopify/scripts/cadence/data/upload-restore-2026-06-22.jsonl
• M shopify/theme-files/sections/collection.liquid

Diff

commit 837f4d8ce5bd0038bc8bd3dbfab2a524b563ff21
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Mon Jun 22 13:48:27 2026 -0700

    Transform collection filters from vertical sidebar to horizontal tabs + extend grid density 3-12 columns
---
 shopify/scripts/cadence/data/cadence-cursor.json   |  2 +-
 .../cadence/data/cadence-plan-pm-2026-06-22.json   | 11 +++
 .../cadence/data/upload-restore-2026-06-22.jsonl   |  1 +
 shopify/theme-files/sections/collection.liquid     | 92 ++++++++--------------
 4 files changed, 46 insertions(+), 60 deletions(-)

diff --git a/shopify/scripts/cadence/data/cadence-cursor.json b/shopify/scripts/cadence/data/cadence-cursor.json
index 9a6de88e..eb4a5d33 100644
--- a/shopify/scripts/cadence/data/cadence-cursor.json
+++ b/shopify/scripts/cadence/data/cadence-cursor.json
@@ -1,5 +1,5 @@
 {
  "idx": 0,
- "lastSlot": "am",
+ "lastSlot": "pm",
  "lastRun": "2026-06-22"
 }
\ No newline at end of file
diff --git a/shopify/scripts/cadence/data/cadence-plan-pm-2026-06-22.json b/shopify/scripts/cadence/data/cadence-plan-pm-2026-06-22.json
new file mode 100644
index 00000000..e1792709
--- /dev/null
+++ b/shopify/scripts/cadence/data/cadence-plan-pm-2026-06-22.json
@@ -0,0 +1,11 @@
+[
+ {
+  "vendor": "Thibaut",
+  "dw_sku": "DWTT-73401",
+  "cost": 61.2,
+  "retail": 110.77,
+  "sample": "4.25",
+  "title": "Donavin Diamond, Beige Wallcoverings | Thibaut",
+  "willActivate": true
+ }
+]
\ No newline at end of file
diff --git a/shopify/scripts/cadence/data/upload-restore-2026-06-22.jsonl b/shopify/scripts/cadence/data/upload-restore-2026-06-22.jsonl
index d3993fd0..55b981ec 100644
--- a/shopify/scripts/cadence/data/upload-restore-2026-06-22.jsonl
+++ b/shopify/scripts/cadence/data/upload-restore-2026-06-22.jsonl
@@ -124,3 +124,4 @@
 {"table":"designtex_catalog","mfr_sku":"8361252","dw_sku":"DWDX-220292","shopify_product_id":"7866117357619","action":"created","activated":true,"published":true,"status":"ACTIVE","batch_id":"upload-am-2026-06-22T13-40-04-785Z","ts":"2026-06-22T13:40:58.299Z"}
 {"table":"designtex_catalog","mfr_sku":"8361501","dw_sku":"DWDX-220293","shopify_product_id":"7866117390387","action":"created","activated":true,"published":true,"status":"ACTIVE","batch_id":"upload-am-2026-06-22T13-40-04-785Z","ts":"2026-06-22T13:41:01.884Z"}
 {"table":"designtex_catalog","mfr_sku":"8361701","dw_sku":"DWDX-220294","shopify_product_id":"7866117423155","action":"created","activated":true,"published":true,"status":"ACTIVE","batch_id":"upload-am-2026-06-22T13-40-04-785Z","ts":"2026-06-22T13:41:05.501Z"}
+{"table":"thibaut_catalog","mfr_sku":"AT78748","dw_sku":"DWTT-73401","shopify_product_id":"7866257735731","action":"created","activated":true,"published":true,"status":"ACTIVE","batch_id":"upload-pm-2026-06-22T20-40-05-135Z","ts":"2026-06-22T20:40:10.281Z"}
diff --git a/shopify/theme-files/sections/collection.liquid b/shopify/theme-files/sections/collection.liquid
index bca1e9b0..0da8c448 100644
--- a/shopify/theme-files/sections/collection.liquid
+++ b/shopify/theme-files/sections/collection.liquid
@@ -20,29 +20,37 @@
 .boost-sd__filter-option-swatch-item-img[style*="background-color: brown"]{background-color:#8B6F4E !important}
 .boost-sd__filter-option-swatch-item-img{border-radius:50%}
 
-/* Collapsed filter panel on load — full-width product grid */
-body.dw-filters-collapsed .boost-sd__filter-tree-wrapper{display:none !important}
-body.dw-filters-collapsed .boost-sd__product-list{width:100% !important;max-width:100% !important}
-body.dw-filters-collapsed .boost-sd__filter-products-wrap{display:block !important;max-width:100% !important;width:100% !important}
-body.dw-filters-collapsed .boost-sd__filter-products-wrap > div{display:block !important;max-width:100% !important;width:100% !important}
-body.dw-filters-collapsed .boost-sd__product-list-wrapper{max-width:100% !important;width:100% !important;flex:1 !important}
-body.dw-filters-collapsed .boost-sd__product-list{padding-right:0 !important;padding-left:0 !important}
-body.dw-filters-collapsed .boost-sd__product-list[class*="grid--"]{grid-template-columns:repeat(var(--dw-grid-cols, 4), 1fr) !important}
-.boost-sd__product-list[class*="grid--"]{grid-template-columns:repeat(4, 1fr) !important}
+/* HORIZONTAL FILTER TABS LAYOUT — NEW */
+.boost-sd__filter-tree-wrapper{display:flex !important;flex-direction:row !important;flex-wrap:wrap !important;gap:8px !important;align-items:flex-start !important;width:100% !important;max-width:100% !important;padding:16px 0 !important;margin:0 !important;background:transparent !important;border:none !important;box-shadow:none !important}
+.boost-sd__filter-tree-item{display:inline-flex !important;flex-direction:row !important;align-items:center !important;gap:4px !important;margin:0 !important;padding:0 !important}
+.boost-sd__filter-tree-item > .boost-sd__filter-option{display:inline-flex !important;flex-direction:row !important;align-items:center !important;gap:6px !important;margin:0 !important}
+.boost-sd__filter-option-title{display:inline-block !important;font-size:11px !important;font-weight:700 !important;letter-spacing:1.5px !important;text-transform:uppercase !important;margin:0 !important;padding:0 !important}
+.boost-sd__filter-option-dropdown{display:none !important}
+
+/* Full-width product grid always */
+.boost-sd__product-list{width:100% !important;max-width:100% !important}
+.boost-sd__filter-products-wrap{display:block !important;max-width:100% !important;width:100% !important}
+.boost-sd__filter-products-wrap > div{display:block !important;max-width:100% !important;width:100% !important}
+.boost-sd__product-list-wrapper{max-width:100% !important;width:100% !important;flex:1 !important}
+.boost-sd__product-list{padding-right:0 !important;padding-left:0 !important}
+.boost-sd__product-list[class*="grid--"]{grid-template-columns:repeat(var(--dw-grid-cols, 4), 1fr) !important}
 .boost-sd__product-list{grid-template-columns:repeat(var(--dw-grid-cols, 4), 1fr) !important}
 .boost-sd__product-list-grid--3-col{grid-template-columns:repeat(var(--dw-grid-cols, 4), 1fr) !important}
 .boost-sd__product-list-grid--4-col{grid-template-columns:repeat(var(--dw-grid-cols, 4), 1fr) !important}
 
-/* Filter toggle button */
-.dw-filter-toggle{display:inline-flex;align-items:center;gap:6px;padding:2px 14px;margin:4px 0 4px 8px;font-family:-apple-system,BlinkMacSystemFont,sans-serif;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;user-select:none;background:#fff;border:1.5px solid #000;border-radius:999px;cursor:pointer;vertical-align:middle}
-.dw-filter-toggle:hover{background:#f5f5f5}
-.dw-filter-toggle svg{width:14px;height:14px}
-
 /* Hide static grid slider from main section — dynamic one is injected into Boost toolbar */
 .shopify-section > .dw-grid-slider{display:none !important}
 /* Hide old dw-gc grid control — replaced by toolbar grid slider */
 .dw-gc{display:none !important}
 
+/* Mobile responsive: collapse horizontal filter tabs into dropdown on small screens */
+@media(max-width:640px){
+  .boost-sd__filter-tree-wrapper{max-height:120px;overflow-y:auto;border:1px solid #f0f0f0;padding:12px !important;margin-bottom:12px !important}
+  .dw-grid-slider{width:100%;margin:4px 0 !important;padding:8px 12px !important;flex-wrap:wrap}
+  .dw-grid-slider label, .dw-grid-slider .gc-num, .dw-perpage-inline{font-size:10px}
+  .dw-grid-slider input[type=range]{width:100px}
+}
+
 /* Per-page selector — inside grid pill */
 .dw-perpage-inline{display:inline-flex;align-items:baseline;gap:4px;margin-left:10px;padding-left:10px;border-left:1px solid #ccc}
 .dw-perpage-inline select{border:none;background:transparent;font-size:14px;font-weight:700;cursor:pointer;padding:0;margin:0;-webkit-appearance:none;appearance:none}
@@ -53,10 +61,10 @@ body.dw-filters-collapsed .boost-sd__product-list[class*="grid--"]{grid-template
 <style>
 .dw-grid-slider{display:inline-flex;align-items:center;gap:8px;padding:2px 16px;margin:4px 0 4px 16px;font-family:-apple-system,BlinkMacSystemFont,sans-serif;font-size:11px;user-select:none;background:#fff;border:1.5px solid #000;border-radius:999px}
 .dw-grid-slider label{color:#000;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px}
-.dw-grid-slider input[type=range]{-webkit-appearance:none;width:120px;height:3px;background:#ccc;border-radius:2px;outline:none;cursor:pointer}
+.dw-grid-slider input[type=range]{-webkit-appearance:none;width:140px;height:3px;background:#ccc;border-radius:2px;outline:none;cursor:pointer}
 .dw-grid-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#000;border-radius:50%;cursor:pointer}
 .dw-grid-slider input[type=range]::-moz-range-thumb{width:16px;height:16px;background:#000;border-radius:50%;cursor:pointer;border:none}
-.dw-grid-slider .gc-num{color:#000;font-weight:700;font-size:14px;min-width:14px;text-align:center}
+.dw-grid-slider .gc-num{color:#000;font-weight:700;font-size:14px;min-width:20px;text-align:center}
 .collection-products.rows-of-3 .product-list-item,.collection-products.rows-of-3 .product-grid-masonry-sizer{width:33.333%}
 .collection-products.rows-of-4 .product-list-item,.collection-products.rows-of-4 .product-grid-masonry-sizer{width:25%}
 .collection-products.rows-of-5 .product-list-item,.collection-products.rows-of-5 .product-grid-masonry-sizer{width:20%}
@@ -78,8 +86,6 @@ body.dw-filters-collapsed .boost-sd__product-list[class*="grid--"]{grid-template
 
 <script>
 (function(){
-  /* Collapse filters immediately */
-  document.body.classList.add('dw-filters-collapsed');
   /* Set CSS var for default 4 cols */
   document.documentElement.style.setProperty('--dw-grid-cols', 4);
 
@@ -94,10 +100,10 @@ body.dw-filters-collapsed .boost-sd__product-list[class*="grid--"]{grid-template
 
     /* === GRID SLIDER === */
     var saved = localStorage.getItem('dw-grid-cols');
-    var defaultCols = (saved && parseInt(saved) >= 3 && parseInt(saved) <= 8) ? parseInt(saved) : 4;
+    var defaultCols = (saved && parseInt(saved) >= 3 && parseInt(saved) <= 12) ? parseInt(saved) : 4;
 
     function applyGrid(val){
-      val = Math.max(3, Math.min(8, parseInt(val) || 4));
+      val = Math.max(3, Math.min(12, parseInt(val) || 4));
       document.documentElement.style.setProperty('--dw-grid-cols', val);
       boostGrid.style.setProperty('grid-template-columns', 'repeat(' + val + ', 1fr)', 'important');
       var num = document.getElementById('dw-grid-num');
@@ -112,42 +118,15 @@ body.dw-filters-collapsed .boost-sd__product-list[class*="grid--"]{grid-template
     var lbl = document.createElement('label');
     lbl.textContent = 'Grid';
     var input = document.createElement('input');
-    input.type = 'range'; input.min = '3'; input.max = '8'; input.value = defaultCols; input.id = 'dw-grid-range';
+    input.type = 'range'; input.min = '3'; input.max = '12'; input.value = defaultCols; input.id = 'dw-grid-range';
     var numSpan = document.createElement('span');
     numSpan.className = 'gc-num'; numSpan.id = 'dw-grid-num'; numSpan.textContent = defaultCols;
     sliderWrap.appendChild(lbl);
     sliderWrap.appendChild(input);
     sliderWrap.appendChild(numSpan);
     input.addEventListener('input', function(){ applyGrid(this.value); });
-    input.addEventListener('change', function(){ localStorage.setItem('dw-grid-cols', Math.max(3, Math.min(8, parseInt(this.value) || 4))); });
+    input.addEventListener('change', function(){ localStorage.setItem('dw-grid-cols', Math.max(3, Math.min(12, parseInt(this.value) || 4))); });
 
-    /* === FILTER TOGGLE === */
-    var btn = document.createElement('button');
-    btn.id = 'dw-filter-toggle';
-    btn.className = 'dw-filter-toggle';
-    btn.setAttribute('aria-label', 'Toggle filters');
-    var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-    svg.setAttribute('viewBox', '0 0 24 24');
-    svg.setAttribute('fill', 'none');
-    svg.setAttribute('stroke', 'currentColor');
-    svg.setAttribute('stroke-width', '2');
-    svg.style.cssText = 'width:14px;height:14px';
-    var ys = ['6','12','18'];
-    for (var i = 0; i < ys.length; i++) {
-      var l = document.createElementNS('http://www.w3.org/2000/svg', 'line');
-      l.setAttribute('x1','4'); l.setAttribute('y1',ys[i]);
-      l.setAttribute('x2','20'); l.setAttribute('y2',ys[i]);
-      svg.appendChild(l);
-    }
-    btn.appendChild(svg);
-    var filterLabel = document.createElement('span');
-    filterLabel.id = 'dw-filter-label';
-    filterLabel.textContent = 'Filters';
-    btn.appendChild(filterLabel);
-    btn.addEventListener('click', function(){
-      document.body.classList.toggle('dw-filters-collapsed');
-      filterLabel.textContent = document.body.classList.contains('dw-filters-collapsed') ? 'Filters' : 'Hide Filters';
-    });
 
     /* Build per-page selector INSIDE the grid slider pill */
     var perpageInline = document.createElement('span');
@@ -175,28 +154,23 @@ body.dw-filters-collapsed .boost-sd__product-list[class*="grid--"]{grid-template
     perpageInline.appendChild(perpageSelect);
     sliderWrap.appendChild(perpageInline);
 
-    /* Insert controls into Boost toolbar */
+    /* Insert grid slider into Boost toolbar */
     var toolbarRow = toolbar.parentElement;
-    toolbarRow.insertBefore(btn, toolbar);
     toolbarRow.insertBefore(sliderWrap, toolbar);
 
     /* Apply grid and watch for Boost overrides */
     applyGrid(defaultCols);
 
-    /* Observe Boost grid for style changes and re-apply our columns + kill padding */
+    /* Observe Boost grid for style changes and re-apply our columns */
     var observer = new MutationObserver(function(){
       var current = parseInt(document.getElementById('dw-grid-num').textContent) || defaultCols;
       boostGrid.style.setProperty('grid-template-columns', 'repeat(' + current + ', 1fr)', 'important');
-      if (document.body.classList.contains('dw-filters-collapsed')) {
-        boostGrid.style.setProperty('padding-right', '0', 'important');
-      }
+      boostGrid.style.setProperty('padding-right', '0', 'important');
     });
     observer.observe(boostGrid, {attributes: true, attributeFilter: ['style', 'class']});
 
-    /* Kill padding immediately */
-    if (document.body.classList.contains('dw-filters-collapsed')) {
-      boostGrid.style.setProperty('padding-right', '0', 'important');
-    }
+    /* Kill padding for full-width grid */
+    boostGrid.style.setProperty('padding-right', '0', 'important');
 
     /* Hide any leftover static grid slider */
     var old = document.querySelectorAll('div.dw-grid-slider');

← 86f2a444 add sweep-all-active.mjs — full-catalog inventory=2026 backf  ·  back to Designer Wallcoverings  ·  Add deployment memo + testing guide for collection filter UI 369a5d7e →