[object Object]

← back to Designer Wallcoverings

collections: add rendered hero design preview (Artmura/Fentucci + fallback)

418f8a1624b71e409bd3b3710de1dc97e0f176ae · 2026-06-23 14:42:59 -0700 · Steve

Files touched

Diff

commit 418f8a1624b71e409bd3b3710de1dc97e0f176ae
Author: Steve <steve@designerwallcoverings.com>
Date:   Tue Jun 23 14:42:59 2026 -0700

    collections: add rendered hero design preview (Artmura/Fentucci + fallback)
---
 shopify/audit/dw-collection-hero-preview.html |  50 ++++++++++++++++++++++++++
 shopify/audit/dw-collection-hero-preview.png  | Bin 0 -> 5236065 bytes
 2 files changed, 50 insertions(+)

diff --git a/shopify/audit/dw-collection-hero-preview.html b/shopify/audit/dw-collection-hero-preview.html
new file mode 100644
index 00000000..62460715
--- /dev/null
+++ b/shopify/audit/dw-collection-hero-preview.html
@@ -0,0 +1,50 @@
+<!doctype html><html><head><meta charset="utf-8"><style>
+  body{margin:0;font-family:'Helvetica Neue',Arial,sans-serif;background:#fff;color:#111}
+  .page-width{max-width:1280px;margin:0 auto}
+  .label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#888;padding:14px 22px 4px}
+  /* ---- exact CSS from sections/dw-collection-hero.liquid ---- */
+  .dw-collection-hero{position:relative;min-height:clamp(220px,30vw,400px);display:flex;
+    align-items:flex-end;background-size:cover;background-position:center;background-repeat:no-repeat;
+    margin:0 0 1.5rem;overflow:hidden;}
+  .dw-collection-hero--fallback{background:linear-gradient(135deg,#1c1c1c 0%,#3a3a3a 55%,#2a2320 100%);}
+  .dw-collection-hero__scrim{position:absolute;inset:0;pointer-events:none;
+    background:linear-gradient(180deg,rgba(0,0,0,0) 28%,rgba(0,0,0,.6) 100%);}
+  .dw-collection-hero__inner{position:relative;z-index:1;width:100%;padding:2rem 2.25rem;color:#fff;}
+  .dw-collection-hero__crumbs{font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;opacity:.9;margin:0 0 .4rem;}
+  .dw-collection-hero__crumbs a,.dw-collection-hero__crumbs span{color:#fff;text-decoration:none;}
+  .dw-collection-hero__title{color:#fff;font-size:clamp(1.8rem,3.4vw,3rem);margin:.1rem 0 0;letter-spacing:.5px;text-shadow:0 1px 18px rgba(0,0,0,.45);}
+  .dw-collection-hero__desc{color:#fff;max-width:62ch;margin:.6rem 0 0;opacity:.95;font-size:.95rem;line-height:1.5;text-shadow:0 1px 10px rgba(0,0,0,.4);}
+  .grid-stub{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:0 22px 30px;max-width:1280px;margin:0 auto}
+  .card{aspect-ratio:3/4;background:#ece8e2;border-radius:2px}
+</style></head><body>
+
+<div class="label">A · Collection WITH a vision-confirmed room image (e.g. Artmura → Crystal-room)</div>
+<div class="dw-collection-hero" style="background-image:url('https://cdn.shopify.com/s/files/1/0015/4117/7456/files/Crystal-room.jpg?v=1781282583');">
+  <div class="dw-collection-hero__scrim"></div>
+  <div class="dw-collection-hero__inner page-width">
+    <nav class="dw-collection-hero__crumbs"><a href="#">Home</a> / <a href="#">Collections</a> / <span>Artmura</span></nav>
+    <h1 class="dw-collection-hero__title">Artmura</h1>
+    <div class="dw-collection-hero__desc">Hand-painted artistry reimagined as wallcovering — a curated Artmura selection.</div>
+  </div>
+</div>
+<div class="grid-stub"><div class="card"></div><div class="card"></div><div class="card"></div><div class="card"></div></div>
+
+<div class="label">B · Second resolved example (Fentucci Naturals → bedroom grasscloth)</div>
+<div class="dw-collection-hero" style="background-image:url('https://cdn.shopify.com/s/files/1/0015/4117/7456/files/toscana-taupe-linen-grasscloth-wallcovering-fentucci-bedroom.jpg?v=1776880954');">
+  <div class="dw-collection-hero__scrim"></div>
+  <div class="dw-collection-hero__inner page-width">
+    <nav class="dw-collection-hero__crumbs"><a href="#">Home</a> / <a href="#">Collections</a> / <span>Fentucci Naturals</span></nav>
+    <h1 class="dw-collection-hero__title">Fentucci Naturals</h1>
+  </div>
+</div>
+
+<div class="label">C · Fallback (collection with no image yet — branded gradient, never broken)</div>
+<div class="dw-collection-hero dw-collection-hero--fallback">
+  <div class="dw-collection-hero__scrim"></div>
+  <div class="dw-collection-hero__inner page-width">
+    <nav class="dw-collection-hero__crumbs"><a href="#">Home</a> / <a href="#">Collections</a> / <span>Example</span></nav>
+    <h1 class="dw-collection-hero__title">Example Collection</h1>
+  </div>
+</div>
+
+</body></html>
diff --git a/shopify/audit/dw-collection-hero-preview.png b/shopify/audit/dw-collection-hero-preview.png
new file mode 100644
index 00000000..b3bd81bd
Binary files /dev/null and b/shopify/audit/dw-collection-hero-preview.png differ

← d3862ff3 DW collection toolbar consolidation: stage 3 edited assets +  ·  back to Designer Wallcoverings  ·  Quadrille house Phase 0: register 8 net-new prefixes + repoi b09db983 →