← back to Dw Marketing Reels
Collection Films: fix dead Shop CTAs to vendor-collection routes, hold Majilite (no live collection), a11y play button, auto-fit grid
579a1a74826d263810fee232bccb0ab13f17762a · 2026-08-10 16:09:59 -0700 · Steve Abrams
- filter.p.vendor= is silently ignored on this store (S&D vendor facet off) -> all 3 CTAs landed on unfiltered /collections/all. Repointed to /collections/maya-romanoff + /collections/glitter-walls (both 200, populated).
- /collections/majilite + /collections/majilite-metallics both 404 (line is sample/quote-only, TK-10425) -> Majilite card held (commented, one-line re-enable) so no shopper hits a 404.
- grid -> repeat(auto-fit, minmax(300px,384px)) centered so 2 cards render balanced (no orphan column).
- play overlay div -> <button> (fixes WCAG 2.1.1 keyboard-operability); native <video controls> kept as no-JS fallback.
TK-10427
Files touched
M storefront/dw-collection-films.liquid
Diff
commit 579a1a74826d263810fee232bccb0ab13f17762a
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Mon Aug 10 16:09:59 2026 -0700
Collection Films: fix dead Shop CTAs to vendor-collection routes, hold Majilite (no live collection), a11y play button, auto-fit grid
- filter.p.vendor= is silently ignored on this store (S&D vendor facet off) -> all 3 CTAs landed on unfiltered /collections/all. Repointed to /collections/maya-romanoff + /collections/glitter-walls (both 200, populated).
- /collections/majilite + /collections/majilite-metallics both 404 (line is sample/quote-only, TK-10425) -> Majilite card held (commented, one-line re-enable) so no shopper hits a 404.
- grid -> repeat(auto-fit, minmax(300px,384px)) centered so 2 cards render balanced (no orphan column).
- play overlay div -> <button> (fixes WCAG 2.1.1 keyboard-operability); native <video controls> kept as no-JS fallback.
TK-10427
---
storefront/dw-collection-films.liquid | 40 +++++++++++++++++++++--------------
1 file changed, 24 insertions(+), 16 deletions(-)
diff --git a/storefront/dw-collection-films.liquid b/storefront/dw-collection-films.liquid
index fce6607..dd17c42 100644
--- a/storefront/dw-collection-films.liquid
+++ b/storefront/dw-collection-films.liquid
@@ -10,13 +10,14 @@
.dwcf__head { text-align: center; margin-bottom: 34px; }
.dwcf__eyebrow { font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: #9a8f80; margin: 0 0 10px; }
.dwcf__title { font-size: clamp(26px, 4vw, 40px); font-weight: 400; letter-spacing: .01em; margin: 0; color: #1a1a1a; }
- .dwcf__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 34px; }
- @media (max-width: 1000px){ .dwcf__grid { grid-template-columns: repeat(2, 1fr); } }
- @media (max-width: 680px){ .dwcf__grid { grid-template-columns: 1fr; } }
+ /* auto-fit + centered so the grid stays balanced at 2 OR 3 cards (no orphan column when a card is held) */
+ .dwcf__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 384px)); justify-content: center; gap: 24px; margin-top: 34px; }
+ @media (max-width: 680px){ .dwcf__grid { grid-template-columns: minmax(0, 420px); } }
.dwcf__card { position: relative; border-radius: 6px; overflow: hidden; background: #efe9df; box-shadow: 0 1px 0 rgba(0,0,0,.06); }
.dwcf__vidwrap { position: relative; aspect-ratio: 16/9; background:#000; }
.dwcf__vidwrap video { position:absolute; inset:0; width:100%; height:100%; object-fit: cover; display:block; }
- .dwcf__play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; cursor:pointer; background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.35)); transition: opacity .25s; }
+ .dwcf__play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; cursor:pointer; background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.35)); transition: opacity .25s; border:0; padding:0; width:100%; }
+ .dwcf__play:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.dwcf__play svg { width:64px; height:64px; filter: drop-shadow(0 2px 8px rgba(0,0,0,.4)); }
.dwcf__meta { padding: 18px 20px 22px; }
.dwcf__name { font-size: 20px; margin: 0 0 4px; color:#1a1a1a; }
@@ -38,14 +39,14 @@
poster="https://marketing.designerwallcoverings.com/public/collections/maya-romanoff-poster.jpg">
<source src="https://marketing.designerwallcoverings.com/reels/maya-romanoff-flipbook.mp4" type="video/mp4">
</video>
- <div class="dwcf__play" onclick="var v=this.previousElementSibling; v.play(); this.style.display='none';" aria-label="Play">
- <svg viewBox="0 0 64 64" fill="none"><circle cx="32" cy="32" r="31" fill="rgba(255,255,255,.92)"/><path d="M26 20l20 12-20 12z" fill="#1a1a1a"/></svg>
- </div>
+ <button type="button" class="dwcf__play" onclick="var v=this.previousElementSibling; v.play(); this.style.display='none';" aria-label="Play video">
+ <svg viewBox="0 0 64 64" fill="none" aria-hidden="true"><circle cx="32" cy="32" r="31" fill="rgba(255,255,255,.92)"/><path d="M26 20l20 12-20 12z" fill="#1a1a1a"/></svg>
+ </button>
</div>
<div class="dwcf__meta">
<h3 class="dwcf__name">Maya Romanoff</h3>
<p class="dwcf__sub">A Study in Materials — beadwork, marquetry, metallic luster & natural fiber</p>
- <a class="dwcf__cta" href="/collections/all?filter.p.vendor=Maya+Romanoff">Shop the Collection</a>
+ <a class="dwcf__cta" href="/collections/maya-romanoff">Shop the Collection</a>
</div>
</div>
@@ -55,33 +56,40 @@
poster="https://marketing.designerwallcoverings.com/public/collections/glitter-walls-poster.jpg">
<source src="https://marketing.designerwallcoverings.com/reels/glitter-walls-flipbook.mp4" type="video/mp4">
</video>
- <div class="dwcf__play" onclick="var v=this.previousElementSibling; v.play(); this.style.display='none';" aria-label="Play">
- <svg viewBox="0 0 64 64" fill="none"><circle cx="32" cy="32" r="31" fill="rgba(255,255,255,.92)"/><path d="M26 20l20 12-20 12z" fill="#1a1a1a"/></svg>
- </div>
+ <button type="button" class="dwcf__play" onclick="var v=this.previousElementSibling; v.play(); this.style.display='none';" aria-label="Play video">
+ <svg viewBox="0 0 64 64" fill="none" aria-hidden="true"><circle cx="32" cy="32" r="31" fill="rgba(255,255,255,.92)"/><path d="M26 20l20 12-20 12z" fill="#1a1a1a"/></svg>
+ </button>
</div>
<div class="dwcf__meta">
<h3 class="dwcf__name">Glitter Walls</h3>
<p class="dwcf__sub">Bring the Sparkle Home — sequins & glass beads in gold, silver, black & jewel tones</p>
- <a class="dwcf__cta" href="/collections/all?filter.p.vendor=Glitter+Walls">Shop the Collection</a>
+ <a class="dwcf__cta" href="/collections/glitter-walls">Shop the Collection</a>
</div>
</div>
+ {%- comment -%}
+ Majilite Metallics card HELD (TK-10427): no live destination — /collections/majilite AND
+ /collections/majilite-metallics both 404 (line is sample/quote-only per TK-10425). Re-enable by
+ creating+publishing a Majilite collection, then uncomment this card and set the CTA href to its handle.
+ {%- endcomment -%}
+ {%- comment -%}
<div class="dwcf__card">
<div class="dwcf__vidwrap">
<video preload="none" playsinline controls
poster="https://marketing.designerwallcoverings.com/public/collections/majilite-metallics-poster.jpg">
<source src="https://marketing.designerwallcoverings.com/reels/majilite-metallics-flipbook.mp4" type="video/mp4">
</video>
- <div class="dwcf__play" onclick="var v=this.previousElementSibling; v.play(); this.style.display='none';" aria-label="Play">
- <svg viewBox="0 0 64 64" fill="none"><circle cx="32" cy="32" r="31" fill="rgba(255,255,255,.92)"/><path d="M26 20l20 12-20 12z" fill="#1a1a1a"/></svg>
- </div>
+ <button type="button" class="dwcf__play" onclick="var v=this.previousElementSibling; v.play(); this.style.display='none';" aria-label="Play video">
+ <svg viewBox="0 0 64 64" fill="none" aria-hidden="true"><circle cx="32" cy="32" r="31" fill="rgba(255,255,255,.92)"/><path d="M26 20l20 12-20 12z" fill="#1a1a1a"/></svg>
+ </button>
</div>
<div class="dwcf__meta">
<h3 class="dwcf__name">Majilite Metallics</h3>
<p class="dwcf__sub">A Colorway Story in Four Metals — faux-leather metallics on walls & furniture</p>
- <a class="dwcf__cta" href="/collections/all?filter.p.vendor=Majilite">Shop the Collection</a>
+ <a class="dwcf__cta" href="/collections/majilite">Shop the Collection</a>
</div>
</div>
+ {%- endcomment -%}
</div>
</section>
← f1f111b Storefront Collection Films: 3 cards (Maya Romanoff + Glitte
·
back to Dw Marketing Reels
·
chore: storefront grid auto-fit, v0.8.5 (session close) 93b2964 →