← back to Dw Theme Frontpage Cta
TK-10345 permanent cure: self-healing templates for collections/styles/commercial/material (live collection imagery)
e191df5ea2e84b981eae88f31e9ab2ef7444d971 · 2026-08-07 10:26:33 -0700 · Steve Abrams
Files touched
A templates/page.collections.liquidA templates/page.commercial.liquidA templates/page.material.liquidA templates/page.styles.liquid
Diff
commit e191df5ea2e84b981eae88f31e9ab2ef7444d971
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Fri Aug 7 10:26:33 2026 -0700
TK-10345 permanent cure: self-healing templates for collections/styles/commercial/material (live collection imagery)
---
templates/page.collections.liquid | 67 +++++++++++++++++++++++++++++++++++++++
templates/page.commercial.liquid | 67 +++++++++++++++++++++++++++++++++++++++
templates/page.material.liquid | 67 +++++++++++++++++++++++++++++++++++++++
templates/page.styles.liquid | 67 +++++++++++++++++++++++++++++++++++++++
4 files changed, 268 insertions(+)
diff --git a/templates/page.collections.liquid b/templates/page.collections.liquid
new file mode 100644
index 0000000..df5319c
--- /dev/null
+++ b/templates/page.collections.liquid
@@ -0,0 +1,67 @@
+{% comment %}
+ page.brands.liquid — SELF-HEALING "Shop by Brand" directory.
+ Each tile pulls its background image LIVE from the linked collection at render
+ time (collection.image -> first product image), so images can never rot when a
+ CDN file is purged. Brands with no collection render as a clean text tile (never
+ a broken image). Assign a Page to the "brands" template in Shopify admin.
+ Scoped under #dwb-root so it can never collide with theme CSS.
+{% endcomment %}
+<div id="dwb-root">
+<style>
+ #dwb-root{max-width:1220px;margin:0 auto;padding:8px 0 48px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;color:#1a1a1a}
+ #dwb-root *{box-sizing:border-box}
+ #dwb-root .dwb-head{text-align:center;padding:22px 16px 10px}
+ #dwb-root .dwb-head h1{margin:0;font-weight:300;letter-spacing:.18em;text-transform:uppercase;font-size:22px}
+ #dwb-root .dwb-head p{margin:6px 0 0;color:#7a7266;font-size:13px;letter-spacing:.04em}
+ #dwb-root .dwb-tools{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;padding:8px 16px 18px}
+ #dwb-root .dwb-search{width:min(420px,90%);height:40px;border:1px solid #e6e0d6;border-radius:999px;padding:0 18px;font-size:14px;outline:none}
+ #dwb-root .dwb-search:focus{border-color:#b9892f}
+ #dwb-root .dwb-range{display:flex;align-items:center;gap:8px;color:#7a7266;font-size:12px}
+ #dwb-root .dwb-grid{--cols:5;display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:16px;padding:0 16px}
+ @media(max-width:900px){#dwb-root .dwb-grid{--cols:3}}
+ @media(max-width:560px){#dwb-root .dwb-grid{--cols:2}}
+ #dwb-root .dwb-card{position:relative;aspect-ratio:4/3;border:1px solid #e6e0d6;border-radius:12px;overflow:hidden;
+ text-decoration:none;color:inherit;background:#f5f2ec;display:flex;align-items:flex-end;transition:box-shadow .15s,transform .15s}
+ #dwb-root .dwb-card:hover{box-shadow:0 12px 30px rgba(0,0,0,.12);transform:translateY(-2px)}
+ #dwb-root .dwb-bg{position:absolute;inset:0;z-index:0}
+ #dwb-root .dwb-bg img{width:100%;height:100%;object-fit:cover;display:block}
+ #dwb-root .dwb-card::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.55))}
+ #dwb-root .dwb-name{position:relative;z-index:2;width:100%;padding:12px 14px;color:#fff;font-size:14px;font-weight:600;letter-spacing:.02em;text-shadow:0 1px 4px rgba(0,0,0,.4)}
+ #dwb-root .dwb-card.dwb-noimg{background:linear-gradient(135deg,#2a2724,#4a453d)}
+ #dwb-root .dwb-card.dwb-noimg::after{display:none}
+ #dwb-root .dwb-msg{grid-column:1/-1;text-align:center;color:#9a9276;padding:36px;font-size:14px}
+</style>
+<div class="dwb-head"><h1>Collections</h1><p>Explore our curated wallcovering & fabric collections.</p></div>
+<div class="dwb-tools">
+ <input class="dwb-search" id="dwbSearch" type="search" placeholder="Search…" aria-label="Search brands">
+ <span class="dwb-range">Size <input id="dwbRange" type="range" min="3" max="7" value="5" aria-label="Grid density"></span>
+</div>
+<div class="dwb-grid" id="dwbGrid">
+{% assign brands = "1940's Vintage::/collections/authentic-1940s-reproduction-vintage-wallcoverings~1950's Vintage::/collections/authentic-1950s-reproduction-vintage-wallcoverings~1960's Vintage::/collections/authentic-1960s-reproduction-vintage-wallcoverings~1970's Vintage::/collections/authentic-1970s-reproduction-vintage-wallcoverings~Abstract Vinyl::/collections/abstract-durable-vinyl~Acoustical::/collections/acoustical~Animal Print::/collections/animal-print-wallpaper~Animal Skin::/collections/animal-skin~Architectural::/collections/architectural-fabrics~Art Deco::/collections/decoglass-wallpaper~Art Deco Metallics::/collections/art-deco-metallics-1~Art Nouveau::/collections/art-nouveau-wallpaper~Arts and Crafts::/collections/arts-and-crafts-wallpaper~Baroque::/collections/baroque-wallpaper~Basket Weave::/collections/basketweave-paper~Beige & Cream Wallcovering Collection::/collections/beige-cream-wallpaper-collection~Bella Italiano::/collections/bella-italiano~Birds and Fowl::/collections/birds~Black Wallcovering Collection::/collections/black~Blue Green::/collections/turquoise~Blue Wallcovering Collection::/collections/blue-wallpaper-collection~Bohemian::/collections/bohemian-wallpaper~Botanicals & Florals Wallcovering Collections::/collections/botanicals-and-florals~Braid / Tape::/collections/braid-tape~Brown::/collections/brown-wallpaper-collection~Camel & Cognac::/collections/camel-cognac-1~Checks + Plaids::/collections/checks-plaids-and-stripes-1~Chenille::/collections/chenille-fabric~Chevron & Herringbone Wallcovering Collection::/collections/chevron-herringbone-wallpaper-collection~Children's Wallcovering Collections::/collections/kids-wallpaper~Chinoiserie Collection::/collections/chinoiserie-collection~Chinoiserie Murals::/collections/chinoiserie~Coastal & Nautical::/collections/coastal-nautical-1~Coastal Haven::/collections/coastal-haven~Commercial::/collections/commercial~Contemporary Style Wallcovering Collections::/collections/contemporary~Coral Wallcovering Collection::/collections/coral~Cork Wallcovering Collection::/collections/cork-wallpaper-collection~Damask::/collections/damasks-1~Dots and Circle::/collections/dots~Dragon Motifs::/collections/dragon-motifs~Drapery::/collections/drapery-fabrics~Durable::/collections/durable-w-c~Eden::/collections/eden~Embossed Texture::/collections/embossed~European::/collections/european-wallpapers~Fabric Trim::/collections/fabric-trim~Fantastic Frames::/collections/fantastic-frames~Farmhouse::/collections/farmhouse-wallpaper~Faux Animal Patterns::/collections/faux-animal-skin~Faux Grasscloth::/collections/faux-grasscloth-wallpaper-collection~Faux Leather - Vegan Upholstery Vinyl::/collections/upholstery-vinyl~Faux Leather Upholstery::/collections/faux-leather~Faux Silk + Linen::/collections/faux-silk~Flocked Velvet Wallcovering Collection::/collections/flocked-velvet-wallpaper-collection~Florals & Botanicals::/collections/florals-botanicals~French Country::/collections/french-country-wallpaper-collection~Fretwork Wallcovering::/collections/fretwork-wallpaper~Geometric Patterns::/collections/geometric-durable-vinyl~Geometric Wallcovering Collections::/collections/geometric~Glass Bead::/collections/glass-bead~Glitter + Sequins::/collections/glitter-wallpaper~Gold Wallcovering Collection::/collections/gold-wallpaper~Grasscloth & Natural Fiber::/collections/grasscloth-natural-fiber~Grasscloth Wallcovering::/collections/grasscloth-wallpaper-collection~Greek Key::/collections/greek-key-wallpaper~Green Wallcovering Collection::/collections/green-wallpaper-collection~Grey Wallcovering Collection::/collections/grey-wallcovering~Hand Made::/collections/hand-made-wallcoverings~Hollywood::/collections/hollywood-wallcovering-collection~Hollywood Hospitality::/collections/hollywood-wallpaper-commercial-wallpaper~Hollywood Sunset Vinyl Collection::/collections/hollywood-sunset-collection~Hollywood Type 2::/collections/hollywood-type-2-wallpaper-collection~Hospitality Resource::/collections/quick-ship-hospitality~Ikat::/collections/ikat-wallpaper~Indoor / Outdoor Performance::/collections/outdoor-fabric~Industrial Style::/collections/industrial~Japonisme::/collections/japonisme-wallpaper~Kismet::/collections/kismet~LA Walls Collection::/collections/lawalls-collection~Lattice & Trellis::/collections/lattice-and-trellis-patterns~LEED Walls::/collections/leed-walls~Living with Art::/collections/living-with-art~Lounge::/collections/lounge~Luxe Retreat::/collections/luxe-retreat~Madagascar Raffia::/collections/madagascar-cloth~Made in Italy Wallcovering::/collections/madeinitaly~Malibu::/collections/malibu-wallpaper~Malibu::/collections/malibu-walls-1~Maximalist::/collections/maximalist-wallpaper~Medallion::/collections/medallion-wallpaper~Mediterranean::/collections/mediterranean-wallpaper~Metallic::/collections/metallic-wallpaper-collection~Metallic Mylar::/collections/shiny-mylar-mirror~Mid Century Modern::/collections/mid-century-modern-1~Minimalist Chic::/collections/minimalist~Modern Hamptons::/collections/modern-hamptons-1~Modern Originals::/collections/modern-originals-1~Modern Wallcovering::/collections/modern-1~Moody & Dark::/collections/moody-dark~Murals::/collections/murals~Mylar::/collections/mylar-wallpaper~Natural Cork::/collections/cork~Natural Grasscloth::/collections/grasscloth~Neoclassical::/collections/neoclassical-wallpaper~Novelty::/collections/novelty~Ogee::/collections/ogee-wallpaper~Ombre::/collections/ombre~Orange Wallcovering Collections::/collections/orange~Original Vintage Wallcoverings::/collections/vintage-patterns-on-demand~Paintable Texture::/collections/paintable~Paisley::/collections/paisley-wallpaper~Paper Backed Cotton Walls::/collections/paper-backed-cotton-walls~Paperweave::/collections/fine-paper~Pattern Design Lab::/collections/pattern-design-lab-2~Peel & Stick::/collections/peel-stick~Pillows::/collections/finished-pillows~Pink Wallcovering Collection::/collections/pink-wallcovering-2~Plaid::/collections/plaid-fabric~Plum & Aubergine::/collections/plum-aubergine-1~Powder Room Statements::/collections/powder-room-statements-1~Primary Suite::/collections/primary-suite-1~Purple Wallcovering and Fabric Patterns::/collections/purple~Quatrefoil::/collections/quatrefoil-wallpaper~Red Wallcovering Collection::/collections/red-wallpaper-collection~Reflective::/collections/reflective~Regal Trellis and Lattice::/collections/regal-trellis-and-lattice~Renaissance::/collections/renaissance-wallpaper~Renaissance Metal Leaf::/collections/renaissance-metal-leaf~Residential::/collections/residential~Restoration::/collections/restoration-wallpaper~Retro Walls::/collections/retro-walls-1~Roses::/collections/roses-wallpaper~Rustic Charm::/collections/rustic-charm-wallpaper-collection~Sage & Olive::/collections/sage-olive-1~Scandinavian::/collections/scandinavian-wallpaper~Scenic::/collections/scenic-wallpaper~Scroll::/collections/scroll~Sequin::/collections/sequin-wallpapers~Shiny Mylar & 3d Foils::/collections/shiny-mylar-3d-foils~Slate & Charcoal::/collections/slate-charcoal-1~Steel Blue::/collections/steel-blue-1~String::/collections/string~Stripe Wallcovering Collections::/collections/stripe-collection-1~Stripes & Geometrics::/collections/stripes-geometrics~Study & Library::/collections/study-library-1~Suede::/collections/suede~Surface Stick::/collections/surface-stick~Sustainable & Eco::/collections/sustainable-eco~Terracotta & Clay::/collections/terracotta-clay-1~Texture Gallery::/collections/texture-gallery~Textured::/collections/textured-wallpaper~Textures & Solids::/collections/textures-solids~The Equestrian Wallcovering Collection::/collections/equestrian-collection~Throw Blanket::/collections/throw-blanket~Toile::/collections/toile-wallpaper~Traditional::/collections/traditional~Transitional::/collections/transitional-wallpaper~Trellis::/collections/trellis~Tropical Wallcovering Collections::/collections/tropical-prints~Type 2 Durable::/collections/type-2-durable~Upholstery::/collections/upholstery-fabrics~Vegan Leathers::/collections/vegan-leathers~Velvet Upholstery::/collections/velvet-upholstery~Victorian::/collections/victorian-wallpaper~Vine::/collections/vine-pattern-wallpaper~Vintage Reproductions::/collections/vintage~Warm Taupe::/collections/warm-taupe~Warm Whites & Ivory::/collections/warm-whites-ivory-1~Whimsical Traditional::/collections/whimsical-traditional~White Wallcovering Collection::/collections/white-wallpaper-collection~Yellow Wallcovering Collection::/collections/yellow-wallpaper-collection~Zeuxis Parrhasius Wallcovering Collection::/collections/zeuxis-parrhasius-wallpaper-collection~Novasuede::/collections/novasuede" | split: "~" %}
+{% for b in brands %}
+ {% assign parts = b | split: "::" %}
+ {% assign title = parts[0] %}
+ {% assign href = parts[1] %}
+ {% assign chandle = href | remove: "/collections/" %}
+ {% assign coll = collections[chandle] %}
+ {% assign img = coll.image %}
+ {% unless img %}{% assign img = coll.products.first.featured_image %}{% endunless %}
+ <a class="dwb-card{% unless img %} dwb-noimg{% endunless %}" href="{{ href }}" title="{{ title | escape }}" data-name="{{ title | downcase | escape }}">
+ {% if img %}<span class="dwb-bg"><img src="{{ img | image_url: width: 600 }}" alt="{{ title | escape }}" loading="lazy"></span>{% endif %}
+ <span class="dwb-name">{{ title }}</span>
+ </a>
+{% endfor %}
+</div>
+</div>
+<script>
+(function(){
+ var grid=document.getElementById('dwbGrid'),q=document.getElementById('dwbSearch'),r=document.getElementById('dwbRange');
+ var cards=[].slice.call(grid.querySelectorAll('.dwb-card'));
+ var KEY='dwb-cols';
+ function applyCols(v){grid.style.setProperty('--cols',v);try{localStorage.setItem(KEY,v);}catch(e){}}
+ try{var s=localStorage.getItem(KEY);if(s){r.value=s;applyCols(s);}}catch(e){}
+ r.addEventListener('input',function(){applyCols(this.value);});
+ q.addEventListener('input',function(){var t=this.value.trim().toLowerCase();
+ cards.forEach(function(c){c.style.display=!t||c.getAttribute('data-name').indexOf(t)>=0?'':'none';});});
+})();
+</script>
\ No newline at end of file
diff --git a/templates/page.commercial.liquid b/templates/page.commercial.liquid
new file mode 100644
index 0000000..b05c8e0
--- /dev/null
+++ b/templates/page.commercial.liquid
@@ -0,0 +1,67 @@
+{% comment %}
+ page.brands.liquid — SELF-HEALING "Shop by Brand" directory.
+ Each tile pulls its background image LIVE from the linked collection at render
+ time (collection.image -> first product image), so images can never rot when a
+ CDN file is purged. Brands with no collection render as a clean text tile (never
+ a broken image). Assign a Page to the "brands" template in Shopify admin.
+ Scoped under #dwb-root so it can never collide with theme CSS.
+{% endcomment %}
+<div id="dwb-root">
+<style>
+ #dwb-root{max-width:1220px;margin:0 auto;padding:8px 0 48px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;color:#1a1a1a}
+ #dwb-root *{box-sizing:border-box}
+ #dwb-root .dwb-head{text-align:center;padding:22px 16px 10px}
+ #dwb-root .dwb-head h1{margin:0;font-weight:300;letter-spacing:.18em;text-transform:uppercase;font-size:22px}
+ #dwb-root .dwb-head p{margin:6px 0 0;color:#7a7266;font-size:13px;letter-spacing:.04em}
+ #dwb-root .dwb-tools{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;padding:8px 16px 18px}
+ #dwb-root .dwb-search{width:min(420px,90%);height:40px;border:1px solid #e6e0d6;border-radius:999px;padding:0 18px;font-size:14px;outline:none}
+ #dwb-root .dwb-search:focus{border-color:#b9892f}
+ #dwb-root .dwb-range{display:flex;align-items:center;gap:8px;color:#7a7266;font-size:12px}
+ #dwb-root .dwb-grid{--cols:5;display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:16px;padding:0 16px}
+ @media(max-width:900px){#dwb-root .dwb-grid{--cols:3}}
+ @media(max-width:560px){#dwb-root .dwb-grid{--cols:2}}
+ #dwb-root .dwb-card{position:relative;aspect-ratio:4/3;border:1px solid #e6e0d6;border-radius:12px;overflow:hidden;
+ text-decoration:none;color:inherit;background:#f5f2ec;display:flex;align-items:flex-end;transition:box-shadow .15s,transform .15s}
+ #dwb-root .dwb-card:hover{box-shadow:0 12px 30px rgba(0,0,0,.12);transform:translateY(-2px)}
+ #dwb-root .dwb-bg{position:absolute;inset:0;z-index:0}
+ #dwb-root .dwb-bg img{width:100%;height:100%;object-fit:cover;display:block}
+ #dwb-root .dwb-card::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.55))}
+ #dwb-root .dwb-name{position:relative;z-index:2;width:100%;padding:12px 14px;color:#fff;font-size:14px;font-weight:600;letter-spacing:.02em;text-shadow:0 1px 4px rgba(0,0,0,.4)}
+ #dwb-root .dwb-card.dwb-noimg{background:linear-gradient(135deg,#2a2724,#4a453d)}
+ #dwb-root .dwb-card.dwb-noimg::after{display:none}
+ #dwb-root .dwb-msg{grid-column:1/-1;text-align:center;color:#9a9276;padding:36px;font-size:14px}
+</style>
+<div class="dwb-head"><h1>Commercial</h1><p>Contract-grade wallcoverings for every project.</p></div>
+<div class="dwb-tools">
+ <input class="dwb-search" id="dwbSearch" type="search" placeholder="Search…" aria-label="Search brands">
+ <span class="dwb-range">Size <input id="dwbRange" type="range" min="3" max="7" value="5" aria-label="Grid density"></span>
+</div>
+<div class="dwb-grid" id="dwbGrid">
+{% assign brands = "Abstract::/collections/abstract-durable-vinyl~Acoustical::/collections/acoustical~Animal::/collections/faux-animal-skin~Commercial Specialty::/collections/commercial-specialty~Contemporary::/collections/hollywood-wallpaper-commercial-wallpaper~Crypton Fabric::/collections/crypton~Durable Vinyl::/collections/phillipe-romano-vinyls~Embossed Texture::/collections/embossed~Faux Grasscloth::/collections/faux-grasscloth-wallpaper-collection~Faux Leather::/collections/faux-leather~Faux Silk + Linen::/collections/faux-silk~Faux Suede::/collections/suede-faux-suede-fabric~Flocked Velvet::/collections/flocked-velvet-wallpaper-collection~Geometric::/collections/geometric-durable-vinyl~Metal Leaf::/collections/renaissance-metal-leaf~Metallic::/collections/metallic-wallpaper-collection~Metallic Mylar::/collections/shiny-mylar-mirror~Metallic Vinyl::/collections/metallic-vinyl~Shiny Mylar::/collections/shiny-mylar-3d-foils~Traditional::/collections/traditional-durable-vinyl~Type 2 Durable Vinyl::/collections/type-2-wallpaper-collection" | split: "~" %}
+{% for b in brands %}
+ {% assign parts = b | split: "::" %}
+ {% assign title = parts[0] %}
+ {% assign href = parts[1] %}
+ {% assign chandle = href | remove: "/collections/" %}
+ {% assign coll = collections[chandle] %}
+ {% assign img = coll.image %}
+ {% unless img %}{% assign img = coll.products.first.featured_image %}{% endunless %}
+ <a class="dwb-card{% unless img %} dwb-noimg{% endunless %}" href="{{ href }}" title="{{ title | escape }}" data-name="{{ title | downcase | escape }}">
+ {% if img %}<span class="dwb-bg"><img src="{{ img | image_url: width: 600 }}" alt="{{ title | escape }}" loading="lazy"></span>{% endif %}
+ <span class="dwb-name">{{ title }}</span>
+ </a>
+{% endfor %}
+</div>
+</div>
+<script>
+(function(){
+ var grid=document.getElementById('dwbGrid'),q=document.getElementById('dwbSearch'),r=document.getElementById('dwbRange');
+ var cards=[].slice.call(grid.querySelectorAll('.dwb-card'));
+ var KEY='dwb-cols';
+ function applyCols(v){grid.style.setProperty('--cols',v);try{localStorage.setItem(KEY,v);}catch(e){}}
+ try{var s=localStorage.getItem(KEY);if(s){r.value=s;applyCols(s);}}catch(e){}
+ r.addEventListener('input',function(){applyCols(this.value);});
+ q.addEventListener('input',function(){var t=this.value.trim().toLowerCase();
+ cards.forEach(function(c){c.style.display=!t||c.getAttribute('data-name').indexOf(t)>=0?'':'none';});});
+})();
+</script>
\ No newline at end of file
diff --git a/templates/page.material.liquid b/templates/page.material.liquid
new file mode 100644
index 0000000..fec8296
--- /dev/null
+++ b/templates/page.material.liquid
@@ -0,0 +1,67 @@
+{% comment %}
+ page.brands.liquid — SELF-HEALING "Shop by Brand" directory.
+ Each tile pulls its background image LIVE from the linked collection at render
+ time (collection.image -> first product image), so images can never rot when a
+ CDN file is purged. Brands with no collection render as a clean text tile (never
+ a broken image). Assign a Page to the "brands" template in Shopify admin.
+ Scoped under #dwb-root so it can never collide with theme CSS.
+{% endcomment %}
+<div id="dwb-root">
+<style>
+ #dwb-root{max-width:1220px;margin:0 auto;padding:8px 0 48px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;color:#1a1a1a}
+ #dwb-root *{box-sizing:border-box}
+ #dwb-root .dwb-head{text-align:center;padding:22px 16px 10px}
+ #dwb-root .dwb-head h1{margin:0;font-weight:300;letter-spacing:.18em;text-transform:uppercase;font-size:22px}
+ #dwb-root .dwb-head p{margin:6px 0 0;color:#7a7266;font-size:13px;letter-spacing:.04em}
+ #dwb-root .dwb-tools{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;padding:8px 16px 18px}
+ #dwb-root .dwb-search{width:min(420px,90%);height:40px;border:1px solid #e6e0d6;border-radius:999px;padding:0 18px;font-size:14px;outline:none}
+ #dwb-root .dwb-search:focus{border-color:#b9892f}
+ #dwb-root .dwb-range{display:flex;align-items:center;gap:8px;color:#7a7266;font-size:12px}
+ #dwb-root .dwb-grid{--cols:5;display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:16px;padding:0 16px}
+ @media(max-width:900px){#dwb-root .dwb-grid{--cols:3}}
+ @media(max-width:560px){#dwb-root .dwb-grid{--cols:2}}
+ #dwb-root .dwb-card{position:relative;aspect-ratio:4/3;border:1px solid #e6e0d6;border-radius:12px;overflow:hidden;
+ text-decoration:none;color:inherit;background:#f5f2ec;display:flex;align-items:flex-end;transition:box-shadow .15s,transform .15s}
+ #dwb-root .dwb-card:hover{box-shadow:0 12px 30px rgba(0,0,0,.12);transform:translateY(-2px)}
+ #dwb-root .dwb-bg{position:absolute;inset:0;z-index:0}
+ #dwb-root .dwb-bg img{width:100%;height:100%;object-fit:cover;display:block}
+ #dwb-root .dwb-card::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.55))}
+ #dwb-root .dwb-name{position:relative;z-index:2;width:100%;padding:12px 14px;color:#fff;font-size:14px;font-weight:600;letter-spacing:.02em;text-shadow:0 1px 4px rgba(0,0,0,.4)}
+ #dwb-root .dwb-card.dwb-noimg{background:linear-gradient(135deg,#2a2724,#4a453d)}
+ #dwb-root .dwb-card.dwb-noimg::after{display:none}
+ #dwb-root .dwb-msg{grid-column:1/-1;text-align:center;color:#9a9276;padding:36px;font-size:14px}
+</style>
+<div class="dwb-head"><h1>Shop by Material</h1><p>Grasscloth, silk, cork, leather & more.</p></div>
+<div class="dwb-tools">
+ <input class="dwb-search" id="dwbSearch" type="search" placeholder="Search…" aria-label="Search brands">
+ <span class="dwb-range">Size <input id="dwbRange" type="range" min="3" max="7" value="5" aria-label="Grid density"></span>
+</div>
+<div class="dwb-grid" id="dwbGrid">
+{% assign brands = "Cork::/collections/cork-wallpaper-collection~Fabric-Backed::/collections/ultrasuede~Faux Leather::/collections/faux-leather~Faux Suede::/collections/suede~Flocked Velvet::/collections/flocked-velvet-wallpaper-collection~Foil::/collections/shiny-mylar-3d-foils~Glass Beads::/collections/glass-bead~Grasscloth::/collections/grasscloth-wallpaper-collection~Jute::/collections/madagascar-cloth~Linen::/collections/faux-silk~Metallic::/collections/metallic-wallpaper-collection~Mica::/collections/shiny-mylar-mirror~Mylar::/collections/mylar-wallpaper~Natural Fiber::/collections/grasscloth-natural-fiber~Non-Woven::/collections/type-2-durable~Paper::/collections/fine-paper~Paperweaves::/collections/bella-italiano~Silk::/collections/real-scala-silk~Sisal::/collections/thick-natural-sisal~Vinyl (Type II)::/collections/type-2-wallpaper-collection" | split: "~" %}
+{% for b in brands %}
+ {% assign parts = b | split: "::" %}
+ {% assign title = parts[0] %}
+ {% assign href = parts[1] %}
+ {% assign chandle = href | remove: "/collections/" %}
+ {% assign coll = collections[chandle] %}
+ {% assign img = coll.image %}
+ {% unless img %}{% assign img = coll.products.first.featured_image %}{% endunless %}
+ <a class="dwb-card{% unless img %} dwb-noimg{% endunless %}" href="{{ href }}" title="{{ title | escape }}" data-name="{{ title | downcase | escape }}">
+ {% if img %}<span class="dwb-bg"><img src="{{ img | image_url: width: 600 }}" alt="{{ title | escape }}" loading="lazy"></span>{% endif %}
+ <span class="dwb-name">{{ title }}</span>
+ </a>
+{% endfor %}
+</div>
+</div>
+<script>
+(function(){
+ var grid=document.getElementById('dwbGrid'),q=document.getElementById('dwbSearch'),r=document.getElementById('dwbRange');
+ var cards=[].slice.call(grid.querySelectorAll('.dwb-card'));
+ var KEY='dwb-cols';
+ function applyCols(v){grid.style.setProperty('--cols',v);try{localStorage.setItem(KEY,v);}catch(e){}}
+ try{var s=localStorage.getItem(KEY);if(s){r.value=s;applyCols(s);}}catch(e){}
+ r.addEventListener('input',function(){applyCols(this.value);});
+ q.addEventListener('input',function(){var t=this.value.trim().toLowerCase();
+ cards.forEach(function(c){c.style.display=!t||c.getAttribute('data-name').indexOf(t)>=0?'':'none';});});
+})();
+</script>
\ No newline at end of file
diff --git a/templates/page.styles.liquid b/templates/page.styles.liquid
new file mode 100644
index 0000000..b15c08d
--- /dev/null
+++ b/templates/page.styles.liquid
@@ -0,0 +1,67 @@
+{% comment %}
+ page.brands.liquid — SELF-HEALING "Shop by Brand" directory.
+ Each tile pulls its background image LIVE from the linked collection at render
+ time (collection.image -> first product image), so images can never rot when a
+ CDN file is purged. Brands with no collection render as a clean text tile (never
+ a broken image). Assign a Page to the "brands" template in Shopify admin.
+ Scoped under #dwb-root so it can never collide with theme CSS.
+{% endcomment %}
+<div id="dwb-root">
+<style>
+ #dwb-root{max-width:1220px;margin:0 auto;padding:8px 0 48px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;color:#1a1a1a}
+ #dwb-root *{box-sizing:border-box}
+ #dwb-root .dwb-head{text-align:center;padding:22px 16px 10px}
+ #dwb-root .dwb-head h1{margin:0;font-weight:300;letter-spacing:.18em;text-transform:uppercase;font-size:22px}
+ #dwb-root .dwb-head p{margin:6px 0 0;color:#7a7266;font-size:13px;letter-spacing:.04em}
+ #dwb-root .dwb-tools{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;padding:8px 16px 18px}
+ #dwb-root .dwb-search{width:min(420px,90%);height:40px;border:1px solid #e6e0d6;border-radius:999px;padding:0 18px;font-size:14px;outline:none}
+ #dwb-root .dwb-search:focus{border-color:#b9892f}
+ #dwb-root .dwb-range{display:flex;align-items:center;gap:8px;color:#7a7266;font-size:12px}
+ #dwb-root .dwb-grid{--cols:5;display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:16px;padding:0 16px}
+ @media(max-width:900px){#dwb-root .dwb-grid{--cols:3}}
+ @media(max-width:560px){#dwb-root .dwb-grid{--cols:2}}
+ #dwb-root .dwb-card{position:relative;aspect-ratio:4/3;border:1px solid #e6e0d6;border-radius:12px;overflow:hidden;
+ text-decoration:none;color:inherit;background:#f5f2ec;display:flex;align-items:flex-end;transition:box-shadow .15s,transform .15s}
+ #dwb-root .dwb-card:hover{box-shadow:0 12px 30px rgba(0,0,0,.12);transform:translateY(-2px)}
+ #dwb-root .dwb-bg{position:absolute;inset:0;z-index:0}
+ #dwb-root .dwb-bg img{width:100%;height:100%;object-fit:cover;display:block}
+ #dwb-root .dwb-card::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.55))}
+ #dwb-root .dwb-name{position:relative;z-index:2;width:100%;padding:12px 14px;color:#fff;font-size:14px;font-weight:600;letter-spacing:.02em;text-shadow:0 1px 4px rgba(0,0,0,.4)}
+ #dwb-root .dwb-card.dwb-noimg{background:linear-gradient(135deg,#2a2724,#4a453d)}
+ #dwb-root .dwb-card.dwb-noimg::after{display:none}
+ #dwb-root .dwb-msg{grid-column:1/-1;text-align:center;color:#9a9276;padding:36px;font-size:14px}
+</style>
+<div class="dwb-head"><h1>Shop by Style</h1><p>Browse by design style — from traditional to modern.</p></div>
+<div class="dwb-tools">
+ <input class="dwb-search" id="dwbSearch" type="search" placeholder="Search…" aria-label="Search brands">
+ <span class="dwb-range">Size <input id="dwbRange" type="range" min="3" max="7" value="5" aria-label="Grid density"></span>
+</div>
+<div class="dwb-grid" id="dwbGrid">
+{% assign brands = "Abstract::/collections/abstract-durable-vinyl~Acoustical::/collections/acoustical~Animal Skin::/collections/animal-skin~Animal Print::/collections/animal-print-wallpaper~Arabesque::/collections/ogee-wallpaper~Art Deco::/collections/decoglass-wallpaper~Art Nouveau::/collections/art-nouveau-wallpaper~Arts & Crafts::/collections/arts-and-crafts-wallpaper~Baroque::/collections/baroque-wallpaper~Bohemian::/collections/bohemian-wallpaper~Botanicals & Florals::/collections/botanicals-and-florals~Chevron::/collections/chevron-herringbone-wallpaper-collection~Children's::/collections/kids-wallpaper~Chinoiserie::/collections/chinoiserie~Coastal::/collections/coastal-nautical-1~Contemporary::/collections/contemporary~Cork::/collections/cork-wallpaper-collection~Crypton::/collections/crypton~Damask::/collections/damasks-1~Embossed::/collections/embossed~Farmhouse::/collections/farmhouse-wallpaper~Faux Glass Bead::/collections/glass-bead~Faux Grasscloth::/collections/faux-grasscloth-wallpaper-collection~Faux Leather::/collections/faux-leather~Faux Silk & Linen::/collections/faux-silk~Faux Suede::/collections/suede-faux-suede-fabric~Flocked Velvet::/collections/flocked-velvet-wallpaper-collection~Florals & Flowers::/collections/florals-and-flowers~French Country::/collections/french-country-wallpaper-collection~Fretwork::/collections/fretwork-wallpaper~Geometric::/collections/geometric~Georgian::/collections/damask-traditional~Glass Beads::/collections/glass-beaded-walls~Gothic::/collections/moody-dark~Greek Key::/collections/greek-key-wallpaper~Ikat::/collections/ikat-wallpaper~Industrial::/collections/industrial~Japonisme::/collections/japonisme-wallpaper~Lincrusta::/collections/vendors?q=Lincrusta~Lattice::/collections/lattice-wallpaper~Leaf::/collections/leaf-pattern-wallpaper~Madagascar Cloth::/collections/madagascar-cloth~Maximalist::/collections/maximalist-wallpaper~Medallion::/collections/medallion-wallpaper~Mediterranean::/collections/mediterranean-wallpaper~Metallic::/collections/metallic-wallpaper-collections~Mica::/collections/art-deco-metallics-1~Mid Century Modern::/collections/mid-century-modern-1~Minimalist::/collections/minimalist~Modern::/collections/modern~Murals::/collections/murals~Neoclassical::/collections/neoclassical-wallpaper~Novelty::/collections/novelty-wallpaper-collection~Ombre::/collections/ombre~Paisley::/collections/paisley-wallpaper~Paperweaves::/collections/fine-paper~Renaissance::/collections/renaissance-wallpaper~Retro & Vintage::/collections/retro-walls~Rustic::/collections/rustic-charm-wallpaper-collection~Scandinavian::/collections/scandinavian-wallpaper~Scenic::/collections/scenic-wallpaper~Stripe & Plaid::/collections/stripe-plaid~Textured::/collections/textured-wallpaper~Toile::/collections/toile-wallpaper~Traditional::/collections/traditional~Transitional::/collections/transitional-wallpaper~Trellis::/collections/trellis~Tropical::/collections/tropical-prints~Type 2 Vinyl::/collections/type-2-commercial-wallcovering~Vegan Crocodile::/collections/vegan-crocodile-wallpaper~Victorian::/collections/victorian-wallpaper~Vine::/collections/vine-pattern-wallpaper~Vintage::/collections/vintage~1940s::/collections/authentic-1940s-reproduction-vintage-wallcoverings~1950s::/collections/authentic-1950s-reproduction-vintage-wallcoverings~1960s::/collections/authentic-1960s-reproduction-vintage-wallcoverings~1970s::/collections/authentic-1970s-reproduction-vintage-wallcoverings" | split: "~" %}
+{% for b in brands %}
+ {% assign parts = b | split: "::" %}
+ {% assign title = parts[0] %}
+ {% assign href = parts[1] %}
+ {% assign chandle = href | remove: "/collections/" %}
+ {% assign coll = collections[chandle] %}
+ {% assign img = coll.image %}
+ {% unless img %}{% assign img = coll.products.first.featured_image %}{% endunless %}
+ <a class="dwb-card{% unless img %} dwb-noimg{% endunless %}" href="{{ href }}" title="{{ title | escape }}" data-name="{{ title | downcase | escape }}">
+ {% if img %}<span class="dwb-bg"><img src="{{ img | image_url: width: 600 }}" alt="{{ title | escape }}" loading="lazy"></span>{% endif %}
+ <span class="dwb-name">{{ title }}</span>
+ </a>
+{% endfor %}
+</div>
+</div>
+<script>
+(function(){
+ var grid=document.getElementById('dwbGrid'),q=document.getElementById('dwbSearch'),r=document.getElementById('dwbRange');
+ var cards=[].slice.call(grid.querySelectorAll('.dwb-card'));
+ var KEY='dwb-cols';
+ function applyCols(v){grid.style.setProperty('--cols',v);try{localStorage.setItem(KEY,v);}catch(e){}}
+ try{var s=localStorage.getItem(KEY);if(s){r.value=s;applyCols(s);}}catch(e){}
+ r.addEventListener('input',function(){applyCols(this.value);});
+ q.addEventListener('input',function(){var t=this.value.trim().toLowerCase();
+ cards.forEach(function(c){c.style.display=!t||c.getAttribute('data-name').indexOf(t)>=0?'':'none';});});
+})();
+</script>
\ No newline at end of file
← 04e8414 TK-10345 permanent cure: self-healing page.brands.liquid (ti
·
back to Dw Theme Frontpage Cta
·
TK-10629: de-leak Versa Designed Surfaces -> Hollywood Contr 7b06775 →