← back to Dw Material Reclassify
Material LIVE: native (non-Boost) collection template renders material pages instantly (grasscloth 199 designs verified)
8770d2a34dbb9a2c1bbc1d7910a6529ec1085cbc · 2026-07-22 12:21:04 -0700 · Steve
Files touched
A collection.material.liquid
Diff
commit 8770d2a34dbb9a2c1bbc1d7910a6529ec1085cbc
Author: Steve <steve@designerwallcoverings.com>
Date: Wed Jul 22 12:21:04 2026 -0700
Material LIVE: native (non-Boost) collection template renders material pages instantly (grasscloth 199 designs verified)
---
collection.material.liquid | 78 ++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 78 insertions(+)
diff --git a/collection.material.liquid b/collection.material.liquid
new file mode 100644
index 0000000..f21d8eb
--- /dev/null
+++ b/collection.material.liquid
@@ -0,0 +1,78 @@
+{% comment %}
+ Native (non-Boost) collection template for the Material smart collections.
+ Renders straight from Shopify's collection data — ZERO Boost-index dependency,
+ so material collection pages populate instantly. Image-only cards + hover-reveal
+ of pattern name + sellable-variant DW SKU (mirrors dw-card-hover v6 look).
+ Assigned via template_suffix="material" on the material-* collections.
+{% endcomment %}
+<style>
+ .dw-mat-page{max-width:1500px;margin:0 auto;padding:26px 18px;display:flex;gap:30px;
+ font-family:-apple-system,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
+ .dw-mat-rail{flex:0 0 190px;}
+ .dw-mat-rail h1{font-size:21px;font-weight:600;margin:0 0 3px;color:#1a1a1a;letter-spacing:.01em;}
+ .dw-mat-rail .cnt{font-size:12px;color:#8a8278;margin:0 0 20px;}
+ .dw-mat-rail h3{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin:0 0 10px;color:#1a1a1a;}
+ .dw-mat-rail ul{list-style:none;margin:0;padding:0;}
+ .dw-mat-rail li{margin:0 0 7px;}
+ .dw-mat-rail a{font-size:13px;color:#4a4640;text-decoration:none;transition:color .15s;}
+ .dw-mat-rail a:hover,.dw-mat-rail a.on{color:#8b7355;font-weight:700;}
+ .dw-mat-back{display:block;margin:18px 0 0;font-size:12px;color:#8a8278;text-decoration:none;}
+ .dw-mat-grid{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;align-content:start;}
+ .dw-mat-card{position:relative;display:block;overflow:hidden;text-decoration:none;background:#f3f0ea;}
+ .dw-mat-card img{width:100%;height:auto;display:block;aspect-ratio:1/1;object-fit:cover;}
+ .dw-mat-cap{position:absolute;left:0;right:0;bottom:0;padding:14px 10px 9px;opacity:0;transition:opacity .16s;
+ background:linear-gradient(to top,rgba(0,0,0,.62) 0%,rgba(0,0,0,.30) 55%,rgba(0,0,0,0) 100%);
+ color:#fff;font-size:12px;font-weight:600;line-height:1.2;text-align:center;
+ text-shadow:0 1px 2px rgba(0,0,0,.5);pointer-events:none;}
+ .dw-mat-card:hover .dw-mat-cap,.dw-mat-card:focus-within .dw-mat-cap{opacity:1;}
+ .dw-mat-sku{display:block;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#e8e2d8;margin-top:2px;}
+ @media (hover:none){.dw-mat-cap{opacity:1;}}
+ .dw-mat-pager{grid-column:1/-1;text-align:center;padding:26px 0;}
+ .dw-mat-pager a,.dw-mat-pager span{padding:6px 11px;font-size:13px;color:#4a4640;text-decoration:none;}
+ .dw-mat-pager span[aria-current]{font-weight:700;color:#8b7355;}
+ @media (max-width:700px){.dw-mat-page{flex-direction:column;gap:16px;}.dw-mat-rail{flex:none;}}
+</style>
+{% assign mats = "material-grasscloth|Grasscloth,material-natural-fiber|Natural Fiber,material-paperweave|Paperweave,material-cork|Cork,material-silk|Silk,material-linen|Linen,material-non-woven|Non-Woven,material-vinyl-type-ii|Vinyl / Type II,material-metallic-foil|Metallic / Foil,material-glass-bead|Glass Bead,material-flock-velvet|Flock / Velvet,material-leather|Leather,material-wood-veneer|Wood Veneer" | split: "," %}
+{% paginate collection.products by 48 %}
+<div class="dw-mat-page">
+ <aside class="dw-mat-rail">
+ <h1>{{ collection.title | remove: " Wallcoverings" }}</h1>
+ <p class="cnt">{{ collection.products_count }} designs</p>
+ <h3>Material</h3>
+ <ul>
+ {% for m in mats %}
+ {% assign parts = m | split: "|" %}
+ <li><a href="/collections/{{ parts[0] }}"{% if collection.handle == parts[0] %} class="on"{% endif %}>{{ parts[1] }}</a></li>
+ {% endfor %}
+ </ul>
+ <a class="dw-mat-back" href="/collections/new-arrivals?pf_t_product_type=Wallcovering">← All New Arrivals</a>
+ </aside>
+ <div class="dw-mat-grid">
+ {% for product in collection.products %}
+ {%- assign sellsku = '' -%}
+ {%- for v in product.variants -%}
+ {%- if v.title != 'Sample' and sellsku == '' -%}{%- assign sellsku = v.sku -%}{%- endif -%}
+ {%- endfor -%}
+ {%- if sellsku == '' and product.variants.first -%}{%- assign sellsku = product.variants.first.sku -%}{%- endif -%}
+ <a class="dw-mat-card" href="{{ product.url }}">
+ {% if product.featured_image %}<img src="{{ product.featured_image | image_url: width: 420 }}" alt="{{ product.title | escape }}" loading="lazy" width="420" height="420">{% endif %}
+ <div class="dw-mat-cap">{{ product.title | split: '|' | first | split: ',' | first | strip }}
+ {% if sellsku != '' %}<span class="dw-mat-sku">{{ sellsku }}</span>{% endif %}
+ </div>
+ </a>
+ {% else %}
+ <p style="grid-column:1/-1;color:#8a8278;">No products in this material yet.</p>
+ {% endfor %}
+ {% if paginate.pages > 1 %}
+ <div class="dw-mat-pager">
+ {% if paginate.previous %}<a href="{{ paginate.previous.url }}">← Prev</a>{% endif %}
+ {% for part in paginate.parts %}
+ {% if part.is_link %}<a href="{{ part.url }}">{{ part.title }}</a>
+ {% else %}<span{% if part.title == paginate.current_page %} aria-current="page"{% endif %}>{{ part.title }}</span>{% endif %}
+ {% endfor %}
+ {% if paginate.next %}<a href="{{ paginate.next.url }}">Next →</a>{% endif %}
+ </div>
+ {% endif %}
+ </div>
+</div>
+{% endpaginate %}
← 2bc0b1c Material go-live: 13 smart collections + left-rail Material
·
back to Dw Material Reclassify
·
Material template: skip image-less products in the grid b25bea3 →