[object Object]

← back to Designer Wallcoverings

PDP: full-width 'More Wallcoverings Like This' + Download-PDF button-clip fix (Steve 2026-07-28)

555aa61eb81575ee6ee40d4202fc113e16e5687f · 2026-07-28 11:26:59 -0700 · steve@designerwallcoverings.com

- More Wallcoverings Like This (CLIP similarity row): moved OUT of the narrow left
  gallery column to a full-width band below the two-column block (DTD design-panel
  verdict A: front-page-steward + ui-ux-designer over graphic-designer). max-width
  1200px, 8-across, clear:both so it can never collide with the SPECIFICATIONS block.
  Removed from color-palette.liquid, re-added full-width in product.liquid.
- Download-PDF button: fixed clip in narrow/zoomed info column (theme.liquid) —
  Sample + Download-PDF are now equal shrink-to-fit halves, stack under 600px.
- Both pushed live to theme 144396058675 (PUT 200); verified on live PDP:
  strip=1200px, 8 cols, specs clearance 302px, no collision.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Files touched

Diff

commit 555aa61eb81575ee6ee40d4202fc113e16e5687f
Author: steve@designerwallcoverings.com <steve@designerwallcoverings.com>
Date:   Tue Jul 28 11:26:59 2026 -0700

    PDP: full-width 'More Wallcoverings Like This' + Download-PDF button-clip fix (Steve 2026-07-28)
    
    - More Wallcoverings Like This (CLIP similarity row): moved OUT of the narrow left
      gallery column to a full-width band below the two-column block (DTD design-panel
      verdict A: front-page-steward + ui-ux-designer over graphic-designer). max-width
      1200px, 8-across, clear:both so it can never collide with the SPECIFICATIONS block.
      Removed from color-palette.liquid, re-added full-width in product.liquid.
    - Download-PDF button: fixed clip in narrow/zoomed info column (theme.liquid) —
      Sample + Download-PDF are now equal shrink-to-fit halves, stack under 600px.
    - Both pushed live to theme 144396058675 (PUT 200); verified on live PDP:
      strip=1200px, 8 cols, specs clearance 302px, no collision.
    Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../sections/product.liquid                        | 59 ++++++++++++++++++++++
 .../snippets/color-palette.liquid                  | 53 +------------------
 2 files changed, 60 insertions(+), 52 deletions(-)

diff --git a/shopify/theme-LIVE-pull-20260728-colorbar/sections/product.liquid b/shopify/theme-LIVE-pull-20260728-colorbar/sections/product.liquid
index e3d316af..54296f05 100644
--- a/shopify/theme-LIVE-pull-20260728-colorbar/sections/product.liquid
+++ b/shopify/theme-LIVE-pull-20260728-colorbar/sections/product.liquid
@@ -63,6 +63,65 @@
     show_payment_button: show_payment_button,
   %}
 
