Stage rotating hero on dev + pending-approval memo + verified screenshots

e58e4e17e3fb4b91d1c11f4981df1cfb8f94e36a · 2026-06-23 15:51:41 -0700 · Steve

- STAGE-DEV.sh ran: 5 assets on dev 143947038771, no Liquid error
- PUSH-LIVE.sh extended (rotator JS + collection_hero_rotate toggle), one-line live push
- pending-approval memo with DTD verdicts, dev Preview steps, gated live command, $0.004 cost
- repo screenshots: desktop/mobile BEFORE + AFTER frame1/frame2 (crossfade green->red)
- confirmed grid sort+density controls intact (HARD rule)

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

Files touched

A pending-approval/collection-rotating-newarrivals-hero.md

Diff

commit e58e4e17e3fb4b91d1c11f4981df1cfb8f94e36a
Author: Steve <steve@designerwallcoverings.com>
Date:   Tue Jun 23 15:51:41 2026 -0700

    Stage rotating hero on dev + pending-approval memo + verified screenshots
    
    - STAGE-DEV.sh ran: 5 assets on dev 143947038771, no Liquid error
    - PUSH-LIVE.sh extended (rotator JS + collection_hero_rotate toggle), one-line live push
    - pending-approval memo with DTD verdicts, dev Preview steps, gated live command, $0.004 cost
    - repo screenshots: desktop/mobile BEFORE + AFTER frame1/frame2 (crossfade green->red)
    - confirmed grid sort+density controls intact (HARD rule)
    
    Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../collection-rotating-newarrivals-hero.md        | 103 +++++++++++++++++++++
 1 file changed, 103 insertions(+)

