← back to Dw Marketing Reels

auto-save: 2026-07-30T13:48:32 (3 files) — theme-edits/graduate/dw-collection-hero.20260730-134622.BACKUP.liquid theme-edits/graduate/dw-collection-hero.FIXED.liquid theme-edits/graduate/dw-collection-hero.LIVE.liquid

b5e457e10f8500807fe440d0e9cb4ad8f7eb9d08 · 2026-07-30 13:48:39 -0700 · Steve Abrams

Files touched

• A theme-edits/graduate/dw-collection-hero.20260730-134622.BACKUP.liquid
• A theme-edits/graduate/dw-collection-hero.FIXED.liquid
• A theme-edits/graduate/dw-collection-hero.LIVE.liquid

Diff

commit b5e457e10f8500807fe440d0e9cb4ad8f7eb9d08
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Thu Jul 30 13:48:39 2026 -0700

    auto-save: 2026-07-30T13:48:32 (3 files) — theme-edits/graduate/dw-collection-hero.20260730-134622.BACKUP.liquid theme-edits/graduate/dw-collection-hero.FIXED.liquid theme-edits/graduate/dw-collection-hero.LIVE.liquid
---
 ...w-collection-hero.20260730-134622.BACKUP.liquid | 220 +++++++++++++++++++++
 .../graduate/dw-collection-hero.FIXED.liquid       | 220 +++++++++++++++++++++
 .../graduate/dw-collection-hero.LIVE.liquid        | 220 +++++++++++++++++++++
 3 files changed, 660 insertions(+)

