Diagnose collection toolbar (item2) + Boost oversized images (item3); back up live theme; gated memo

5b218dbb2f7721b3a43d7dd9981388fb60d982a6 · 2026-06-23 08:47:53 -0700 · Steve Abrams

Item 2A: desktop density slider + sort ALREADY live (verified 16+9 markup hits) — DTD keep-slider
satisfied, no live change. Item 2B: infinite-scroll held on dev per DTD. Found dev 143947038771
still carries the line-85 section-inside-section regression (needs snippet-port before any publish);
143933472819 is stale. Item 3: oversized imgs are Boost-app-served (not theme Liquid); theme's own
rimg grid is correctly sized — fix is the Boost SD image-width admin setting.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Files touched

A pending-approval/collection-grid-toolbar-and-image-perf.md

Diff

commit 5b218dbb2f7721b3a43d7dd9981388fb60d982a6
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Tue Jun 23 08:47:53 2026 -0700

    Diagnose collection toolbar (item2) + Boost oversized images (item3); back up live theme; gated memo
    
    Item 2A: desktop density slider + sort ALREADY live (verified 16+9 markup hits) — DTD keep-slider
    satisfied, no live change. Item 2B: infinite-scroll held on dev per DTD. Found dev 143947038771
    still carries the line-85 section-inside-section regression (needs snippet-port before any publish);
    143933472819 is stale. Item 3: oversized imgs are Boost-app-served (not theme Liquid); theme's own
    rimg grid is correctly sized — fix is the Boost SD image-width admin setting.
    
    Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../collection-grid-toolbar-and-image-perf.md      | 81 ++++++++++++++++++++++
 1 file changed, 81 insertions(+)

