← back to Dw Marketing Reels
theme-edits/graduate/dw-collection-hero.liquid.before-sliders
171 lines
{%- 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-graduate-flipbook" style="max-width:1100px;margin:0 auto 1.75rem;padding:0 1rem;">
<video controls playsinline preload="metadata" poster="https://marketing.designerwallcoverings.com/public/collections/graduate-poster.jpg" style="width:100%;display:block;border-radius:8px;background:#14110e;box-shadow:0 10px 40px rgba(0,0,0,.18);">
<source src="https://marketing.designerwallcoverings.com/reels/graduate-collection-flipbook.mp4" type="video/mp4">
</video>
<p style="text-align:center;font-style:italic;color:#666;margin:.6rem 0 0;font-size:.9rem;">Leaf through the collection, narrated. 🔊 Sound on.</p>
</div>
{%- 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 %}