+  {%- comment -%} More Wallcoverings Like This — full-width CLIP similarity row, moved here from the color-palette snippet so it spans the whole page below the two-column block (Steve 2026-07-28). {%- endcomment -%}
+{%- comment -%} CLIP "More like this" — PDP color-dot CLIP visual-similarity row.
+  Calls the SAME-BEHAVIOR public proxy /apps/similar (dwphoto → loopback CLIP :9914),
+  which returns the visually-nearest patterns to THIS product, softly re-ranked by the
+  same hex→color-family bucket + style overlap the swatches use. Additive: the swatch
+  spectrum + its color-family links above are unchanged. dw_sku / hex / style come from
+  the product's REAL fields. (Steve "ship the CLIP dots" 2026-07-08) {%- endcomment -%}
+{%- assign _dw_sku = product.selected_or_first_available_variant.sku | default: product.variants.first.sku | remove: '-Sample' -%}
+{%- assign _dw_hex = product.metafields.custom.primary_color_hex.value | default: product.metafields.custom.color_hex.value | default: product.metafields.dwc.dominant_hex.value -%}
+{%- assign _dw_style = product.metafields.custom.style.value | default: product.metafields.global.Style.value | default: product.type -%}
+{%- if _dw_sku != blank -%}
+<div id="dw-similar" class="dw-similar"
+     data-dw-sku="{{ _dw_sku | escape }}"
+     data-hex="{{ _dw_hex | escape }}"
+     data-style="{{ _dw_style | escape }}"
+     data-endpoint="https://photo.designerwallcoverings.com/apps/similar">
+  <h3 class="dw-similar__h">More Wallcoverings Like This</h3>
+  <div class="dw-similar__grid" aria-live="polite"></div>
+</div>
+<script>
+(function(){
+  var root=document.getElementById('dw-similar'); if(!root) return;
+  var sku=(root.dataset.dwSku||'').trim().replace(/-Sample$/i,'');  // base SKU keys the CLIP index; the Sample variant SKU (usually first-available) has no embedding
+  if(!sku){ root.style.display='none'; return; }
+  var ep=root.dataset.endpoint||'https://photo.designerwallcoverings.com/apps/similar';
+  fetch(ep,{method:'POST',mode:'cors',headers:{'Content-Type':'application/json'},
+    body:JSON.stringify({dw_sku:sku, hex:root.dataset.hex||'', style:root.dataset.style||'', k:8})})
+   .then(function(r){return r.ok?r.json():{results:[]};})
+   .then(function(d){
+     var g=root.querySelector('.dw-similar__grid');
+     if(!d.results||!d.results.length){ root.style.display='none'; return; }
+     d.results.forEach(function(p){
+       var a=document.createElement('a'); a.className='dw-similar__card'; a.rel='nofollow';
+       // real PDP link when we have a storefront handle; else fall back to a SKU search (never a name-search)
+       a.href = p.handle ? ('/products/'+encodeURIComponent(p.handle))
+                         : ('/search?q='+encodeURIComponent(p.dw_sku||'')+'&type=product');
+       var img=document.createElement('img'); img.loading='lazy'; img.src=p.image||''; img.alt=p.pattern||'';
+       var cap=document.createElement('span'); cap.className='dw-similar__cap'; cap.textContent=p.pattern||'';
+       a.appendChild(img); a.appendChild(cap); g.appendChild(a);
+     });
+   }).catch(function(){ root.style.display='none'; });
+})();
+</script>
+<style>
+/* Steve 2026-07-28: relocated OUT of the left gallery column to span the full page width.
+   DTD design-panel verdict A (front-page-steward + ui-ux-designer): clear:both makes the
+   full-width band collision-proof against the two-column block (specs) even if the theme
+   floats its columns — the strip always drops fully below both columns. */
+.dw-similar{clear:both;margin:34px auto 10px;max-width:1200px;width:100%;text-align:center;padding:0 20px;box-sizing:border-box}
+.dw-similar__h{font-family:Lora,serif;font-size:17px;font-weight:500;color:#3D4246;letter-spacing:-0.01em;margin:0 0 16px}
+.dw-similar__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:16px}
+@media(min-width:1000px){.dw-similar__grid{grid-template-columns:repeat(8,1fr)}}
+.dw-similar__card{display:block;text-decoration:none;color:inherit}
+.dw-similar__card img{width:100%;aspect-ratio:1;object-fit:cover;border:1px solid #e5e5e5;border-radius:3px}
+.dw-similar__cap{display:block;font-family:Lora,serif;font-size:11px;color:#3D4246;margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:capitalize}
+.dw-similar:empty{display:none}
+</style>
+{%- endif -%}
+
   {%- comment -%} Design Coordinate feature removed from the PDP (Steve 2026-07-28, DTD: "remove feature entirely"). {%- endcomment -%}
 
   <div
diff --git a/shopify/theme-LIVE-pull-20260728-colorbar/snippets/color-palette.liquid b/shopify/theme-LIVE-pull-20260728-colorbar/snippets/color-palette.liquid
index 2abc2458..ca731963 100644
--- a/shopify/theme-LIVE-pull-20260728-colorbar/snippets/color-palette.liquid
+++ b/shopify/theme-LIVE-pull-20260728-colorbar/snippets/color-palette.liquid
@@ -623,55 +623,4 @@
 })();
 </script>
 
