← back to Dw Material Reclassify
collection.material.liquid
119 lines
{% comment %}
Native (non-Boost) collection template for the Material smart collections.
Renders straight from Shopify — no Boost-index dependency, so material pages
populate instantly. Left rail = Material selector (the 13 material collections)
+ Shopify NATIVE storefront filters (collection.filters: Color/Style/Brand/Price
etc.) as COLLAPSED panels, server-side + paginated. Image-only cards + hover
reveal (name + sellable-variant SKU). Assigned via template_suffix="material".
{% 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 210px;}
.dw-mat-rail h1{font-size:21px;font-weight:600;margin:0 0 2px;color:#1a1a1a;}
.dw-mat-rail .cnt{font-size:12px;color:#8a8278;margin:0 0 18px;}
.dw-facet{border-bottom:1px solid #e6e2da;padding:11px 0;}
.dw-facet>summary{list-style:none;cursor:pointer;font-size:12px;font-weight:700;
letter-spacing:.06em;text-transform:uppercase;color:#1a1a1a;display:flex;justify-content:space-between;align-items:center;}
.dw-facet>summary::-webkit-details-marker{display:none;}
.dw-facet>summary::after{content:"+";color:#8a8278;font-weight:400;}
.dw-facet[open]>summary::after{content:"\2013";}
.dw-facet ul{list-style:none;margin:10px 0 2px;padding:0;max-height:230px;overflow:auto;}
.dw-facet li{margin:0 0 6px;}
.dw-facet a{font-size:13px;color:#4a4640;text-decoration:none;display:flex;justify-content:space-between;gap:8px;}
.dw-facet a:hover{color:#8b7355;}
.dw-facet a.on{color:#8b7355;font-weight:700;}
.dw-facet a .c{color:#b3aa9c;font-size:11px;}
.dw-clear{display:inline-block;margin:10px 0 4px;font-size:11px;color:#8b7355;text-decoration:underline;}
.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:760px){.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>
<details class="dw-facet">
<summary>Material</summary>
<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>
</details>
{% comment %} Native Shopify storefront filters (Color/Style/Brand/Price…) — collapsed. {% endcomment %}
{% for filter in collection.filters %}
<details class="dw-facet">
<summary>{{ filter.label }}</summary>
{% case filter.type %}
{% when 'list' %}
<ul>
{% for value in filter.values %}
{% if value.count > 0 or value.active %}
<li><a href="{{ value.url_to_add }}" class="{% if value.active %}on{% endif %}">
<span>{{ value.label }}</span><span class="c">{{ value.count }}</span></a></li>
{% endif %}
{% endfor %}
</ul>
{% when 'price_range' %}
<ul>
<li style="font-size:12px;color:#8a8278;">${{ filter.min_value.value | default: 0 | money_without_currency }} – ${{ filter.max_value.value | default: filter.range_max | money_without_currency }}</li>
{% assign step = filter.range_max | divided_by: 4 %}
{% for i in (1..4) %}
{% assign hi = step | times: i %}
<li><a href="{{ collection.url }}?filter.v.price.lte={{ hi }}">Under ${{ hi | money_without_currency }}</a></li>
{% endfor %}
</ul>
{% endcase %}
</details>
{% endfor %}
{% if collection.current_type or collection.current_vendor or current_tags.size > 0 %}
<a class="dw-clear" href="{{ collection.url }}">Clear filters</a>
{% endif %}
<a class="dw-clear" href="/collections/new-arrivals?pf_t_product_type=Wallcovering">← All New Arrivals</a>
</aside>
<div class="dw-mat-grid">
{% for product in collection.products %}
{%- if product.featured_image == blank -%}{%- continue -%}{%- endif -%}
{%- 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 }}">
<img src="{{ product.featured_image | image_url: width: 420 }}" alt="{{ product.title | escape }}" loading="lazy" width="420" height="420">
<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 match these filters.</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 %}