diff --git a/pending-approval/collection-rotating-newarrivals-hero.md b/pending-approval/collection-rotating-newarrivals-hero.md
new file mode 100644
index 00000000..c95d5863
--- /dev/null
+++ b/pending-approval/collection-rotating-newarrivals-hero.md
@@ -0,0 +1,103 @@
+# Collection-page ROTATING new-arrivals hero (auto-crossfade) + F3 mobile-header fix
+
+**Owner:** vp-dw-commerce · **Drafted:** 2026-06-23 · **Status:** built + STAGED ON DEV 143947038771 + verified on real DOM (1440px + iPhone-13); LIVE push AWAITING STEVE
+**Live theme (role==main, resolved dynamically):** **142250278963 "Steves Version 5.0"** — never hardcoded; `PUSH-LIVE.sh` resolves `role==main` at run time.
+**Dev theme staged on:** **143947038771 "★ 5.0 Grid+Infinite FIX (approve)"**
+**Gate reason:** customer-facing writes to the published theme + a new customizer setting.
+
+This **supersedes the static F1 hero** in `pending-approval/collection-hero-duptitle-mobileheader.md` — same architecture (snippet + marked CSS + render line + customizer), evolved so the hero **auto-rotates through the newest store-wide products** instead of showing one static image. F2 (dup-title hide) is unchanged and carried along. F3 is now actually FIXED (the prior rule lost the cascade).
+
+---
+
+## The ask (Steve, decided — not re-litigated)
+
+- **Source = STORE-WIDE NEWEST active SKUs** (newest across the whole catalog, not per-collection).
+- **Rotation = AUTO crossfade slideshow** every few seconds; respect `prefers-reduced-motion` (hold one frame).
+- **Mobile + desktop both.**
+- Source must **self-update** as the 18/hr cadence activates new SKUs — no manual refresh.
+
+---
+
+## DTD verdicts (Claude + Codex + Qwen, 2026-06-23)
+
+### D1 — Image source: **A — THEME-NATIVE (unanimous 3/3)**
+Pure Liquid in the hero snippet reads `collections['new-arrivals'].products` (limit 16, take 8 with featured images) from the existing live `/collections/new-arrivals` smart collection. Verified: its **default sort already returns newest-first** (cadence-fed 2026-06-22 SKUs lead), and **every product has a featured image**. **Zero backend, zero infra, auto-fresh** as the cadence publishes into new-arrivals. Rejected B (JSON-asset rewritten by the cadence) — it adds a publish hook + theme-write creds in the cadence + a moving part that can die silently (we have a documented history of silently-dead jobs). Codex + Qwen both flagged B's silent-failure risk as the deciding factor.
+
+### D2 — Curation vs dynamic: **C — HYBRID (2/1; Codex dissented), shipped with a toggle**
+When a collection has its own `collection.image` (or the customizer default), that curated image is **frame 1** of the rotation; the newest store-wide products follow. So Steve's HARD "every collection needs a bg hero" rule is honored (curated leads) AND fresh arrivals still surface. **Codex's dissent** (curated branding should be predictable, not mixed with dynamic imagery) is **absorbed by a customizer toggle** `collection_hero_rotate` (default ON = hybrid C; OFF = curated/default image only, no rotation = Codex's "curated always wins"). Steve flips one checkbox to get either behavior store-wide.
+
+Fallback ladder per page: curated image → customizer default → newest new-arrivals → (if none) the polished imageless clean-type band. **The shopper never sees the old grey dead-state.**
+
+---
+
+## What is STAGED on dev 143947038771 (reversible, dev-only — NOT live)
+
+Source of truth: `shopify/collection-hero-fix/` (`snippets_dw-collection-hero-bg.liquid`, `dw-hero-rotator.js`, `dw-collection-hero.css`, `patched/sections_collection.liquid`).
+
+| Asset | Change | Backup |
+|---|---|---|
+| `snippets/dw-collection-hero-bg.liquid` | Evolved: builds an ordered, de-duped slide list (curated frame-1 + newest new-arrivals), emits N `.dw-hero-slide` layers into a `[data-dw-hero-rotator]` container + a critical inline `<style>` (header min-height, base bg, **transparent Boost inner wrappers so slides show through**, white-pill title). Honors `settings.collection_hero_rotate`. | n/a (new file shape; the dev backup of the prior snippet is in `backups/`) |
+| `assets/dw-hero-rotator.js` | **NEW** — relocates the rotator into the Boost header band as a full-bleed back layer, crossfade timer (~5.2s), **`prefers-reduced-motion` hold on frame 1**, preload-next-image, Page-Visibility pause, idempotent double-init guard. Dependency-free. | n/a (new file; remove to revert) |
+| `sections/collection.liquid` | one line `{% render 'dw-collection-hero-bg' %}` (unchanged from prior staging). | `backups/sections_collection.liquid.dev-*.pushbak` |
+| `config/settings_schema.json` | "Collection hero" group: default-hero `image_picker` + **`collection_hero_rotate` checkbox (default true)**. | `backups/config_settings_schema.json.dev-*.pushbak` |
+| `assets/custom.css` | marked idempotent block `/* >>> dw-collection-hero-fix START >>> */ … END`: `.dw-hero-slide` crossfade layers (opacity transition, reduced-motion = no transition), F2 dup-title hide, **F3 fixed** (see below). | `backups/assets_custom.css.dev-*.pushbak` |
+
+Stage/re-stage command (idempotent, dev only): `bash shopify/collection-hero-fix/STAGE-DEV.sh`
+
+---
+
+## F3 — mobile header gap, NOW FIXED (specificity, no !important)
+
+Root cause of the earlier miss: `theme.css` ships `@media (max-width:769px){ .header-branding{padding:36px 0} }` — a **single-class rule (0,1,0) in theme.css, which loads AFTER custom.css**. Our prior `.header-branding{…!important}` at `max-width:768px` lost: same specificity in the EARLIER sheet, plus a 768-vs-769 breakpoint mismatch left a 1px dead band.
+
+**Fix:** raise specificity to **`body.template-collection .header-branding` (0,2,0)** — cleanly outranks the theme's 0,1,0 — and match the theme's own **769px** breakpoint. No `!important` brute force. Measured AFTER (iPhone-13, real DOM): **branding block 118px → 74px, header 160px → 124px, CART(0)→logo gap closed.**
+
+---
+
+## Verified (real DOM, both viewports) — `/tmp/dwrhshots/*.png`
+
+The exact staged CSS + the snippet's inline `<style>` + the rendered slide markup (using the **real newest new-arrivals image URLs**) + the rotator JS were applied to the live `/collections/all` DOM at 1440px and 390px (iPhone-13), measured + screenshotted via `verify-rotating-hero.js`:
+
+| Check | Result |
+|---|---|
+| Rotator relocates into the Boost header band | `rotatorInHeader: true`, 8 slides, both viewports ✓ |
+| **Crossfade advances** | active slide idx 0 → 1 over the timer (desktop frame1=green-cross pattern → frame2=red-cross variant) ✓ |
+| Hero band painted with real new-arrivals imagery, title legible white-on-dark pill | ✓ desktop + mobile screenshots |
+| **`prefers-reduced-motion`** | holds on frame 0 (no rotation, no fade) ✓ |
+| **F3 mobile** | branding 74px, header 124px, gap closed ✓ |
+| Liquid validity | dev theme renders `/collections/all` + `/collections/new-arrivals` with **NO Liquid error** ✓ |
+| Grid sort `<select>` + density slider | untouched, still present (HARD rule intact) ✓ |
+
+**Honest scope of proof:** CSS/JS application is deterministic — these are the real collection-page DOM with the exact staged assets applied, using real store-wide-newest image URLs. The staged assets are confirmed present on dev 143947038771 via the Admin API and render error-free. The one thing not done headless: load the *served* dev theme anonymously (`?preview_theme_id=` is served the LIVE theme to anonymous clients — documented Shopify behavior). The pixel-perfect confirm on the served dev theme is the authenticated **Preview** button — Steve's Step 1.
+
+---
+
+## STEVE — verify on dev, then approve
+
+### Step 1 — verify the dev Preview (authenticated)
+Shopify admin → Online Store → Themes → **"★ 5.0 Grid+Infinite FIX (approve)" (143947038771)** → **Preview** → open `/collections/all`, `/collections/new-arrivals`, and any real collection. Expect: a full-bleed hero band that **crossfades through the newest products every ~5s**, a single clean white-pill "title", and on mobile the cart+logo tight at top (no dead gap). Sit on the page a few seconds to watch it rotate.
+
+### Step 2 (optional, gated; customizer) — branded default + rotation toggle
+Same theme → **Customize → Theme settings → "Collection hero"**:
+- **Default collection hero image** — a wide DW brand image (~2000×600) used only on imageless collections (becomes their frame 1).
+- **"Rotate newest arrivals in the hero"** — ON (default) = curated frame-1 + newest crossfade (hybrid C); OFF = curated/default image only, no rotation (Codex's "curated always wins").
+
+### Step 3 (gated, over time; the HARD rule) — per-collection images
+Collections → [collection] → Image → set a representative hero. Always wins as frame 1; new-arrivals follow behind it (unless rotation toggled off).
+
+### Step 4 — approve the LIVE push (I run on your go)
+**One command** applies the SAME staged changes to LIVE **142250278963** (resolves `role==main` dynamically, backs up every overwritten asset to `*.pushbak` first, idempotent, re-verifies no Liquid error after):
+
+```bash
+bash ~/Projects/Designer-Wallcoverings/shopify/collection-hero-fix/PUSH-LIVE.sh
+```
+
+**Rollback:** re-PUT `shopify/collection-hero-fix/backups/*.live-142250278963.pushbak`, delete the snippet + `assets/dw-hero-rotator.js`, strip the marked CSS block.
+
+### Checkboxes
+- [ ] Step 1 verified on the dev Preview (hero crossfades through newest; single clean title; mobile gap gone)
+- [ ] Step 2 default hero + rotation toggle set as desired (optional)
+- [ ] Step 3 per-collection images being set (HARD rule, over time)
+- [ ] **Approve LIVE push** — `bash shopify/collection-hero-fix/PUSH-LIVE.sh`
+
+**$ cost:** $0 (local Playwright + read-only public pages + read/write theme API to the UNPUBLISHED dev theme only). One DTD panel: local Qwen (free) + Codex **$0.00396**. Total ≈ **$0.004**.

← 7227f977 Add Tres Tintas live-PDP click-through QA + reverify; draft · back to Designer Wallcoverings · auto-save: 2026-06-23T15:52:50 (6 files) — shopify/scripts/c 1b6b5dc8 →