-{%- comment -%} CLIP "More like this" — PDP color-dot CLIP visual-similarity row.
-  Calls the SAME-BEHAVIOR public proxy /apps/similar (dwphoto → loopback CLIP :9914),
-  which returns the visually-nearest patterns to THIS product, softly re-ranked by the
-  same hex→color-family bucket + style overlap the swatches use. Additive: the swatch
-  spectrum + its color-family links above are unchanged. dw_sku / hex / style come from
-  the product's REAL fields. (Steve "ship the CLIP dots" 2026-07-08) {%- endcomment -%}
-{%- assign _dw_sku = product.selected_or_first_available_variant.sku | default: product.variants.first.sku | remove: '-Sample' -%}
-{%- assign _dw_hex = product.metafields.custom.primary_color_hex.value | default: product.metafields.custom.color_hex.value | default: product.metafields.dwc.dominant_hex.value -%}
-{%- assign _dw_style = product.metafields.custom.style.value | default: product.metafields.global.Style.value | default: product.type -%}
-{%- if _dw_sku != blank -%}
-<div id="dw-similar" class="dw-similar"
-     data-dw-sku="{{ _dw_sku | escape }}"
-     data-hex="{{ _dw_hex | escape }}"
-     data-style="{{ _dw_style | escape }}"
-     data-endpoint="https://photo.designerwallcoverings.com/apps/similar">
-  <h3 class="dw-similar__h">More Wallcoverings Like This</h3>
-  <div class="dw-similar__grid" aria-live="polite"></div>
-</div>
-<script>
-(function(){
-  var root=document.getElementById('dw-similar'); if(!root) return;
-  var sku=(root.dataset.dwSku||'').trim().replace(/-Sample$/i,'');  // base SKU keys the CLIP index; the Sample variant SKU (usually first-available) has no embedding
-  if(!sku){ root.style.display='none'; return; }
-  var ep=root.dataset.endpoint||'https://photo.designerwallcoverings.com/apps/similar';
-  fetch(ep,{method:'POST',mode:'cors',headers:{'Content-Type':'application/json'},
-    body:JSON.stringify({dw_sku:sku, hex:root.dataset.hex||'', style:root.dataset.style||'', k:8})})
-   .then(function(r){return r.ok?r.json():{results:[]};})
-   .then(function(d){
-     var g=root.querySelector('.dw-similar__grid');
-     if(!d.results||!d.results.length){ root.style.display='none'; return; }
-     d.results.forEach(function(p){
-       var a=document.createElement('a'); a.className='dw-similar__card'; a.rel='nofollow';
-       // real PDP link when we have a storefront handle; else fall back to a SKU search (never a name-search)
-       a.href = p.handle ? ('/products/'+encodeURIComponent(p.handle))
-                         : ('/search?q='+encodeURIComponent(p.dw_sku||'')+'&type=product');
-       var img=document.createElement('img'); img.loading='lazy'; img.src=p.image||''; img.alt=p.pattern||'';
-       var cap=document.createElement('span'); cap.className='dw-similar__cap'; cap.textContent=p.pattern||'';
-       a.appendChild(img); a.appendChild(cap); g.appendChild(a);
-     });
-   }).catch(function(){ root.style.display='none'; });
-})();
-</script>
-<style>
-.dw-similar{margin:20px auto 8px;max-width:660px;text-align:center}
-.dw-similar__h{font-family:Lora,serif;font-size:15px;font-weight:500;color:#3D4246;letter-spacing:-0.01em;margin:0 0 12px}
-.dw-similar__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
-.dw-similar__card{display:block;text-decoration:none;color:inherit}
-.dw-similar__card img{width:100%;aspect-ratio:1;object-fit:cover;border:1px solid #e5e5e5;border-radius:3px}
-.dw-similar__cap{display:block;font-family:Lora,serif;font-size:11px;color:#3D4246;margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:capitalize}
-.dw-similar:empty{display:none}
-</style>
-{%- endif -%}
+{%- comment -%} "More Wallcoverings Like This" (CLIP row) MOVED to sections/product.liquid so it spans the full page width, below the two-column product block (Steve 2026-07-28). {%- endcomment -%}

← 58ca2dbb auto-save: 2026-07-28T11:00:01 (7 files) — shopify/scripts/c  ·  back to Designer Wallcoverings  ·  auto-save: 2026-07-28T11:30:09 (1 files) — shopify/scripts/d 863c29dd →