collection hero (dev theme): semi-opaque contrasting text panel + hide duplicate Boost lower banner

4fe043e3e2afc9fb2507b038219ef52b97ac356c · 2026-06-24 14:35:45 -0700 · Steve
Files touched

A shopify/theme-live-readonly/sections/dw-collection-hero.liquid
Diff

commit 4fe043e3e2afc9fb2507b038219ef52b97ac356c
Author: Steve <steve@designerwallcoverings.com>
Date:   Wed Jun 24 14:35:45 2026 -0700

    collection hero (dev theme): semi-opaque contrasting text panel + hide duplicate Boost lower banner
---
 .../sections/dw-collection-hero.liquid             | 90 ++++++++++++++++++++++
 1 file changed, 90 insertions(+)

diff --git a/shopify/theme-live-readonly/sections/dw-collection-hero.liquid b/shopify/theme-live-readonly/sections/dw-collection-hero.liquid
new file mode 100644
index 00000000..0f3c0a07
--- /dev/null
+++ b/shopify/theme-live-readonly/sections/dw-collection-hero.liquid
@@ -0,0 +1,90 @@
+{%- 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 -%}
+{%- liquid
+  assign dw_has_hero = false
+  if collection.image
+    assign dw_has_hero = true
+  endif
+-%}
+<div class="dw-collection-hero{% unless dw_has_hero %} dw-collection-hero--fallback{% endunless %}"
+     {% if dw_has_hero %}style="background-image:url({{ collection.image | img_url: '2048x' }});"{% endif %}
+     data-dw-collection-hero>
+  <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>
+      {%- 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>
+<style>
+  .dw-collection-hero{position:relative;min-height:clamp(240px,32vw,420px);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%);}
+  .dw-collection-hero__inner{position:relative;z-index:1;width:100%;padding:2rem 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 %}
← 29700f1b China Seas mailer: DW banner restored at top, China Seas log · back to Designer Wallcoverings · China Seas mailer: pink Clementine room hero (logo centered) e9f90aa9 →