[object Object]

← back to Designer Wallcoverings

Restore grid density slider + add product descriptions to collection cards

f68f5a7744e04b8d87a5f9bf12d4af06bcb2bbbb · 2026-06-22 14:02:02 -0700 · Steve Abrams

- theme.liquid: load dw-grid-control.js on collection pages (was orphaned asset)
- dw-grid-control.js: add dw-gc-dense class toggle for CSS-driven description hide
- product-list-item.liquid: render description (120-char strip_html truncate)
- custom.css: style .product-list-item-description, hide when .dw-gc-dense

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Files touched

Diff

commit f68f5a7744e04b8d87a5f9bf12d4af06bcb2bbbb
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Mon Jun 22 14:02:02 2026 -0700

    Restore grid density slider + add product descriptions to collection cards
    
    - theme.liquid: load dw-grid-control.js on collection pages (was orphaned asset)
    - dw-grid-control.js: add dw-gc-dense class toggle for CSS-driven description hide
    - product-list-item.liquid: render description (120-char strip_html truncate)
    - custom.css: style .product-list-item-description, hide when .dw-gc-dense
    
    Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 shopify/_cwGRID/assets/custom.css                 | 16 ++++++++++++++++
 shopify/_cwGRID/assets/dw-grid-control.js         |  6 ++++++
 shopify/_cwGRID/layout/theme.liquid               |  4 ++++
 shopify/_cwGRID/snippets/product-list-item.liquid |  3 +++
 4 files changed, 29 insertions(+)

diff --git a/shopify/_cwGRID/assets/custom.css b/shopify/_cwGRID/assets/custom.css
index 9125f6b0..710ab4ca 100644
--- a/shopify/_cwGRID/assets/custom.css
+++ b/shopify/_cwGRID/assets/custom.css
@@ -1318,3 +1318,19 @@ input.add-to-cart:hover,
   opacity: 1 !important;
   visibility: visible !important;
 }
+
+/* === Product grid card descriptions === */
+.product-list-item-description {
+  font-size: 12px;
+  line-height: 1.45;
+  color: #666;
+  margin: 3px 0 6px;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+/* Hide description when grid is dense (> 4 cols via dw-grid-control) */
+.dw-gc-dense .product-list-item-description {
+  display: none;
+}
diff --git a/shopify/_cwGRID/assets/dw-grid-control.js b/shopify/_cwGRID/assets/dw-grid-control.js
index f053937f..54d68345 100644
--- a/shopify/_cwGRID/assets/dw-grid-control.js
+++ b/shopify/_cwGRID/assets/dw-grid-control.js
@@ -47,6 +47,12 @@
     container.style.gap = '4px';
     var imgWidth = container.offsetWidth / cols;
     container.style.paddingRight = imgWidth + 'px';
+    // Dense-mode class: hides descriptions via CSS when > 4 cols
+    if (cols > 4) {
+      container.classList.add('dw-gc-dense');
+    } else {
+      container.classList.remove('dw-gc-dense');
+    }
     var ch = container.children;
     for (var i = 0; i < ch.length; i++) {
       ch[i].style.width = '100%';
diff --git a/shopify/_cwGRID/layout/theme.liquid b/shopify/_cwGRID/layout/theme.liquid
index 2653bacb..d900399f 100644
--- a/shopify/_cwGRID/layout/theme.liquid
+++ b/shopify/_cwGRID/layout/theme.liquid
@@ -890,5 +890,9 @@
 <script src="{{ 'dw-color-wheel.js' | asset_url }}" defer></script>
 {%- comment -%} DW Phillip-Jeffries browse hide (stopgap) {%- endcomment -%}
 <script src="{{ 'dw-pj-hide.js' | asset_url }}" defer></script>
+{%- comment -%} DW Grid density slider — collection pages only {%- endcomment -%}
+{%- if template contains 'collection' -%}
+<script src="{{ 'dw-grid-control.js' | asset_url }}" defer></script>
+{%- endif -%}
 </body>
 </html>
\ No newline at end of file
diff --git a/shopify/_cwGRID/snippets/product-list-item.liquid b/shopify/_cwGRID/snippets/product-list-item.liquid
index 9ab01289..0f8ba1c0 100644
--- a/shopify/_cwGRID/snippets/product-list-item.liquid
+++ b/shopify/_cwGRID/snippets/product-list-item.liquid
@@ -120,6 +120,9 @@
       <p class="product-list-item-vendor">{{ item.vendor | link_to_vendor }}</p>
     {% endif %}
     <h2 class="product-list-item-title"><a href="{{ item.url | within: collection }}">{{ item.title }}</a></h2>
+    {%- if item.description != blank -%}
+      <p class="product-list-item-description">{{ item.description | strip_html | truncate: 120 }}</p>
+    {%- endif -%}
     <p class="product-list-item-price">
       {% if item.price_varies %}
         {% if item.price_varies %}{{ 'products.product.from' | t }}{% endif %}

← 2edc5f6e Add dry-run go-live push script for MOQ section (backup + ro  ·  back to Designer Wallcoverings  ·  MOQ theme fix: exempt Sample variants (force qty 1 when Samp 09145719 →