[object Object]

← back to Dw Theme Hamburger

pdp: move 'More Wallcoverings Like This' to page bottom + Recently Viewed under it as 2 rows of 3

9e5f2273aa4e56b96a18efd336118850a6202682 · 2026-07-13 14:49:58 -0700 · Steve Abrams

- extract #dw-similar CLIP row from color-palette.liquid into snippets/more-wallcoverings-like-this.liquid
- render it at the bottom of sections/product.liquid, directly above Recently Viewed
- recently-viewed grid: repeat(3,1fr), capped at 6 items (2 rows of 3)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Files touched

Diff

commit 9e5f2273aa4e56b96a18efd336118850a6202682
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Mon Jul 13 14:49:58 2026 -0700

    pdp: move 'More Wallcoverings Like This' to page bottom + Recently Viewed under it as 2 rows of 3
    
    - extract #dw-similar CLIP row from color-palette.liquid into snippets/more-wallcoverings-like-this.liquid
    - render it at the bottom of sections/product.liquid, directly above Recently Viewed
    - recently-viewed grid: repeat(3,1fr), capped at 6 items (2 rows of 3)
    
    Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 sections/product.liquid                      |  7 +++-
 snippets/color-palette.liquid                | 55 ++--------------------------
 snippets/more-wallcoverings-like-this.liquid | 54 +++++++++++++++++++++++++++
 snippets/recently-viewed.liquid              |  4 +-
 4 files changed, 65 insertions(+), 55 deletions(-)

diff --git a/sections/product.liquid b/sections/product.liquid
index ed86f01..3b6b5a0 100644
--- a/sections/product.liquid
+++ b/sections/product.liquid
@@ -705,7 +705,12 @@
   </div>
 </div>
 
-{% comment %} Recently Viewed Products — tracks current product + shows carousel {% endcomment %}
+{% comment %} More Wallcoverings Like This — relocated 2026-07-13 from the palette
+   column to the PDP bottom, directly above Recently Viewed (Steve's spec). {% endcomment %}
+{% render 'more-wallcoverings-like-this' %}
+
+{% comment %} Recently Viewed Products — tracks current product; sits UNDER
+   "More Wallcoverings Like This" at the very bottom (Steve 2026-07-13). {% endcomment %}
 {% if settings.dw_enable_recently_viewed %}
 
   {% render 'recently-viewed' %}
diff --git a/snippets/color-palette.liquid b/snippets/color-palette.liquid
index 8ee04b1..81e04fa 100644
--- a/snippets/color-palette.liquid
+++ b/snippets/color-palette.liquid
@@ -678,55 +678,6 @@
 })();
 </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" (the #dw-similar CLIP row) moved 2026-07-13
+  out of the palette column to the PDP bottom — now rendered by sections/product.liquid
+  via {% render 'more-wallcoverings-like-this' %}, directly above Recently Viewed. {%- endcomment -%}
diff --git a/snippets/more-wallcoverings-like-this.liquid b/snippets/more-wallcoverings-like-this.liquid
new file mode 100644
index 0000000..c5bbfb1
--- /dev/null
+++ b/snippets/more-wallcoverings-like-this.liquid
@@ -0,0 +1,54 @@
+{%- 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)
+  Relocated 2026-07-13 out of color-palette.liquid to the PDP bottom, directly above
+  Recently Viewed (Steve: "recently viewed to the bottom under More Wallcoverings Like This"). {%- 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 -%}
diff --git a/snippets/recently-viewed.liquid b/snippets/recently-viewed.liquid
index d40cd44..23d0d66 100644
--- a/snippets/recently-viewed.liquid
+++ b/snippets/recently-viewed.liquid
@@ -13,7 +13,7 @@
 >
   <h2 style="font-family:-apple-system,system-ui,sans-serif;font-size:22px;font-weight:600;text-align:center;margin:0 0 8px;color:#1a1a1a;letter-spacing:0.01em;">Recently Viewed</h2>
   <p style="text-align:center;color:#888;font-size:13px;margin:0 0 28px;">Products you've browsed</p>
-  <div id="dw-rv-grid" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px;"></div>
+  <div id="dw-rv-grid" style="display:grid;grid-template-columns:repeat(3,1fr);gap:20px;"></div>
 </div>
 
 <style>
@@ -105,7 +105,7 @@
   var grid = document.getElementById('dw-rv-grid');
   if (!container || !grid) return;
 
-  var maxShow = parseInt(container.dataset.maxProducts) || 8;
+  var maxShow = 6; // 2 rows of 3 (Steve 2026-07-13) — fixed at 6 regardless of the max_products setting
   var currentHandle = container.dataset.currentHandle || '';
 
   // === TRACK current product ===

← 0397597 hide wordmark inside drawer clone (overflow + close-X crowdi  ·  back to Dw Theme Hamburger  ·  header: person/cart icons, camera right of search, phone tel 891c82c →