[object Object]

← back to Designer Wallcoverings

hfilter: desktop-only (>768) — mobile keeps Boost's native filter drawer untouched; padding+pattern-only-hover still apply on mobile

5b0daa828573a5592be329f85f2ed605f83a982b · 2026-06-22 19:20:08 -0700 · Steve Abrams

Files touched

Diff

commit 5b0daa828573a5592be329f85f2ed605f83a982b
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Mon Jun 22 19:20:08 2026 -0700

    hfilter: desktop-only (>768) — mobile keeps Boost's native filter drawer untouched; padding+pattern-only-hover still apply on mobile
---
 shopify/theme-5.0-duplicate/assets/dw-hfilter.js        |  3 +++
 .../snippets/dw-boost-overrides.liquid                  | 17 +++++++++++------
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/shopify/theme-5.0-duplicate/assets/dw-hfilter.js b/shopify/theme-5.0-duplicate/assets/dw-hfilter.js
index 71e50533..03957fcc 100644
--- a/shopify/theme-5.0-duplicate/assets/dw-hfilter.js
+++ b/shopify/theme-5.0-duplicate/assets/dw-hfilter.js
@@ -37,6 +37,9 @@
   'use strict';
 
   if (!/\/(collections|search)/.test(location.pathname)) return;
+  /* Desktop only — on mobile (<=768) Boost shows its own Filter-button drawer and
+     lazy-renders options; our horizontal bar is a desktop enhancement. */
+  if (window.innerWidth <= 768) return;
 
   var TREE = '.boost-sd__filter-tree-vertical';
   var GROUP = '.boost-sd__filter-option';
diff --git a/shopify/theme-5.0-duplicate/snippets/dw-boost-overrides.liquid b/shopify/theme-5.0-duplicate/snippets/dw-boost-overrides.liquid
index 22d6da3b..75c5f373 100644
--- a/shopify/theme-5.0-duplicate/snippets/dw-boost-overrides.liquid
+++ b/shopify/theme-5.0-duplicate/snippets/dw-boost-overrides.liquid
@@ -86,12 +86,17 @@ body.dw-filters-collapsed .boost-sd__product-list[class*="grid--"]{grid-template
 
 <script>
 (function(){
-  /* Collapse filters immediately */
-  document.body.classList.add('dw-filters-collapsed');
-  /* Horizontal filter bar scope hook (Approach B — dw-hfilter.*); dw-filters-collapsed stays the always-on state engine that keeps Boost's native tree hidden */
-  document.body.classList.add('dw-filters-horizontal');
-  /* Restore the horizontal-bar collapsed state (our own bar, NOT the native tree) */
-  try { if (localStorage.getItem('dw-hfilter-collapsed') === '1') document.body.classList.add('dw-hbar-collapsed'); } catch(e){}
+  /* DESKTOP ONLY: hide Boost's native vertical tree + run the horizontal bar.
+     On mobile (<=768) Boost renders its own Filter-button drawer and lazy-loads
+     the filter options only when opened — so we must NOT hide it or try to read
+     it; leave the native mobile filter completely alone. */
+  if (window.innerWidth > 768) {
+    document.body.classList.add('dw-filters-collapsed');
+    /* Horizontal filter bar scope hook (Approach B — dw-hfilter.*); dw-filters-collapsed stays the always-on state engine that keeps Boost's native tree hidden */
+    document.body.classList.add('dw-filters-horizontal');
+    /* Restore the horizontal-bar collapsed state (our own bar, NOT the native tree) */
+    try { if (localStorage.getItem('dw-hfilter-collapsed') === '1') document.body.classList.add('dw-hbar-collapsed'); } catch(e){}
+  }
   /* Set CSS var for default 4 cols */
   document.documentElement.style.setProperty('--dw-grid-cols', 4);

← 9afd52da Fix UI bugs: hide product info at rest, tight margins (2px),  ·  back to Designer Wallcoverings  ·  New Arrivals Boost scope: confirm no API key (admin-only fix 0ee05d61 →