← back to Designer Wallcoverings
Remove Show-24 per-page selector from collection toolbar; match product-type pill height to FILTERS pill
d0dddc8fd56f1e0113be13c7697fc1052b66e7b7 · 2026-06-24 13:30:01 -0700 · Steve
- Strip the 'Show N' per-page selector (JS + CSS) from the grid pill; Boost handles pagination.
- Keep the Grid density slider in the pill (density-slider hard rule).
- Pin .dw-ptype-bar to 28px box-sizing:border-box to equal the .dw-filter-toggle height.
- Applied to both active mirrors (theme-5.0-duplicate canonical + _cwGRID).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Files touched
M shopify/_cwGRID/snippets/dw-boost-overrides.liquidM shopify/theme-5.0-duplicate/snippets/dw-boost-overrides.liquid
Diff
commit d0dddc8fd56f1e0113be13c7697fc1052b66e7b7
Author: Steve <steve@designerwallcoverings.com>
Date: Wed Jun 24 13:30:01 2026 -0700
Remove Show-24 per-page selector from collection toolbar; match product-type pill height to FILTERS pill
- Strip the 'Show N' per-page selector (JS + CSS) from the grid pill; Boost handles pagination.
- Keep the Grid density slider in the pill (density-slider hard rule).
- Pin .dw-ptype-bar to 28px box-sizing:border-box to equal the .dw-filter-toggle height.
- Applied to both active mirrors (theme-5.0-duplicate canonical + _cwGRID).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
shopify/_cwGRID/snippets/dw-boost-overrides.liquid | 34 +++-------------------
.../snippets/dw-boost-overrides.liquid | 34 +++-------------------
2 files changed, 8 insertions(+), 60 deletions(-)
diff --git a/shopify/_cwGRID/snippets/dw-boost-overrides.liquid b/shopify/_cwGRID/snippets/dw-boost-overrides.liquid
index 322bbf9c..e87134ed 100644
--- a/shopify/_cwGRID/snippets/dw-boost-overrides.liquid
+++ b/shopify/_cwGRID/snippets/dw-boost-overrides.liquid
@@ -41,16 +41,13 @@ body.dw-filters-collapsed .boost-sd__product-list[class*="grid--"]{grid-template
/* Hide old dw-gc grid control — replaced by toolbar grid slider */
.dw-gc{display:none !important}
-/* Per-page selector — inside grid pill */
/* Product type checkboxes */
.dw-ptype-bar{display:inline-flex;align-items:center;gap:8px;padding:4px 12px;margin:4px 0 4px 10px;font-family:-apple-system,BlinkMacSystemFont,sans-serif;font-size:11px;user-select:none;background:#fff;border:1.5px solid #000;border-radius:999px}
.dw-ptype-bar label{display:inline-flex;align-items:center;gap:3px;cursor:pointer;font-size:11px;font-weight:600;color:#333;white-space:nowrap}
.dw-ptype-bar input[type=checkbox]{width:13px;height:13px;margin:0;cursor:pointer;accent-color:#3D4246}
.dw-ptype-bar .dw-ptype-sep{width:1px;height:14px;background:#ccc}
-
-.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}
-.dw-perpage-inline label{color:#000;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:1px}
+/* Match the right product-type pill to the FILTERS pill height (Steve 2026-06-24) */
+.dw-filter-toggle,.dw-ptype-bar{height:28px;box-sizing:border-box}
/* Fix doubled product titles in Boost cards */
.boost-sd__product-title a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
</style>
@@ -168,31 +165,8 @@ body.dw-filters-collapsed .boost-sd__product-list[class*="grid--"]{grid-template
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');
- perpageInline.className = 'dw-perpage-inline';
- var perpageLbl = document.createElement('label');
- perpageLbl.textContent = 'Show';
- var perpageSelect = document.createElement('select');
- perpageSelect.id = 'dw-perpage';
- var options = [24, 25, 50, 100];
- var currentLimit = parseInt(new URLSearchParams(window.location.search).get('limit')) || 24;
- options.forEach(function(val) {
- var opt = document.createElement('option');
- opt.value = val;
- opt.textContent = val;
- if (val === currentLimit) opt.selected = true;
- perpageSelect.appendChild(opt);
- });
- perpageSelect.addEventListener('change', function() {
- var url = new URL(window.location.href);
- url.searchParams.set('limit', this.value);
- url.searchParams.delete('page');
- window.location.href = url.toString();
- });
- perpageInline.appendChild(perpageLbl);
- perpageInline.appendChild(perpageSelect);
- sliderWrap.appendChild(perpageInline);
+ /* Per-page "Show N" selector removed per Steve 2026-06-24 — Boost handles
+ pagination; the Grid density slider stays in this pill (density hard rule). */
/* === PRODUCT TYPE CHECKBOXES === */
var ptypeBar = document.createElement('div');
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 75c5f373..6b03b435 100644
--- a/shopify/theme-5.0-duplicate/snippets/dw-boost-overrides.liquid
+++ b/shopify/theme-5.0-duplicate/snippets/dw-boost-overrides.liquid
@@ -45,16 +45,13 @@ body.dw-filters-collapsed .boost-sd__product-list[class*="grid--"]{grid-template
/* Hide old dw-gc grid control — replaced by toolbar grid slider */
.dw-gc{display:none !important}
-/* Per-page selector — inside grid pill */
/* Product type checkboxes */
.dw-ptype-bar{display:inline-flex;align-items:center;gap:8px;padding:4px 12px;margin:4px 0 4px 10px;font-family:-apple-system,BlinkMacSystemFont,sans-serif;font-size:11px;user-select:none;background:#fff;border:1.5px solid #000;border-radius:999px}
.dw-ptype-bar label{display:inline-flex;align-items:center;gap:3px;cursor:pointer;font-size:11px;font-weight:600;color:#333;white-space:nowrap}
.dw-ptype-bar input[type=checkbox]{width:13px;height:13px;margin:0;cursor:pointer;accent-color:#3D4246}
.dw-ptype-bar .dw-ptype-sep{width:1px;height:14px;background:#ccc}
-
-.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}
-.dw-perpage-inline label{color:#000;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:1px}
+/* Match the right product-type pill to the FILTERS pill height (Steve 2026-06-24) */
+.dw-filter-toggle,.dw-ptype-bar{height:28px;box-sizing:border-box}
/* Fix doubled product titles in Boost cards */
.boost-sd__product-title a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
</style>
@@ -183,31 +180,8 @@ body.dw-filters-collapsed .boost-sd__product-list[class*="grid--"]{grid-template
try { localStorage.setItem('dw-hfilter-collapsed', collapsed ? '1' : '0'); } catch(e){}
});
- /* Build per-page selector INSIDE the grid slider pill */
- var perpageInline = document.createElement('span');
- perpageInline.className = 'dw-perpage-inline';
- var perpageLbl = document.createElement('label');
- perpageLbl.textContent = 'Show';
- var perpageSelect = document.createElement('select');
- perpageSelect.id = 'dw-perpage';
- var options = [24, 25, 50, 100];
- var currentLimit = parseInt(new URLSearchParams(window.location.search).get('limit')) || 24;
- options.forEach(function(val) {
- var opt = document.createElement('option');
- opt.value = val;
- opt.textContent = val;
- if (val === currentLimit) opt.selected = true;
- perpageSelect.appendChild(opt);
- });
- perpageSelect.addEventListener('change', function() {
- var url = new URL(window.location.href);
- url.searchParams.set('limit', this.value);
- url.searchParams.delete('page');
- window.location.href = url.toString();
- });
- perpageInline.appendChild(perpageLbl);
- perpageInline.appendChild(perpageSelect);
- sliderWrap.appendChild(perpageInline);
+ /* Per-page "Show N" selector removed per Steve 2026-06-24 — Boost handles
+ pagination; the Grid density slider stays in this pill (density hard rule). */
/* === PRODUCT TYPE CHECKBOXES === */
var ptypeBar = document.createElement('div');
← e6cedea9 China Seas mailer: move heritage-house logos to a single str
·
back to Designer Wallcoverings
·
Remove dead Show-24 per-page selector from theme-files mirro 244f7d7b →