diff --git a/theme-edits/graduate/dw-collection-hero.20260730-134622.BACKUP.liquid b/theme-edits/graduate/dw-collection-hero.20260730-134622.BACKUP.liquid
new file mode 100644
index 0000000..fde4d2f
--- /dev/null
+++ b/theme-edits/graduate/dw-collection-hero.20260730-134622.BACKUP.liquid
@@ -0,0 +1,220 @@
+{%- comment -%}
+  DW Collection Hero — Steve standing rule (2026-06-23): every collection page
+  must have a background "bg" hero image. Renders collection.image as a full-bleed
+  cover background with the title + breadcrumbs + description on a SEMI-OPAQUE
+  CONTRASTING PANEL (dark scrim panel) so the text stays legible over any image.
+  Collections with no image fall back to a branded gradient so the page is never
+  broken; audit-collection-hero-images.py lists which collections still need one.
+
+  Also HIDES the Boost AI Search & Filter app's own collection banner (the
+  duplicate lower banner) + any legacy theme breadcrumbs, so only this hero shows.
+
+  Toggle by removing it from templates/collection.json "order".
+{%- endcomment -%}
+{%- comment -%}
+  BANNER RESOLUTION GATE (Steve 2026-07-30, TK-10053): a full-bleed hero must
+  NEVER stretch a low-res source (e.g. a 500px sample swatch) — that is what
+  produced the blurry Hollywood Wallcoverings banner. Three render modes:
+    image   -> collection.image is high-res (>= dw_min_w) : single full-bleed cover (sharp)
+    mosaic  -> no high-res file "for that build"          : 2x2 quadrant of product
+               images, each cell ~half page-width so a 500px source stretches
+               ~1.3x instead of ~5x (visibly sharp) and 4 swatches read as curated
+    fallback-> collection has no usable product image      : branded gradient
+{%- endcomment -%}
+{%- liquid
+  assign dw_min_w = 1400
+  assign dw_hero_img = collection.image
+  unless dw_hero_img
+    assign dw_hero_img = collection.products.first.featured_image
+  endunless
+  assign dw_mode = 'fallback'
+  if dw_hero_img and dw_hero_img.width >= dw_min_w
+    assign dw_mode = 'image'
+  endif
+-%}
+{%- if dw_mode != 'image' -%}
+  {%- comment -%} gather up to 4 distinct product images for the 2x2 mosaic {%- endcomment -%}
+  {%- assign dw_tiles = '' -%}
+  {%- assign dw_seen = ',' -%}
+  {%- assign dw_ntiles = 0 -%}
+  {%- for dw_p in collection.products limit: 40 -%}
+    {%- if dw_ntiles >= 4 -%}{%- break -%}{%- endif -%}
+    {%- if dw_p.featured_image -%}
+      {%- comment -%} dedup by stable image id (not URL string — version-bumped ?v= URLs would slip through) {%- endcomment -%}
+      {%- assign dw_probe = dw_p.featured_image.id | prepend: ',' | append: ',' -%}
+      {%- unless dw_seen contains dw_probe -%}
+        {%- assign dw_seen = dw_seen | append: dw_p.featured_image.id | append: ',' -%}
+        {%- assign dw_url = dw_p.featured_image | img_url: '800x' -%}
+        {%- assign dw_tiles = dw_tiles | append: dw_url | append: '|' -%}
+        {%- assign dw_ntiles = dw_ntiles | plus: 1 -%}
+      {%- endunless -%}
+    {%- endif -%}
+  {%- endfor -%}
+  {%- if dw_ntiles >= 1 -%}{%- assign dw_mode = 'mosaic' -%}{%- endif -%}
+  {%- assign dw_tile_list = dw_tiles | split: '|' -%}
+{%- endif -%}
+<div class="dw-collection-hero dw-collection-hero--{{ dw_mode }}"
+     {% if dw_mode == 'image' %}style="background-image:url({{ dw_hero_img | img_url: '2048x' }});"{% endif %}
+     data-dw-collection-hero data-hero-mode="{{ dw_mode }}">
+  {%- if dw_mode == 'mosaic' -%}
+    <div class="dw-collection-hero__mosaic" aria-hidden="true">
+      {%- for dw_t in dw_tile_list -%}
+        <span class="dw-collection-hero__cell" style="background-image:url({{ dw_t }});"></span>
+      {%- endfor -%}
+    </div>
+  {%- endif -%}
+  <div class="dw-collection-hero__inner page-width">
+    <div class="dw-collection-hero__panel">
+      <nav class="dw-collection-hero__crumbs" aria-label="Breadcrumb">
+        <a href="/">Home</a> <span aria-hidden="true">/</span>
+        <a href="/collections">Collections</a> <span aria-hidden="true">/</span>
+        <span aria-current="page">{{ collection.title }}</span>
+      </nav>
+      <h1 class="dw-collection-hero__title">{{ collection.title }}</h1>
+      {%- assign aeo_cat = collection.metafields.custom.category | default: 'wallcovering' -%}
+      <p class="dw-collection-hero__answer">A curated {{ aeo_cat }} collection for the design trade — {{ collection.products_count }} designs, samples and trade pricing on request.</p>
+      {%- if section.settings.show_description and collection.description != blank -%}
+        <div class="dw-collection-hero__desc">{{ collection.description | strip_html | truncatewords: 32 }}</div>
+      {%- endif -%}
+    </div>
+  </div>
+</div>
+{%- if collection.handle == 'the-graduate-collection' -%}
+<div class="dw-gflip">
+  <div class="dw-gflip__stage">
+    <video controls playsinline preload="metadata" poster="https://marketing.designerwallcoverings.com/public/collections/graduate-poster.jpg">
+      <source src="https://marketing.designerwallcoverings.com/reels/graduate-collection-flipbook.mp4" type="video/mp4">
+    </video>
+    <div class="dw-gvctl">
+      <label><span class="k">Speed</span><input type="range" class="s" min="0.25" max="2" step="0.05" value="1"><b class="sv">1&times;</b></label>
+    </div>
+    <div class="dw-gvshare">
+      <a class="g-dl" href="https://marketing.designerwallcoverings.com/reels/graduate-collection-flipbook.mp4" download title="Download"><svg viewBox="0 0 24 24"><path d="M12 3v10.6l3.3-3.3 1.4 1.4L12 17.4 6.3 11.7l1.4-1.4L11 13.6V3h1zM5 19h14v2H5z"/></svg></a>
+      <a class="g-fb" target="_blank" rel="noopener" title="Facebook"><svg viewBox="0 0 24 24"><path d="M13 22v-8h2.7l.4-3H13V9.1c0-.9.3-1.5 1.5-1.5H16V4.9c-.3 0-1.2-.1-2.3-.1-2.3 0-3.7 1.4-3.7 3.9V11H7.5v3H10v8h3z"/></svg></a>
+      <a class="g-x" target="_blank" rel="noopener" title="X"><svg viewBox="0 0 24 24"><path d="M18.9 2H22l-7 8 8.2 12h-6.4l-5-6.7L6 22H2.9l7.5-8.6L2 2h6.6l4.5 6.1L18.9 2zm-1.1 18h1.7L7.3 3.8H5.5L17.8 20z"/></svg></a>
+      <a class="g-pin" target="_blank" rel="noopener" title="Pinterest"><svg viewBox="0 0 24 24"><path d="M12 2C6.5 2 4 5.6 4 8.7c0 1.9.7 3.5 2.3 4.1.3.1.5 0 .5-.3l.2-.8c.1-.3 0-.4-.2-.6-.4-.5-.7-1.1-.7-2 0-2.6 1.9-4.9 5-4.9 2.7 0 4.2 1.7 4.2 3.9 0 2.9-1.3 5.4-3.2 5.4-1 0-1.8-.9-1.6-1.9.3-1.3.9-2.6.9-3.5 0-.8-.4-1.5-1.3-1.5-1.1 0-1.9 1.1-1.9 2.6 0 .9.3 1.6.3 1.6s-1.1 4.5-1.3 5.3c-.4 1.6-.1 3.5 0 3.7 0 .1.2.2.3.1.1-.2 1.6-2 2.1-3.8l.8-3c.4.8 1.5 1.4 2.7 1.4 3.6 0 6-3.2 6-7.6C18.3 4.8 15.5 2 12 2z"/></svg></a>
+      <a class="g-li" target="_blank" rel="noopener" title="LinkedIn"><svg viewBox="0 0 24 24"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9h4v12H3zM9 9h3.8v1.7h.1c.5-1 1.8-2 3.7-2 4 0 4.7 2.6 4.7 6V21h-4v-5.3c0-1.3 0-2.9-1.8-2.9s-2 1.4-2 2.8V21H9z"/></svg></a>
+      <a class="g-mail" title="Email"><svg viewBox="0 0 24 24"><path d="M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm9 7L4 6.8V18h16V6.8L12 12z"/></svg></a>
+    </div>
+  </div>
+</div>
+<style>
+  .dw-gflip{max-width:1100px;margin:0 auto 1.75rem;padding:0 1rem;}
+  .dw-gflip__stage{position:relative;}
+  .dw-gflip video{width:100%;display:block;border-radius:8px;background:#14110e;box-shadow:0 10px 40px rgba(0,0,0,.18);}
+  .dw-gvctl{position:absolute;left:12px;bottom:54px;z-index:5;display:flex;gap:5px;
+    background:rgba(20,16,12,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
+    padding:7px 11px;border-radius:7px;font:600 11px/1 -apple-system,system-ui,sans-serif;color:#fff;}
+  .dw-gvctl label{display:flex;align-items:center;gap:7px;margin:0;}
+  .dw-gvctl .k{width:38px;text-transform:uppercase;letter-spacing:.1em;opacity:.8;}
+  .dw-gvctl input[type=range]{width:92px;accent-color:#b08212;}
+  .dw-gvctl b{width:36px;text-align:right;opacity:.9;font-weight:600;}
+  .dw-gvshare{position:absolute;right:12px;bottom:54px;z-index:5;display:flex;gap:8px;
+    background:rgba(20,16,12,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
+    padding:6px 9px;border-radius:22px;}
+  .dw-gvshare a{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
+    border-radius:50%;color:#fff;background:rgba(255,255,255,.10);text-decoration:none;transition:.15s;}
+  .dw-gvshare a:hover{background:#b08212;}
+  .dw-gvshare svg{width:15px;height:15px;fill:currentColor;}
+</style>
+<script>
+(function(){
+  var page="https://www.designerwallcoverings.com/collections/the-graduate-collection";
+  var media="https://marketing.designerwallcoverings.com/public/collections/graduate-poster.jpg";
+  var txt="The Graduate Collection - a maximalist British wallpaper lookbook, page by page.";
+  var e=encodeURIComponent,q=function(s){return document.querySelector(s);};
+  if(q('.g-fb'))q('.g-fb').href="https://www.facebook.com/sharer/sharer.php?u="+e(page);
+  if(q('.g-x'))q('.g-x').href="https://twitter.com/intent/tweet?url="+e(page)+"&text="+e(txt);
+  if(q('.g-pin'))q('.g-pin').href="https://pinterest.com/pin/create/button/?url="+e(page)+"&media="+e(media)+"&description="+e(txt);
+  if(q('.g-li'))q('.g-li').href="https://www.linkedin.com/sharing/share-offsite/?url="+e(page);
+  if(q('.g-mail'))q('.g-mail').href="mailto:?subject="+e("The Graduate Collection")+"&body="+e(txt+" "+page);
+  document.querySelectorAll('.dw-gvctl').forEach(function(c){
+    var v=c.parentElement.querySelector('video');if(!v)return;
+    var sp=c.querySelector('.s'),spv=c.querySelector('.sv');if(!sp)return;
+    function us(){v.playbackRate=parseFloat(sp.value);spv.textContent=(Math.round(parseFloat(sp.value)*100)/100)+'×';}
+    sp.addEventListener('input',us);us();
+  });
+})();
+</script>
+{%- endif -%}
+
+{%- assign aeo_faq = collection.metafields.custom.faq.value -%}
+<script type="application/ld+json">
+{"@context":"https://schema.org","@type":"CollectionPage","name":{{ collection.title | json }},"description":{{ collection.description | strip_html | truncatewords: 40 | json }},"url":{{ request.origin | append: collection.url | json }},"isPartOf":{"@type":"WebSite","name":"Designer Wallcoverings","url":{{ request.origin | json }}}}
+</script>
+<script type="application/ld+json">
+{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":{{ request.origin | json }}},{"@type":"ListItem","position":2,"name":"Collections","item":{{ request.origin | append: '/collections' | json }}},{"@type":"ListItem","position":3,"name":{{ collection.title | json }},"item":{{ request.origin | append: collection.url | json }}}]}
+</script>
+{%- if aeo_faq != blank and aeo_faq != empty -%}
+<details class="dw-collection-faq" style="max-width:900px;margin:1rem auto .5rem;text-align:center;"><summary style="cursor:pointer;display:inline-block;list-style:none;font:600 .8rem/1.5 inherit;letter-spacing:.08em;text-transform:uppercase;padding:.55rem 1.5rem;border:1px solid currentColor;border-radius:2px;opacity:.9;">Learn about {{ collection.title | remove: ' Collections' | remove: ' Collection' }}</summary><div style="text-align:left;max-width:760px;margin:.9rem auto 0;padding:0 1rem;">{%- for item in aeo_faq -%}<h3 style="font-size:1rem;margin:.75rem 0 .25rem;">{{ item.q }}</h3><p style="margin:0 0 .5rem;opacity:.85;">{{ item.a }}</p>{%- endfor -%}</div></details>
+<script type="application/ld+json">
+{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{%- for item in aeo_faq -%}{"@type":"Question","name":{{ item.q | json }},"acceptedAnswer":{"@type":"Answer","text":{{ item.a | strip_html | json }}}}{% unless forloop.last %},{% endunless %}{%- endfor -%}]}
+</script>
+{%- endif -%}
+<style>
+  .dw-collection-hero{position:relative;min-height:clamp(20px,2.67vw,35px);display:flex;
+    align-items:center;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%);}
+  /* mosaic + gradient variants get a real banner height so the 2x2 has room */
+  .dw-collection-hero--mosaic,
+  .dw-collection-hero--fallback{min-height:clamp(190px,24vw,320px);}
+  /* 2x2 quadrant of product images — each cell ~half page-width, so a low-res
+     (e.g. 500px) source stretches ~1.3x instead of ~5x full-bleed = stays sharp */
+  .dw-collection-hero__mosaic{position:absolute;inset:0;z-index:0;display:grid;
+    grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;background:#211c19;}
+  .dw-collection-hero__cell{background-size:cover;background-position:center;
+    background-repeat:no-repeat;background-color:#211c19;min-height:0;min-width:0;}
+  /* graceful degrade when a small collection yields <4 tiles */
+  .dw-collection-hero__mosaic:has(.dw-collection-hero__cell:nth-child(1):last-child){grid-template-columns:1fr;grid-template-rows:1fr;}
+  .dw-collection-hero__mosaic:has(.dw-collection-hero__cell:nth-child(2):last-child){grid-template-rows:1fr;}
+  .dw-collection-hero__mosaic:has(.dw-collection-hero__cell:nth-child(3):last-child) .dw-collection-hero__cell:first-child{grid-column:1 / -1;}
+  .dw-collection-hero__inner{position:relative;z-index:1;width:100%;padding:0.9rem 2.25rem;}
+  /* Semi-opaque CONTRASTING panel behind the text — dark scrim over the light
+     pattern so title/breadcrumbs/description read clearly without darkening the
+     whole image. Constrained width, left-aligned. */
+  .dw-collection-hero__panel{display:inline-block;max-width:min(640px,92%);
+    background:rgba(22,18,16,0.66);
+    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
+    border:1px solid rgba(255,255,255,0.14);border-radius:6px;
+    padding:1.4rem 1.75rem;box-shadow:0 6px 30px rgba(0,0,0,.28);}
+  .dw-collection-hero__crumbs{font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;
+    color:#fff;opacity:.92;margin:0 0 .45rem;}
+  .dw-collection-hero__crumbs a,.dw-collection-hero__crumbs span{color:#fff;text-decoration:none;}
+  .dw-collection-hero__crumbs a:hover{text-decoration:underline;}
+  .dw-collection-hero__title{color:#fff;font-size:clamp(1.8rem,3.4vw,3rem);margin:.1rem 0 0;
+    letter-spacing:.5px;line-height:1.05;}
+  .dw-collection-hero__desc{color:#fff;max-width:60ch;margin:.6rem 0 0;opacity:.96;
+    font-size:.95rem;line-height:1.55;}
+
+  /* Hide the duplicate LOWER banner drawn by the Boost AI Search & Filter app
+     (its own collection header/banner) so only this hero shows. */
+  .boost-sd__collection-header,
+  .boost-sd__page-header,
+  .boost-sd__collection-header-image,
+  .boost-sd__collection-header-content,
+  .boost-sd__collection-header-title,
+  .boost-sd__collection-header-description,
+  .boost-sd__collection-title,
+  .boost-sd__collection-description{display:none !important;}
+  /* hero now carries breadcrumbs: hide any legacy theme breadcrumbs on collection pages */
+  .template-collection .breadcrumbs,
+  .template-collection .breadcrumb{display:none;}
+</style>
+
+{% schema %}
+{
+  "name": "DW Collection Hero",
+  "settings": [
+    {
+      "type": "checkbox",
+      "id": "show_description",
+      "label": "Show collection description in hero",
+      "default": true
+    }
+  ],
+  "presets": [
+    { "name": "DW Collection Hero" }
+  ]
+}
+{% endschema %}
diff --git a/theme-edits/graduate/dw-collection-hero.FIXED.liquid b/theme-edits/graduate/dw-collection-hero.FIXED.liquid
new file mode 100644
index 0000000..df4cd28
--- /dev/null
+++ b/theme-edits/graduate/dw-collection-hero.FIXED.liquid
@@ -0,0 +1,220 @@
+{%- comment -%}
+  DW Collection Hero — Steve standing rule (2026-06-23): every collection page
+  must have a background "bg" hero image. Renders collection.image as a full-bleed
+  cover background with the title + breadcrumbs + description on a SEMI-OPAQUE
+  CONTRASTING PANEL (dark scrim panel) so the text stays legible over any image.
+  Collections with no image fall back to a branded gradient so the page is never
+  broken; audit-collection-hero-images.py lists which collections still need one.
+
+  Also HIDES the Boost AI Search & Filter app's own collection banner (the
+  duplicate lower banner) + any legacy theme breadcrumbs, so only this hero shows.
+
+  Toggle by removing it from templates/collection.json "order".
+{%- endcomment -%}
+{%- comment -%}
+  BANNER RESOLUTION GATE (Steve 2026-07-30, TK-10053): a full-bleed hero must
+  NEVER stretch a low-res source (e.g. a 500px sample swatch) — that is what
+  produced the blurry Hollywood Wallcoverings banner. Three render modes:
+    image   -> collection.image is high-res (>= dw_min_w) : single full-bleed cover (sharp)
+    mosaic  -> no high-res file "for that build"          : 2x2 quadrant of product
+               images, each cell ~half page-width so a 500px source stretches
+               ~1.3x instead of ~5x (visibly sharp) and 4 swatches read as curated
+    fallback-> collection has no usable product image      : branded gradient
+{%- endcomment -%}
+{%- liquid
+  assign dw_min_w = 1400
+  assign dw_hero_img = collection.image
+  unless dw_hero_img
+    assign dw_hero_img = collection.products.first.featured_image
+  endunless
+  assign dw_mode = 'fallback'
+  if dw_hero_img and dw_hero_img.width >= dw_min_w
+    assign dw_mode = 'image'
+  endif
+-%}
+{%- if dw_mode != 'image' -%}
+  {%- comment -%} gather up to 4 distinct product images for the 2x2 mosaic {%- endcomment -%}
+  {%- assign dw_tiles = '' -%}
+  {%- assign dw_seen = ',' -%}
+  {%- assign dw_ntiles = 0 -%}
+  {%- for dw_p in collection.products limit: 40 -%}
+    {%- if dw_ntiles >= 4 -%}{%- break -%}{%- endif -%}
+    {%- if dw_p.featured_image -%}
+      {%- comment -%} dedup by stable image id (not URL string — version-bumped ?v= URLs would slip through) {%- endcomment -%}
+      {%- assign dw_probe = dw_p.featured_image.id | prepend: ',' | append: ',' -%}
+      {%- unless dw_seen contains dw_probe -%}
+        {%- assign dw_seen = dw_seen | append: dw_p.featured_image.id | append: ',' -%}
+        {%- assign dw_url = dw_p.featured_image | img_url: '800x' -%}
+        {%- assign dw_tiles = dw_tiles | append: dw_url | append: '|' -%}
+        {%- assign dw_ntiles = dw_ntiles | plus: 1 -%}
+      {%- endunless -%}
+    {%- endif -%}
+  {%- endfor -%}
+  {%- if dw_ntiles >= 1 -%}{%- assign dw_mode = 'mosaic' -%}{%- endif -%}
+  {%- assign dw_tile_list = dw_tiles | split: '|' -%}
+{%- endif -%}
+<div class="dw-collection-hero dw-collection-hero--{{ dw_mode }}"
+     {% if dw_mode == 'image' %}style="background-image:url({{ dw_hero_img | img_url: '2048x' }});"{% endif %}
+     data-dw-collection-hero data-hero-mode="{{ dw_mode }}">
+  {%- if dw_mode == 'mosaic' -%}
+    <div class="dw-collection-hero__mosaic" aria-hidden="true">
+      {%- for dw_t in dw_tile_list -%}
+        <span class="dw-collection-hero__cell" style="background-image:url({{ dw_t }});"></span>
+      {%- endfor -%}
+    </div>
+  {%- endif -%}
+  <div class="dw-collection-hero__inner page-width">
+    <div class="dw-collection-hero__panel">
+      <nav class="dw-collection-hero__crumbs" aria-label="Breadcrumb">
+        <a href="/">Home</a> <span aria-hidden="true">/</span>
+        <a href="/collections">Collections</a> <span aria-hidden="true">/</span>
+        <span aria-current="page">{{ collection.title }}</span>
+      </nav>
+      <h1 class="dw-collection-hero__title">{{ collection.title }}</h1>
+      {%- assign aeo_cat = collection.metafields.custom.category | default: 'wallcovering' -%}
+      <p class="dw-collection-hero__answer">A curated {{ aeo_cat }} collection for the design trade — {{ collection.products_count }} designs, samples and trade pricing on request.</p>
+      {%- if section.settings.show_description and collection.description != blank -%}
+        <div class="dw-collection-hero__desc">{{ collection.description | strip_html | truncatewords: 32 }}</div>
+      {%- endif -%}
+    </div>
+  </div>
+</div>
+{%- if collection.handle == 'the-graduate-collection' -%}
+<div class="dw-gflip">
+  <div class="dw-gflip__stage">
+    <video controls playsinline preload="metadata" poster="https://marketing.designerwallcoverings.com/public/collections/graduate-poster.jpg">
+      <source src="https://marketing.designerwallcoverings.com/reels/graduate-collection-flipbook.mp4" type="video/mp4">
+    </video>
+    <div class="dw-gvctl">
+      <label><span class="k">Speed</span><input type="range" class="s" min="0.25" max="2" step="0.05" value="1"><b class="sv">1&times;</b></label>
+    </div>
+    <div class="dw-glinks">
+      <a class="g-dl" href="https://marketing.designerwallcoverings.com/reels/graduate-collection-flipbook.mp4" download title="Download"><svg viewBox="0 0 24 24"><path d="M12 3v10.6l3.3-3.3 1.4 1.4L12 17.4 6.3 11.7l1.4-1.4L11 13.6V3h1zM5 19h14v2H5z"/></svg></a>
+      <a class="g-fb" target="_blank" rel="noopener" title="Facebook"><svg viewBox="0 0 24 24"><path d="M13 22v-8h2.7l.4-3H13V9.1c0-.9.3-1.5 1.5-1.5H16V4.9c-.3 0-1.2-.1-2.3-.1-2.3 0-3.7 1.4-3.7 3.9V11H7.5v3H10v8h3z"/></svg></a>
+      <a class="g-x" target="_blank" rel="noopener" title="X"><svg viewBox="0 0 24 24"><path d="M18.9 2H22l-7 8 8.2 12h-6.4l-5-6.7L6 22H2.9l7.5-8.6L2 2h6.6l4.5 6.1L18.9 2zm-1.1 18h1.7L7.3 3.8H5.5L17.8 20z"/></svg></a>
+      <a class="g-pin" target="_blank" rel="noopener" title="Pinterest"><svg viewBox="0 0 24 24"><path d="M12 2C6.5 2 4 5.6 4 8.7c0 1.9.7 3.5 2.3 4.1.3.1.5 0 .5-.3l.2-.8c.1-.3 0-.4-.2-.6-.4-.5-.7-1.1-.7-2 0-2.6 1.9-4.9 5-4.9 2.7 0 4.2 1.7 4.2 3.9 0 2.9-1.3 5.4-3.2 5.4-1 0-1.8-.9-1.6-1.9.3-1.3.9-2.6.9-3.5 0-.8-.4-1.5-1.3-1.5-1.1 0-1.9 1.1-1.9 2.6 0 .9.3 1.6.3 1.6s-1.1 4.5-1.3 5.3c-.4 1.6-.1 3.5 0 3.7 0 .1.2.2.3.1.1-.2 1.6-2 2.1-3.8l.8-3c.4.8 1.5 1.4 2.7 1.4 3.6 0 6-3.2 6-7.6C18.3 4.8 15.5 2 12 2z"/></svg></a>
+      <a class="g-li" target="_blank" rel="noopener" title="LinkedIn"><svg viewBox="0 0 24 24"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9h4v12H3zM9 9h3.8v1.7h.1c.5-1 1.8-2 3.7-2 4 0 4.7 2.6 4.7 6V21h-4v-5.3c0-1.3 0-2.9-1.8-2.9s-2 1.4-2 2.8V21H9z"/></svg></a>
+      <a class="g-mail" title="Email"><svg viewBox="0 0 24 24"><path d="M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm9 7L4 6.8V18h16V6.8L12 12z"/></svg></a>
+    </div>
+  </div>
+</div>
+<style>
+  .dw-gflip{max-width:1100px;margin:0 auto 1.75rem;padding:0 1rem;}
+  .dw-gflip__stage{position:relative;}
+  .dw-gflip video{width:100%;display:block;border-radius:8px;background:#14110e;box-shadow:0 10px 40px rgba(0,0,0,.18);}
+  .dw-gvctl{position:absolute;left:12px;bottom:54px;z-index:5;display:flex;gap:5px;
+    background:rgba(20,16,12,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
+    padding:7px 11px;border-radius:7px;font:600 11px/1 -apple-system,system-ui,sans-serif;color:#fff;}
+  .dw-gvctl label{display:flex;align-items:center;gap:7px;margin:0;}
+  .dw-gvctl .k{width:38px;text-transform:uppercase;letter-spacing:.1em;opacity:.8;}
+  .dw-gvctl input[type=range]{width:92px;accent-color:#b08212;}
+  .dw-gvctl b{width:36px;text-align:right;opacity:.9;font-weight:600;}
+  .dw-glinks{position:absolute;right:12px;bottom:54px;z-index:5;display:flex;gap:8px;
+    background:rgba(20,16,12,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
+    padding:6px 9px;border-radius:22px;}
+  .dw-glinks a{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
+    border-radius:50%;color:#fff;background:rgba(255,255,255,.10);text-decoration:none;transition:.15s;}
+  .dw-glinks a:hover{background:#b08212;}
+  .dw-glinks svg{width:15px;height:15px;fill:currentColor;}
+</style>
+<script>
+(function(){
+  var page="https://www.designerwallcoverings.com/collections/the-graduate-collection";
+  var media="https://marketing.designerwallcoverings.com/public/collections/graduate-poster.jpg";
+  var txt="The Graduate Collection - a maximalist British wallpaper lookbook, page by page.";
+  var e=encodeURIComponent,q=function(s){return document.querySelector(s);};
+  if(q('.g-fb'))q('.g-fb').href="https://www.facebook.com/sharer/sharer.php?u="+e(page);
+  if(q('.g-x'))q('.g-x').href="https://twitter.com/intent/tweet?url="+e(page)+"&text="+e(txt);
+  if(q('.g-pin'))q('.g-pin').href="https://pinterest.com/pin/create/button/?url="+e(page)+"&media="+e(media)+"&description="+e(txt);
+  if(q('.g-li'))q('.g-li').href="https://www.linkedin.com/sharing/share-offsite/?url="+e(page);
+  if(q('.g-mail'))q('.g-mail').href="mailto:?subject="+e("The Graduate Collection")+"&body="+e(txt+" "+page);
+  document.querySelectorAll('.dw-gvctl').forEach(function(c){
+    var v=c.parentElement.querySelector('video');if(!v)return;
+    var sp=c.querySelector('.s'),spv=c.querySelector('.sv');if(!sp)return;
+    function us(){v.playbackRate=parseFloat(sp.value);spv.textContent=(Math.round(parseFloat(sp.value)*100)/100)+'×';}
+    sp.addEventListener('input',us);us();
+  });
+})();
+</script>
+{%- endif -%}
+
+{%- assign aeo_faq = collection.metafields.custom.faq.value -%}
+<script type="application/ld+json">
+{"@context":"https://schema.org","@type":"CollectionPage","name":{{ collection.title | json }},"description":{{ collection.description | strip_html | truncatewords: 40 | json }},"url":{{ request.origin | append: collection.url | json }},"isPartOf":{"@type":"WebSite","name":"Designer Wallcoverings","url":{{ request.origin | json }}}}
+</script>
+<script type="application/ld+json">
+{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":{{ request.origin | json }}},{"@type":"ListItem","position":2,"name":"Collections","item":{{ request.origin | append: '/collections' | json }}},{"@type":"ListItem","position":3,"name":{{ collection.title | json }},"item":{{ request.origin | append: collection.url | json }}}]}
+</script>
+{%- if aeo_faq != blank and aeo_faq != empty -%}
+<details class="dw-collection-faq" style="max-width:900px;margin:1rem auto .5rem;text-align:center;"><summary style="cursor:pointer;display:inline-block;list-style:none;font:600 .8rem/1.5 inherit;letter-spacing:.08em;text-transform:uppercase;padding:.55rem 1.5rem;border:1px solid currentColor;border-radius:2px;opacity:.9;">Learn about {{ collection.title | remove: ' Collections' | remove: ' Collection' }}</summary><div style="text-align:left;max-width:760px;margin:.9rem auto 0;padding:0 1rem;">{%- for item in aeo_faq -%}<h3 style="font-size:1rem;margin:.75rem 0 .25rem;">{{ item.q }}</h3><p style="margin:0 0 .5rem;opacity:.85;">{{ item.a }}</p>{%- endfor -%}</div></details>
+<script type="application/ld+json">
+{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{%- for item in aeo_faq -%}{"@type":"Question","name":{{ item.q | json }},"acceptedAnswer":{"@type":"Answer","text":{{ item.a | strip_html | json }}}}{% unless forloop.last %},{% endunless %}{%- endfor -%}]}
+</script>
+{%- endif -%}
+<style>
+  .dw-collection-hero{position:relative;min-height:clamp(20px,2.67vw,35px);display:flex;
+    align-items:center;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%);}
+  /* mosaic + gradient variants get a real banner height so the 2x2 has room */
+  .dw-collection-hero--mosaic,
+  .dw-collection-hero--fallback{min-height:clamp(190px,24vw,320px);}
+  /* 2x2 quadrant of product images — each cell ~half page-width, so a low-res
+     (e.g. 500px) source stretches ~1.3x instead of ~5x full-bleed = stays sharp */
+  .dw-collection-hero__mosaic{position:absolute;inset:0;z-index:0;display:grid;
+    grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;background:#211c19;}
+  .dw-collection-hero__cell{background-size:cover;background-position:center;
+    background-repeat:no-repeat;background-color:#211c19;min-height:0;min-width:0;}
+  /* graceful degrade when a small collection yields <4 tiles */
+  .dw-collection-hero__mosaic:has(.dw-collection-hero__cell:nth-child(1):last-child){grid-template-columns:1fr;grid-template-rows:1fr;}
+  .dw-collection-hero__mosaic:has(.dw-collection-hero__cell:nth-child(2):last-child){grid-template-rows:1fr;}
+  .dw-collection-hero__mosaic:has(.dw-collection-hero__cell:nth-child(3):last-child) .dw-collection-hero__cell:first-child{grid-column:1 / -1;}
+  .dw-collection-hero__inner{position:relative;z-index:1;width:100%;padding:0.9rem 2.25rem;}
+  /* Semi-opaque CONTRASTING panel behind the text — dark scrim over the light
+     pattern so title/breadcrumbs/description read clearly without darkening the
+     whole image. Constrained width, left-aligned. */
+  .dw-collection-hero__panel{display:inline-block;max-width:min(640px,92%);
+    background:rgba(22,18,16,0.66);
+    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
+    border:1px solid rgba(255,255,255,0.14);border-radius:6px;
+    padding:1.4rem 1.75rem;box-shadow:0 6px 30px rgba(0,0,0,.28);}
+  .dw-collection-hero__crumbs{font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;
+    color:#fff;opacity:.92;margin:0 0 .45rem;}
+  .dw-collection-hero__crumbs a,.dw-collection-hero__crumbs span{color:#fff;text-decoration:none;}
+  .dw-collection-hero__crumbs a:hover{text-decoration:underline;}
+  .dw-collection-hero__title{color:#fff;font-size:clamp(1.8rem,3.4vw,3rem);margin:.1rem 0 0;
+    letter-spacing:.5px;line-height:1.05;}
+  .dw-collection-hero__desc{color:#fff;max-width:60ch;margin:.6rem 0 0;opacity:.96;
+    font-size:.95rem;line-height:1.55;}
+
+  /* Hide the duplicate LOWER banner drawn by the Boost AI Search & Filter app
+     (its own collection header/banner) so only this hero shows. */
+  .boost-sd__collection-header,
+  .boost-sd__page-header,
+  .boost-sd__collection-header-image,
+  .boost-sd__collection-header-content,
+  .boost-sd__collection-header-title,
+  .boost-sd__collection-header-description,
+  .boost-sd__collection-title,
+  .boost-sd__collection-description{display:none !important;}
+  /* hero now carries breadcrumbs: hide any legacy theme breadcrumbs on collection pages */
+  .template-collection .breadcrumbs,
+  .template-collection .breadcrumb{display:none;}
+</style>
+
+{% schema %}
+{
+  "name": "DW Collection Hero",
+  "settings": [
+    {
+      "type": "checkbox",
+      "id": "show_description",
+      "label": "Show collection description in hero",
+      "default": true
+    }
+  ],
+  "presets": [
+    { "name": "DW Collection Hero" }
+  ]
+}
+{% endschema %}
diff --git a/theme-edits/graduate/dw-collection-hero.LIVE.liquid b/theme-edits/graduate/dw-collection-hero.LIVE.liquid
new file mode 100644
index 0000000..fde4d2f
--- /dev/null
+++ b/theme-edits/graduate/dw-collection-hero.LIVE.liquid
@@ -0,0 +1,220 @@
+{%- comment -%}
+  DW Collection Hero — Steve standing rule (2026-06-23): every collection page
+  must have a background "bg" hero image. Renders collection.image as a full-bleed
+  cover background with the title + breadcrumbs + description on a SEMI-OPAQUE
+  CONTRASTING PANEL (dark scrim panel) so the text stays legible over any image.
+  Collections with no image fall back to a branded gradient so the page is never
+  broken; audit-collection-hero-images.py lists which collections still need one.
+
+  Also HIDES the Boost AI Search & Filter app's own collection banner (the
+  duplicate lower banner) + any legacy theme breadcrumbs, so only this hero shows.
+
+  Toggle by removing it from templates/collection.json "order".
+{%- endcomment -%}
+{%- comment -%}
+  BANNER RESOLUTION GATE (Steve 2026-07-30, TK-10053): a full-bleed hero must
+  NEVER stretch a low-res source (e.g. a 500px sample swatch) — that is what
+  produced the blurry Hollywood Wallcoverings banner. Three render modes:
+    image   -> collection.image is high-res (>= dw_min_w) : single full-bleed cover (sharp)
+    mosaic  -> no high-res file "for that build"          : 2x2 quadrant of product
+               images, each cell ~half page-width so a 500px source stretches
+               ~1.3x instead of ~5x (visibly sharp) and 4 swatches read as curated
+    fallback-> collection has no usable product image      : branded gradient
+{%- endcomment -%}
+{%- liquid
+  assign dw_min_w = 1400
+  assign dw_hero_img = collection.image
+  unless dw_hero_img
+    assign dw_hero_img = collection.products.first.featured_image
+  endunless
+  assign dw_mode = 'fallback'
+  if dw_hero_img and dw_hero_img.width >= dw_min_w
+    assign dw_mode = 'image'
+  endif
+-%}
+{%- if dw_mode != 'image' -%}
+  {%- comment -%} gather up to 4 distinct product images for the 2x2 mosaic {%- endcomment -%}
+  {%- assign dw_tiles = '' -%}
+  {%- assign dw_seen = ',' -%}
+  {%- assign dw_ntiles = 0 -%}
+  {%- for dw_p in collection.products limit: 40 -%}
+    {%- if dw_ntiles >= 4 -%}{%- break -%}{%- endif -%}
+    {%- if dw_p.featured_image -%}
+      {%- comment -%} dedup by stable image id (not URL string — version-bumped ?v= URLs would slip through) {%- endcomment -%}
+      {%- assign dw_probe = dw_p.featured_image.id | prepend: ',' | append: ',' -%}
+      {%- unless dw_seen contains dw_probe -%}
+        {%- assign dw_seen = dw_seen | append: dw_p.featured_image.id | append: ',' -%}
+        {%- assign dw_url = dw_p.featured_image | img_url: '800x' -%}
+        {%- assign dw_tiles = dw_tiles | append: dw_url | append: '|' -%}
+        {%- assign dw_ntiles = dw_ntiles | plus: 1 -%}
+      {%- endunless -%}
+    {%- endif -%}
+  {%- endfor -%}
+  {%- if dw_ntiles >= 1 -%}{%- assign dw_mode = 'mosaic' -%}{%- endif -%}
+  {%- assign dw_tile_list = dw_tiles | split: '|' -%}
+{%- endif -%}
+<div class="dw-collection-hero dw-collection-hero--{{ dw_mode }}"
+     {% if dw_mode == 'image' %}style="background-image:url({{ dw_hero_img | img_url: '2048x' }});"{% endif %}
+     data-dw-collection-hero data-hero-mode="{{ dw_mode }}">
+  {%- if dw_mode == 'mosaic' -%}
+    <div class="dw-collection-hero__mosaic" aria-hidden="true">
+      {%- for dw_t in dw_tile_list -%}
+        <span class="dw-collection-hero__cell" style="background-image:url({{ dw_t }});"></span>
+      {%- endfor -%}
+    </div>
+  {%- endif -%}
+  <div class="dw-collection-hero__inner page-width">
+    <div class="dw-collection-hero__panel">
+      <nav class="dw-collection-hero__crumbs" aria-label="Breadcrumb">
+        <a href="/">Home</a> <span aria-hidden="true">/</span>
+        <a href="/collections">Collections</a> <span aria-hidden="true">/</span>
+        <span aria-current="page">{{ collection.title }}</span>
+      </nav>
+      <h1 class="dw-collection-hero__title">{{ collection.title }}</h1>
+      {%- assign aeo_cat = collection.metafields.custom.category | default: 'wallcovering' -%}
+      <p class="dw-collection-hero__answer">A curated {{ aeo_cat }} collection for the design trade — {{ collection.products_count }} designs, samples and trade pricing on request.</p>
+      {%- if section.settings.show_description and collection.description != blank -%}
+        <div class="dw-collection-hero__desc">{{ collection.description | strip_html | truncatewords: 32 }}</div>
+      {%- endif -%}
+    </div>
+  </div>
+</div>
+{%- if collection.handle == 'the-graduate-collection' -%}
+<div class="dw-gflip">
+  <div class="dw-gflip__stage">
+    <video controls playsinline preload="metadata" poster="https://marketing.designerwallcoverings.com/public/collections/graduate-poster.jpg">
+      <source src="https://marketing.designerwallcoverings.com/reels/graduate-collection-flipbook.mp4" type="video/mp4">
+    </video>
+    <div class="dw-gvctl">
+      <label><span class="k">Speed</span><input type="range" class="s" min="0.25" max="2" step="0.05" value="1"><b class="sv">1&times;</b></label>
+    </div>
+    <div class="dw-gvshare">
+      <a class="g-dl" href="https://marketing.designerwallcoverings.com/reels/graduate-collection-flipbook.mp4" download title="Download"><svg viewBox="0 0 24 24"><path d="M12 3v10.6l3.3-3.3 1.4 1.4L12 17.4 6.3 11.7l1.4-1.4L11 13.6V3h1zM5 19h14v2H5z"/></svg></a>
+      <a class="g-fb" target="_blank" rel="noopener" title="Facebook"><svg viewBox="0 0 24 24"><path d="M13 22v-8h2.7l.4-3H13V9.1c0-.9.3-1.5 1.5-1.5H16V4.9c-.3 0-1.2-.1-2.3-.1-2.3 0-3.7 1.4-3.7 3.9V11H7.5v3H10v8h3z"/></svg></a>
+      <a class="g-x" target="_blank" rel="noopener" title="X"><svg viewBox="0 0 24 24"><path d="M18.9 2H22l-7 8 8.2 12h-6.4l-5-6.7L6 22H2.9l7.5-8.6L2 2h6.6l4.5 6.1L18.9 2zm-1.1 18h1.7L7.3 3.8H5.5L17.8 20z"/></svg></a>
+      <a class="g-pin" target="_blank" rel="noopener" title="Pinterest"><svg viewBox="0 0 24 24"><path d="M12 2C6.5 2 4 5.6 4 8.7c0 1.9.7 3.5 2.3 4.1.3.1.5 0 .5-.3l.2-.8c.1-.3 0-.4-.2-.6-.4-.5-.7-1.1-.7-2 0-2.6 1.9-4.9 5-4.9 2.7 0 4.2 1.7 4.2 3.9 0 2.9-1.3 5.4-3.2 5.4-1 0-1.8-.9-1.6-1.9.3-1.3.9-2.6.9-3.5 0-.8-.4-1.5-1.3-1.5-1.1 0-1.9 1.1-1.9 2.6 0 .9.3 1.6.3 1.6s-1.1 4.5-1.3 5.3c-.4 1.6-.1 3.5 0 3.7 0 .1.2.2.3.1.1-.2 1.6-2 2.1-3.8l.8-3c.4.8 1.5 1.4 2.7 1.4 3.6 0 6-3.2 6-7.6C18.3 4.8 15.5 2 12 2z"/></svg></a>
+      <a class="g-li" target="_blank" rel="noopener" title="LinkedIn"><svg viewBox="0 0 24 24"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9h4v12H3zM9 9h3.8v1.7h.1c.5-1 1.8-2 3.7-2 4 0 4.7 2.6 4.7 6V21h-4v-5.3c0-1.3 0-2.9-1.8-2.9s-2 1.4-2 2.8V21H9z"/></svg></a>
+      <a class="g-mail" title="Email"><svg viewBox="0 0 24 24"><path d="M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm9 7L4 6.8V18h16V6.8L12 12z"/></svg></a>
+    </div>
+  </div>
+</div>
+<style>
+  .dw-gflip{max-width:1100px;margin:0 auto 1.75rem;padding:0 1rem;}
+  .dw-gflip__stage{position:relative;}
+  .dw-gflip video{width:100%;display:block;border-radius:8px;background:#14110e;box-shadow:0 10px 40px rgba(0,0,0,.18);}
+  .dw-gvctl{position:absolute;left:12px;bottom:54px;z-index:5;display:flex;gap:5px;
+    background:rgba(20,16,12,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
+    padding:7px 11px;border-radius:7px;font:600 11px/1 -apple-system,system-ui,sans-serif;color:#fff;}
+  .dw-gvctl label{display:flex;align-items:center;gap:7px;margin:0;}
+  .dw-gvctl .k{width:38px;text-transform:uppercase;letter-spacing:.1em;opacity:.8;}
+  .dw-gvctl input[type=range]{width:92px;accent-color:#b08212;}
+  .dw-gvctl b{width:36px;text-align:right;opacity:.9;font-weight:600;}
+  .dw-gvshare{position:absolute;right:12px;bottom:54px;z-index:5;display:flex;gap:8px;
+    background:rgba(20,16,12,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
+    padding:6px 9px;border-radius:22px;}
+  .dw-gvshare a{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
+    border-radius:50%;color:#fff;background:rgba(255,255,255,.10);text-decoration:none;transition:.15s;}
+  .dw-gvshare a:hover{background:#b08212;}
+  .dw-gvshare svg{width:15px;height:15px;fill:currentColor;}
+</style>
+<script>
+(function(){
+  var page="https://www.designerwallcoverings.com/collections/the-graduate-collection";
+  var media="https://marketing.designerwallcoverings.com/public/collections/graduate-poster.jpg";
+  var txt="The Graduate Collection - a maximalist British wallpaper lookbook, page by page.";
+  var e=encodeURIComponent,q=function(s){return document.querySelector(s);};
+  if(q('.g-fb'))q('.g-fb').href="https://www.facebook.com/sharer/sharer.php?u="+e(page);
+  if(q('.g-x'))q('.g-x').href="https://twitter.com/intent/tweet?url="+e(page)+"&text="+e(txt);
+  if(q('.g-pin'))q('.g-pin').href="https://pinterest.com/pin/create/button/?url="+e(page)+"&media="+e(media)+"&description="+e(txt);
+  if(q('.g-li'))q('.g-li').href="https://www.linkedin.com/sharing/share-offsite/?url="+e(page);
+  if(q('.g-mail'))q('.g-mail').href="mailto:?subject="+e("The Graduate Collection")+"&body="+e(txt+" "+page);
+  document.querySelectorAll('.dw-gvctl').forEach(function(c){
+    var v=c.parentElement.querySelector('video');if(!v)return;
+    var sp=c.querySelector('.s'),spv=c.querySelector('.sv');if(!sp)return;
+    function us(){v.playbackRate=parseFloat(sp.value);spv.textContent=(Math.round(parseFloat(sp.value)*100)/100)+'×';}
+    sp.addEventListener('input',us);us();
+  });
+})();
+</script>
+{%- endif -%}
+
+{%- assign aeo_faq = collection.metafields.custom.faq.value -%}
+<script type="application/ld+json">
+{"@context":"https://schema.org","@type":"CollectionPage","name":{{ collection.title | json }},"description":{{ collection.description | strip_html | truncatewords: 40 | json }},"url":{{ request.origin | append: collection.url | json }},"isPartOf":{"@type":"WebSite","name":"Designer Wallcoverings","url":{{ request.origin | json }}}}
+</script>
+<script type="application/ld+json">
+{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":{{ request.origin | json }}},{"@type":"ListItem","position":2,"name":"Collections","item":{{ request.origin | append: '/collections' | json }}},{"@type":"ListItem","position":3,"name":{{ collection.title | json }},"item":{{ request.origin | append: collection.url | json }}}]}
+</script>
+{%- if aeo_faq != blank and aeo_faq != empty -%}
+<details class="dw-collection-faq" style="max-width:900px;margin:1rem auto .5rem;text-align:center;"><summary style="cursor:pointer;display:inline-block;list-style:none;font:600 .8rem/1.5 inherit;letter-spacing:.08em;text-transform:uppercase;padding:.55rem 1.5rem;border:1px solid currentColor;border-radius:2px;opacity:.9;">Learn about {{ collection.title | remove: ' Collections' | remove: ' Collection' }}</summary><div style="text-align:left;max-width:760px;margin:.9rem auto 0;padding:0 1rem;">{%- for item in aeo_faq -%}<h3 style="font-size:1rem;margin:.75rem 0 .25rem;">{{ item.q }}</h3><p style="margin:0 0 .5rem;opacity:.85;">{{ item.a }}</p>{%- endfor -%}</div></details>
+<script type="application/ld+json">
+{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{%- for item in aeo_faq -%}{"@type":"Question","name":{{ item.q | json }},"acceptedAnswer":{"@type":"Answer","text":{{ item.a | strip_html | json }}}}{% unless forloop.last %},{% endunless %}{%- endfor -%}]}
+</script>
+{%- endif -%}
+<style>
+  .dw-collection-hero{position:relative;min-height:clamp(20px,2.67vw,35px);display:flex;
+    align-items:center;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%);}
+  /* mosaic + gradient variants get a real banner height so the 2x2 has room */
+  .dw-collection-hero--mosaic,
+  .dw-collection-hero--fallback{min-height:clamp(190px,24vw,320px);}
+  /* 2x2 quadrant of product images — each cell ~half page-width, so a low-res
+     (e.g. 500px) source stretches ~1.3x instead of ~5x full-bleed = stays sharp */
+  .dw-collection-hero__mosaic{position:absolute;inset:0;z-index:0;display:grid;
+    grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;background:#211c19;}
+  .dw-collection-hero__cell{background-size:cover;background-position:center;
+    background-repeat:no-repeat;background-color:#211c19;min-height:0;min-width:0;}
+  /* graceful degrade when a small collection yields <4 tiles */
+  .dw-collection-hero__mosaic:has(.dw-collection-hero__cell:nth-child(1):last-child){grid-template-columns:1fr;grid-template-rows:1fr;}
+  .dw-collection-hero__mosaic:has(.dw-collection-hero__cell:nth-child(2):last-child){grid-template-rows:1fr;}
+  .dw-collection-hero__mosaic:has(.dw-collection-hero__cell:nth-child(3):last-child) .dw-collection-hero__cell:first-child{grid-column:1 / -1;}
+  .dw-collection-hero__inner{position:relative;z-index:1;width:100%;padding:0.9rem 2.25rem;}
+  /* Semi-opaque CONTRASTING panel behind the text — dark scrim over the light
+     pattern so title/breadcrumbs/description read clearly without darkening the
+     whole image. Constrained width, left-aligned. */
+  .dw-collection-hero__panel{display:inline-block;max-width:min(640px,92%);
+    background:rgba(22,18,16,0.66);
+    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
+    border:1px solid rgba(255,255,255,0.14);border-radius:6px;
+    padding:1.4rem 1.75rem;box-shadow:0 6px 30px rgba(0,0,0,.28);}
+  .dw-collection-hero__crumbs{font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;
+    color:#fff;opacity:.92;margin:0 0 .45rem;}
+  .dw-collection-hero__crumbs a,.dw-collection-hero__crumbs span{color:#fff;text-decoration:none;}
+  .dw-collection-hero__crumbs a:hover{text-decoration:underline;}
+  .dw-collection-hero__title{color:#fff;font-size:clamp(1.8rem,3.4vw,3rem);margin:.1rem 0 0;
+    letter-spacing:.5px;line-height:1.05;}
+  .dw-collection-hero__desc{color:#fff;max-width:60ch;margin:.6rem 0 0;opacity:.96;
+    font-size:.95rem;line-height:1.55;}
+
+  /* Hide the duplicate LOWER banner drawn by the Boost AI Search & Filter app
+     (its own collection header/banner) so only this hero shows. */
+  .boost-sd__collection-header,
+  .boost-sd__page-header,
+  .boost-sd__collection-header-image,
+  .boost-sd__collection-header-content,
+  .boost-sd__collection-header-title,
+  .boost-sd__collection-header-description,
+  .boost-sd__collection-title,
+  .boost-sd__collection-description{display:none !important;}
+  /* hero now carries breadcrumbs: hide any legacy theme breadcrumbs on collection pages */
+  .template-collection .breadcrumbs,
+  .template-collection .breadcrumb{display:none;}
+</style>
+
+{% schema %}
+{
+  "name": "DW Collection Hero",
+  "settings": [
+    {
+      "type": "checkbox",
+      "id": "show_description",
+      "label": "Show collection description in hero",
+      "default": true
+    }
+  ],
+  "presets": [
+    { "name": "DW Collection Hero" }
+  ]
+}
+{% endschema %}

← 3aafc8c auto-save: 2026-07-30T13:18:21 (1 files) — flipbooks/graduat  ·  back to Dw Marketing Reels  ·  auto-save: 2026-07-30T14:18:43 (2 files) — public/collection bda7ca9 →