diff --git a/pending-approval/collection-grid-toolbar-and-image-perf.md b/pending-approval/collection-grid-toolbar-and-image-perf.md
new file mode 100644
index 00000000..13137e5b
--- /dev/null
+++ b/pending-approval/collection-grid-toolbar-and-image-perf.md
@@ -0,0 +1,81 @@
+# Collection grid toolbar (item 2) + oversized images (item 3) — diagnosis, DTD verdicts, gated steps
+
+**Owner:** vp-dw-commerce · **Drafted:** 2026-06-23 · **Status:** decisions committed; live publishes + Boost-admin change AWAITING STEVE
+**Live theme resolved dynamically:** role==main = **142250278963 "Steves Version 5.0"** (verified; old 143739584563 is UNPUBLISHED).
+Backup of live collection assets: `shopify/theme-backups/2026-06-23-live-142250278963/`.
+
+---
+
+## ITEM 2 — DTD verdicts (panel: Claude + Codex + Qwen, both 3/3 unanimous)
+
+**Call A — desktop density slider → KEEP-SLIDER.** **Call B — mobile infinite-scroll → HOLD-for-approval.**
+
+### A) Desktop density slider is ALREADY satisfied on LIVE — no live change needed
+The live collection renders TWO desktop-visible density sliders:
+- `{% include 'collection-toolbar' %}` (sections/collection.liquid line 151) → a `.density-control`
+  range slider (3–12 cols, localStorage `dw_collection_density`) hidden ONLY at ≤768px / ≤480px,
+  i.e. **fully visible + working on desktop**.
+- `assets/dw-grid-control.js` → an injected `.dw-gc` slider (1–8 cols, localStorage `dw-grid-cols`),
+  no media gating.
+Verified on the live page: `density-control`/`densitySlider`/`dw-grid-control` markup present (16
+hits), `collectionSort` sort dropdown present (9 hits). **The "slider removed on desktop" report was
+a DEV-THEME state, now superseded — live is compliant with Steve's standing sort+density rule.**
+*(Optional cleanup, non-gated, can do on request: TWO desktop density sliders is redundant —
+recommend retiring `dw-grid-control.js` and keeping the toolbar one. Not done yet; say the word.)*
+
+### B) Mobile infinite-scroll — HOLD on dev, do NOT publish to live (gated). ✓ honored.
+
+### Dev-theme consolidation — ONE base, but it carries a REGRESSION to fix first
+| Theme | toolbar | density.js | filters | verdict |
+|---|---|---|---|---|
+| LIVE 142250278963 | ✓ | ✓ | **SNIPPET** via `{% render %}` (correct) | source of truth |
+| dev 143933472819 "5.1" | ABSENT | ABSENT | ABSENT | stale/partial — **retire** |
+| dev 143947038771 "★ Grid+Infinite FIX" | ✓ (infinite-scroll variant) | ✓ | **SECTION** via `{%- section … -%}` (line 85) ⚠️ | consolidation base, **needs snippet-port** |
+
+⚠️ **143947038771 still has the exact regression we fixed on live:**
+`sections/collection.liquid` line 85 = `{%- section 'collection-filters-horizontal' -%}` — the
+"Cannot render sections inside sections" form. It must be converted to the snippet
+`{% render 'collection-filters-horizontal' %}` (and the snippet file copied from live) BEFORE this
+dev theme is ever considered for publish. Consolidation plan (dev-theme writes only, reversible):
+1. Make 143947038771 the single dev theme; copy from live → dev: `snippets/collection-filters-horizontal.liquid`,
+   and change dev `sections/collection.liquid` line 85 to `{% render 'collection-filters-horizontal' %}`.
+2. Restore the desktop density slider behavior to match live (it already has the toolbar; just confirm
+   no desktop-hiding media query crept in).
+3. Keep its mobile infinite-scroll + 2-col mobile grid + responsive desktop cols.
+4. Delete/retire 143933472819.
+**I can execute steps 1–4 on the DEV theme on your go** (dev writes, not live). Publishing the
+consolidated theme to LIVE is the gated action below.
+
+---
+
+## ITEM 3 — Oversized collection-grid images: root cause is the BOOST app, not theme Liquid
+
+The visible grid on `/collections/...` is rendered by the **Boost AI Search & Filter app**
+(`templates/collection.json` → app block `boost-ai-search-filter/product-filter`; wrapper
+`.boost-sd__product-filter-fallback`). The product images are fetched client-side by Boost and
+sized by **Boost's product-item template / image-size setting in the Boost app admin** — NOT by
+theme Liquid the theme token can edit. The live CSS only does `.boost-sd__product-item img{width:100%;
+height:auto}` (scales display, does not constrain SOURCE resolution → that's the "huge full-res"
+symptom). No `loading="lazy"` on the Boost imgs.
+
+**The theme's OWN grid is already correct:** the fallback `snippets/product-list-item.liquid` uses
+`{% render 'rimg', size:'600x600', lazy:true %}` and `snippets/rimg.liquid` emits proper sized URLs +
+`srcset` + lazy. So the theme isn't the offender.
+
+**Fix (Steve, in Boost SD admin — outside theme code):**
+- Boost SD → Display/Layout → Product image → set a sane max width (e.g. 400–600px, with retina
+  variant) instead of master/full-res; enable lazy-load if Boost exposes it.
+- This is an app-config change behind Steve's Boost admin login — surfaced, not auto-done.
+*(If you'd rather force it in theme CSS as a stopgap, I can add `loading="lazy"` via a Boost
+template hook only if Boost's theme-app-extension exposes the product-item snippet — it does not in
+the current setup, so the admin setting is the right lever.)*
+
+---
+
+## Steve, paste to proceed
+- [ ] OK to run dev-theme consolidation steps 1–4 on 143947038771 (dev writes only, fixes the line-85 regression)
+- [ ] After dev is clean + you review the preview, approve PUBLISH of the consolidated theme to LIVE (infinite-scroll goes live then)
+- [ ] Set the Boost SD product-image max width (item 3) in the Boost admin
+- [ ] (Optional) retire the redundant second desktop density slider (`dw-grid-control.js`)
+
+**$ cost:** $0 (local + read-only theme API + read-only public page). No metered API.

← abfe1de0 Fix: Remove price-hiding CSS from live theme - all Tres Tint · back to Designer Wallcoverings · Stage theme-optimizer read-only grid-init verifier + tres-ti c6298519 →