← back to Designer Wallcoverings
DW collection toolbar consolidation: stage 3 edited assets + push memo
d3862ff3682c230a442d901ddc1e3d97f4c16b00 · 2026-06-23 14:38:33 -0700 · Steve
Consolidate to one canonical sort+density control (collection-toolbar snippet),
null-guard its searchInput inline JS (fixes addEventListener-of-null pageerror),
remove the 2 duplicate density controls (dw-grid-control.js, theme.liquid inline
dw-density block) and the dead collection-grid-density.js include and native
#sort-by dropdown, and scope newwall-infinite.js off Boost collection/search pages.
DTD 3/3 unanimous (canonical=snippet; full-clone dev preview; dataset error
left as a separate template-level follow-up). Validated on dev clone 143953264691:
addEventListener error gone, exactly 1 toolbar, density slider changes grid cols.
Live push is gated — pending-approval memo carries the ready-to-run script.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Files touched
A pending-approval/collection-toolbar-consolidation.mdA pending-approval/toolbar-consolidation-assets/layout__theme.liquidA pending-approval/toolbar-consolidation-assets/push-to-live.shA pending-approval/toolbar-consolidation-assets/sections__collection.liquidA pending-approval/toolbar-consolidation-assets/snippets__collection-toolbar.liquid
Diff
commit d3862ff3682c230a442d901ddc1e3d97f4c16b00
Author: Steve <steve@designerwallcoverings.com>
Date: Tue Jun 23 14:38:33 2026 -0700
DW collection toolbar consolidation: stage 3 edited assets + push memo
Consolidate to one canonical sort+density control (collection-toolbar snippet),
null-guard its searchInput inline JS (fixes addEventListener-of-null pageerror),
remove the 2 duplicate density controls (dw-grid-control.js, theme.liquid inline
dw-density block) and the dead collection-grid-density.js include and native
#sort-by dropdown, and scope newwall-infinite.js off Boost collection/search pages.
DTD 3/3 unanimous (canonical=snippet; full-clone dev preview; dataset error
left as a separate template-level follow-up). Validated on dev clone 143953264691:
addEventListener error gone, exactly 1 toolbar, density slider changes grid cols.
Live push is gated — pending-approval memo carries the ready-to-run script.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
.../collection-toolbar-consolidation.md | 96 ++
.../layout__theme.liquid | 994 +++++++++++++++++++++
.../toolbar-consolidation-assets/push-to-live.sh | 84 ++
.../sections__collection.liquid | 239 +++++
.../snippets__collection-toolbar.liquid | 330 +++++++
5 files changed, 1743 insertions(+)
diff --git a/pending-approval/collection-toolbar-consolidation.md b/pending-approval/collection-toolbar-consolidation.md
new file mode 100644
index 00000000..b7349689
--- /dev/null
+++ b/pending-approval/collection-toolbar-consolidation.md
@@ -0,0 +1,96 @@
+# Pending Approval — DW Collection-Page Toolbar Consolidation (LIVE push)
+
+**Owner:** vp-dw-commerce · **Date:** 2026-06-23 · **Decision:** DTD 3/3 unanimous (fix-forward, Option A canonical, Option B on the dataset error)
+**Gate:** Live-theme write — classifier blocks direct live writes. This memo hands Steve the exact ready-to-run script.
+
+---
+
+## TL;DR
+
+Five concurrent dev sessions layered **three** grid-density controls + **two** sort controls onto the live collection page, and it threw two non-fatal JS pageerrors. This consolidates to **exactly one sort + one density control + the existing filter chips** (Steve's HARD rule), kills the `addEventListener of null` error, and scopes the stray infinite-scroll graft off Boost pages.
+
+Validated on a **faithful clone of live + these 3 edits** (dev theme created for preview). Pre-flight Playwright on the dev clone: the consolidated toolbar renders, all 3 duplicate controls are gone, the density slider functionally changes the grid columns, and the `addEventListener` error is gone.
+
+---
+
+## What was wrong (empirically reproduced on live)
+
+Live collection page (e.g. `/collections/1838-wallcoverings`) rendered, simultaneously:
+
+| Control | Source | Disposition |
+|---|---|---|
+| `.collection-toolbar` (`#collectionSort` + `#densitySlider`) | `snippets/collection-toolbar.liquid` (newest, 2026-06-22) | **KEEP — canonical** |
+| `#dw-density-slider` / `#dw-col-range` (~290-line inline block) | `layout/theme.liquid` | **REMOVE** |
+| `.dw-gc` injected bar | `assets/dw-grid-control.js` (loaded ×2 in `layout/theme.liquid`) | **REMOVE (stop loading)** |
+| dead density script | `assets/collection-grid-density.js` (loaded by `sections/collection.liquid`; queried selectors that never render) | **REMOVE (stop loading)** |
+| native `#sort-by` dropdown | `sections/collection.liquid` (Shopify default options only — no Color/Style/SKU) | **REMOVE** |
+
+**Two pageerrors on live:**
+1. `Cannot read properties of null (reading 'addEventListener')` — **root cause: the toolbar snippet's own inline script wired `searchInput.addEventListener(...)` unguarded**, but `#collectionSearch` only renders when `section.settings.show_search` is on (off here), so `searchInput` was null. (The briefing's "stale `dw-grid-range`/`dw-grid-num` IDs" theory was a red herring — those IDs are not in the live DOM and no current asset references them.) **→ FIXED by null-guarding the inline script.**
+2. `Cannot read properties of null (reading 'dataset')` — **PRE-EXISTING, not toolbar debt.** Source is `assets/grid.js` (2 MB compiled webpack bundle), `ProductListItem` constructor: `this.el.closest('[data-product-hover]').dataset.productHover`. `.closest()` returns null for Boost-app-injected cards that render outside the theme section's `data-product-hover` wrapper. **Out of scope per DTD 3/3** — fixing it means patching a 2 MB vendor bundle (fragile, unrelated). Tracked as a separate template-level follow-up (see below).
+
+**Stray infinite-scroll graft:** `assets/newwall-infinite.js` was loaded globally at `layout/theme.liquid`; on Boost collection pages it hides `ul.pagination` and tries to AJAX-append onto a grid Boost owns. **→ Scoped to load only on non-collection / non-search templates** (`{% unless template contains 'collection' or template contains 'search' %}`).
+
+---
+
+## The 3 edited assets (staged, validated)
+
+Local copies live at `~/Projects/Designer-Wallcoverings/pending-approval/toolbar-consolidation-assets/`:
+
+1. **`snippets/collection-toolbar.liquid`** — null-guard the inline script: bail early `if (!sortSelect || !densitySlider || !densityLabel) return;`, and gate all `searchInput` use behind `if (searchInput)`. (Markup/CSS unchanged.)
+2. **`sections/collection.liquid`** — removed the native `#sort-by` sort block; removed the dead `collection-grid-density.js` `<script>` include. (Both replaced with explanatory `{% comment %}` blocks.)
+3. **`layout/theme.liquid`** — removed both `dw-grid-control.js` includes; removed the ~290-line inline `#dw-density-slider` block; scoped `newwall-infinite.js` to non-collection/non-search templates only.
+
+Liquid tag balance verified unchanged (the pre-existing `{{ }}` off-by-one is JS template-literal `}` chars, present in the original too). Inline toolbar JS passes `node --check`.
+
+---
+
+## Dev preview (eyeball BEFORE approving)
+
+A faithful clone of live + these 3 edits was created as an unpublished theme:
+
+- **Dev preview theme id:** `143953264691` — *"[Dev] Toolbar Consolidation Preview 2026-06-23"*
+- **Preview URL (collection):**
+ `https://designer-laboratory-sandbox.myshopify.com/collections/1838-wallcoverings?preview_theme_id=143953264691`
+- **Home preview:** `https://designer-laboratory-sandbox.myshopify.com/?preview_theme_id=143953264691`
+
+**Pre-flight result on the dev clone (Playwright):**
+- `addEventListener` pageerror: **GONE** (was present on live).
+- `.collection-toolbar` count: **1**; `#collectionSort` + `#densitySlider`: **present**.
+- `#dw-density-slider`, `#dw-col-range`, `.dw-gc`, native `#sort-by`: **all 0 / gone**.
+- Density slider functional: moving it changed grid `repeat(4,1fr)` → `repeat(6,1fr)`. ✅
+- Remaining error on dev = the pre-existing `dataset` one (unchanged, out of scope).
+
+> NOTE: Boost's app-embed and `dw-hfilter.js` (the filter chips) do **not** fully hydrate under `?preview_theme_id` — a known Shopify preview limitation, NOT a regression. On the published theme the chips render (verified: live has `#dw-hfilter-toggle` + 122 `.dw-hfilter` elements today). My edits do not touch the chips or `dw-hfilter.js`.
+
+---
+
+## APPROVAL — paste this to push to LIVE
+
+After eyeballing the dev preview, run:
+
+```
+! bash ~/Projects/Designer-Wallcoverings/pending-approval/toolbar-consolidation-assets/push-to-live.sh
+```
+
+The script: resolves `role==main` dynamically (never hardcoded), **backs up each asset** to `shopify/theme-backups/toolbar-consolidation-<timestamp>/` before PUT, PUTs each edited asset, and verifies the byte-size after. Rollback = restore any backed-up file via the same endpoint.
+
+**Post-push verification (hard-refresh / incognito):**
+`https://www.designerwallcoverings.com/collections/1838-wallcoverings`
+Expect: 1 sort dropdown + 1 density slider + filter chips; density slider changes columns; `addEventListener` pageerror gone.
+
+---
+
+## Follow-up ticket (separate, NOT in this push)
+
+**`dataset of null` in `assets/grid.js`** — pre-existing Boost-vs-theme defect. Fix at the **template level** (ensure every product-list-item is inside a `data-product-hover` wrapper, or have Boost's product template inherit it) — do NOT patch the 2 MB webpack bundle. DTD 3/3.
+
+---
+
+## Cleanup after approval
+
+Once live is confirmed good, delete the dev preview theme:
+```
+TOKEN=$(grep -E '^SHOPIFY_THEME_TOKEN=' ~/Projects/secrets-manager/.env | cut -d= -f2-)
+curl -s -X DELETE "https://designer-laboratory-sandbox.myshopify.com/admin/api/2024-10/themes/143953264691.json" -H "X-Shopify-Access-Token: $TOKEN"
+```
diff --git a/pending-approval/toolbar-consolidation-assets/layout__theme.liquid b/pending-approval/toolbar-consolidation-assets/layout__theme.liquid
new file mode 100644
index 00000000..41330df3
--- /dev/null
+++ b/pending-approval/toolbar-consolidation-assets/layout__theme.liquid
@@ -0,0 +1,994 @@
+{% comment %}DW-CHINA-BLOCK-START{% endcomment %}
+{% assign dw_blocked_countries = "CN" | split: "," %}
+{% assign dw_visitor_country = localization.country.iso_code | upcase %}
+{% assign dw_is_blocked = false %}
+{% for dw_bc in dw_blocked_countries %}
+ {% assign dw_bc_trimmed = dw_bc | strip %}
+ {% if dw_visitor_country == dw_bc_trimmed %}
+ {% assign dw_is_blocked = true %}
+ {% endif %}
+{% endfor %}
+
+{% if dw_is_blocked %}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<!-- DW-CHINA-JS-BLOCK-START -->
+<script>
+(function() {
+ var blockedCountries = ['CN'];
+ fetch('/browsing_context_suggestions.json', {method: 'GET', credentials: 'same-origin'})
+ .then(function(r) { return r.json(); })
+ .catch(function() { return null; })
+ .then(function(data) {
+ if (data && data.detected_values && data.detected_values.country && data.detected_values.country.handle) {
+ var detectedCountry = data.detected_values.country.handle.toUpperCase();
+ if (blockedCountries.indexOf(detectedCountry) !== -1) {
+ var container = document.createElement('div');
+ container.innerHTML = '<div style="position:fixed;top:0;left:0;width:100%;height:100%;background:#f5f5f5;z-index:999999;display:flex;align-items:center;justify-content:center;font-family:-apple-system,BlinkMacSystemFont,sans-serif"><div style="text-align:center;padding:60px 40px;background:#fff;border-radius:12px;box-shadow:0 4px 24px rgba(0,0,0,.08);max-width:520px;width:90%"><div style="font-size:48px;margin-bottom:20px">🌐</div><h1 style="font-size:24px;margin-bottom:16px;font-weight:600;color:#333">Region Not Available</h1><p style="font-size:16px;line-height:1.6;color:#666;margin-bottom:12px">This store is not available in your region.</p><p style="font-size:16px;line-height:1.6;color:#666">We do not ship to or serve customers in your area at this time.</p></div></div>';
+ document.body.innerHTML = '';
+ document.body.appendChild(container);
+ }
+ }
+ });
+})();
+</script>
+<!-- DW-CHINA-JS-BLOCK-END -->
+
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Region Not Available</title>
+ <style>
+ * { margin: 0; padding: 0; box-sizing: border-box; }
+ body {
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+ background: #f5f5f5;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 100vh;
+ color: #333;
+ }
+ .container {
+ text-align: center;
+ padding: 60px 40px;
+ background: white;
+ border-radius: 12px;
+ box-shadow: 0 4px 24px rgba(0,0,0,0.08);
+ max-width: 520px;
+ width: 90%;
+ }
+ .icon { font-size: 48px; margin-bottom: 20px; }
+ h1 { font-size: 24px; margin-bottom: 16px; font-weight: 600; }
+ p { font-size: 16px; line-height: 1.6; color: #666; margin-bottom: 12px; }
+ .contact { margin-top: 24px; font-size: 14px; color: #999; }
+ .contact a { color: #2563eb; text-decoration: none; }
+ </style>
+{%- comment -%} dw-grid-control.js include removed 2026-06-23 — duplicate grid-density control; canonical control is the collection-toolbar snippet. {%- endcomment -%}
+
+
+
+
+
+<!-- cache-bust: 2026-03-25T00:54:55.724677 -->
+</head>
+<body>
+ <div class="container">
+ <div class="icon">🌐</div>
+ <h1>Region Not Available</h1>
+ <p>We're sorry, but this store is not available in your region.</p>
+ <p>We do not ship to or serve customers in your area at this time.</p>
+ <div class="contact">
+ Questions? Contact us at <a href="mailto:info@designerwallcoverings.com">info@designerwallcoverings.com</a>
+ </div>
+ </div>
+
+
+</body>
+</html>
+{% break %}
+{% endif %}
+{% comment %}DW-CHINA-BLOCK-END{% endcomment %}
+
+<!doctype html>
+<html
+ class="
+ no-js
+ loading
+ "
+ lang="{{ request.locale.iso_code }}"
+>
+<head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
+ <!-- Preconnect Domains -->
+ <link rel="preconnect" href="https://cdn.shopify.com" crossorigin>
+ <link rel="preconnect" href="https://fonts.shopify.com" crossorigin>
+ <link rel="preconnect" href="https://monorail-edge.shopifysvc.com">
+
+ <!-- Preload Assets -->
+ <link rel="preload" href="{{ 'chiko-icons.woff' | asset_url }}" as="font" type="font/woff" crossorigin>
+ <link rel="preload" href="{{ 'pxu-social-icons.woff' | asset_url }}" as="font" type="font/woff" crossorigin>
+
+ <link rel="preload" href="{{ 'theme.css' | asset_url }}" as="style">
+
+ <link rel="preload" href="{{ 'modernizr-2.8.2.min.js' | asset_url }}" as="script">
+
+ {% if template contains 'cart' %}
+ <link rel="preload" href="{{ '/services/javascripts/countries.js' }}" as="script">
+ <link rel="preload" href="{{ 'shopify_common.js' | shopify_asset_url }}" as="script">
+ {% endif %}
+
+ {% if template contains 'customers' %}
+ <link rel="preload" href="{{ 'shopify_common.js' | shopify_asset_url }}" as="script">
+ <link rel="preload" href="{{ 'customer_area.js' | shopify_asset_url }}" as="script">
+ {% endif %}
+
+ <link rel="preload" href="{{ 'grid.js' | asset_url }}" as="script">
+
+ <script src="//cdata.modernpostcard.com/js/E3CA4636CEDAD4.js" async defer></script>
+
+ <title>
+ {{ page_title }}
+
+ {% if current_tags %}
+ – {{ current_tags | join: ', ' }}
+ {% endif %}
+
+ {% if current_page != 1 %}
+ – {{ 'general.pagination.page' | t: page_number: current_page }}
+ {% endif %}
+
+ {% unless page_title contains shop.name %}
+ – {{ shop.name }}
+ {% endunless %}
+ </title>
+
+ {% if page_description %}
+ <meta name="description" content="{{ page_description | escape }}" />
+ {% endif %}
+
+ {% if settings.favicon %}
+ <link rel="shortcut icon" href="{{ settings.favicon | img_url: '32x32' }}" type="image/png" />
+ {% endif %}
+
+ {% if template contains 'collection' and current_tags %}
+ <meta name="robots" content="noindex" />
+ <link rel="canonical" href="{{ shop.url }}{{ collection.url }}" />
+ {% else %}
+ <link rel="canonical" href="{{ canonical_url }}" />
+ {% endif %}
+ <meta name="viewport" content="width=device-width,initial-scale=1" />
+
+ {%- render 'head.import-map' -%}
+ {%- render 'head.is-land' -%}
+
+ {% comment %}
+ {% render 'boost-sd-fallback' %}
+ {% endcomment %}
+ {{ content_for_header }}
+
+ {% liquid
+ assign heading_text_transform = 'none'
+ if settings.heading-font-small-caps
+ assign heading_text_transform = 'uppercase'
+ endif
+
+ assign button_text_transform = 'none'
+ assign button_letter_spacing = '0em'
+ if settings.button-font-small-caps
+ assign button_text_transform = 'uppercase'
+ assign button_letter_spacing = '0.05em'
+ endif
+ %}
+
+ <style>
+ :root {
+ /* ------------------------------------------------------------
+ Typography
+ ------------------------------------------------------------ */
+ /* Body */
+ --element-text-font-size--body-lg: 1.286rem; /* Product price */
+ --element-text-font-size--body-sm: var(--text-size-3-5); /* SKU, installments, variant labels */
+ --element-text-font-family--body: {{ settings.font_body.family }}, {{ settings.font_body.fallback_families }};
+ --element-text-font-weight--body: {{ settings.font_body.weight }};
+
+ /* Headings */
+ --element-text-font-size--heading-xl: 2.5rem; /* Product title */
+ --element-text-font-family--heading: {{ settings.font_heading.family }}, {{ settings.font_heading.fallback_families }};
+ --element-text-font-weight--heading: {{ settings.font_heading.weight }};
+ --element-text-line-height--heading: 1.25;
+ --element-text-text-transform--heading: {{ heading_text_transform }};
+
+ /* Buttons */
+ --element-button-font-family: {{ settings.font_button.family }}, {{ settings.font_button.fallback_families }};
+ --element-button-text-transform: {{ button_text_transform }};
+ --element-button-letter-spacing: {{ button_letter_spacing }};
+
+ /* ------------------------------------------------------------
+ Colors
+ ------------------------------------------------------------ */
+ --color-primary: {{ settings['body-text-color'] }};
+ --color-secondary: {{ settings['background-color'] }};
+ --root-color-primary: {{ settings['body-text-color'] }};
+ --root-color-secondary: {{ settings['background-color'] }};
+ --color-focus: #0000ff;
+
+ --color-sale-tag-text: {{ settings['background-color'] }};
+ --color-sale-tag: {{ settings['product-badge-background-color'] }};
+
+ --element-button-color-primary: {{ settings['button-color'] }};
+ --element-button-color-secondary: {{ settings['accent-color'] }};
+
+ --element-text-color: {{ settings['body-text-color'] }};
+ --element-text-color--heading: {{ settings['heading-color'] }};
+
+ --element-input-color-primary: {{ settings['form-select-color'] }};
+ --element-input-color-secondary: {{ settings['form-select-background'] }};
+
+ /* ------------------------------------------------------------
+ Other
+ ------------------------------------------------------------ */
+ --element-badge-radius: 2px;
+ --element-button-radius: 2px;
+
+ --layout-section-max-inline-size: 1260px;
+ --layout-section-padding-inline: 30px;
+ }
+
+ /* ------------------------------------------------------------
+ Component overrides
+ ------------------------------------------------------------ */
+
+ ::before,
+ ::after {
+ box-sizing: content-box;
+ }
+ product-hot-reload ::before,
+ product-hot-reload ::after {
+ box-sizing: border-box;
+ }
+
+ /* Lightbox */
+ .overlay-lightbox__overlay {
+ z-index: 9999;
+ }
+
+ /* Pick up */
+ .element-icon-in-stock {
+ fill: currentColor;
+ }
+
+ /* Divider */
+ hr.element-divider {
+ height: 0;
+ background: transparent;
+ }
+
+ /* Drawer */
+ overlay-drawer .element-button {
+ --element-button-color-primary: {{ settings.body-text-color }};
+ --element-icon-stroke-width: 3px;
+ }
+
+ /* Heading */
+ .element-text:is([class*=element-text--heading]) {
+ --_color: var(--element-text-color--heading);
+ }
+
+ /* Element Input */
+ .element-input {
+ --_color-box-shadow: {{ settings['form-select-border-color'] }};
+ }
+
+ /* Variant Labels */
+ label.element-text:is([class*=element-text--body]):where(.element-text--body-sm) {
+ color: {{ settings['heading-color'] }};
+ font-size: 1rem;
+
+ .element-text:first-child {
+ color: {{ settings['heading-color'] }};
+ }
+ }
+
+ /* Element Select */
+ element-select {
+ --color-primary: {{ settings['form-select-border-color'] }};
+ --element-button-color-primary: {{ settings['form-select-color'] }};
+ --element-button-color-secondary: {{ settings['form-select-background'] }};
+ --element-button-box-shadow: inset 0 0 0 1px {{ settings['form-select-border-color'] }};
+ --element-button-font-family: {{ settings.font_body.family }}, {{ settings.font_body.fallback_families }};
+ --element-button-text-transform: none;
+ }
+ element-select.element-select__wrapper--focused .element-button {
+ box-shadow: inset 0 0 0 var(--element-button-border-width--focus) var(--_color-focus);
+ border: none;
+ }
+
+ /* Media Gallery */
+ .media-gallery__thumb {
+ border-radius: 0;
+ }
+
+ /* ATC */
+
+ product-form .element-button[type="submit"] {
+ --element-button-padding-block: var(--size-5);
+ --_color-text: {{ settings['button-color'] }};
+ --_color-background: {{ settings['accent-color'] }};
+ --_box-shadow: none;
+
+ &:disabled {
+ color: #888888 !important;
+ background-color: #cccccc !important;
+ }
+ }
+
+ product-form:has(.element-button--shopify-payment-wrapper) .element-button[type="submit"] {
+ --element-button-color-primary: {{ settings['secondary-button-color'] }};
+ --element-button-color-secondary: {{ settings['secondary-button-background'] }};
+ }
+
+ .shopify-payment-button .shopify-payment-button__button.shopify-payment-button__button--unbranded,
+ .shopify-payment-button .shopify-payment-button__button {
+ --element-text-line-height--body-md: 1;
+ --element-button-color-primary: {{ settings['accent-color'] }};
+ --element-button-color-secondary: {{ settings['button-color'] }};
+ --element-button-padding-block: var(--size-5);
+ --_box-shadow: none;
+
+ text-transform: var(--element-button-text-transform);
+ }
+ </style>
+
+ {% assign x_handle = settings.social-x-link | split: 'x.com/' | last | split: 'twitter.com/' | last %}
+ {%
+ render 'social-meta-tags',
+ twitter_handle: x_handle,
+ default_image: page_image,
+ %}
+
+ <!-- Theme CSS -->
+ <link rel="stylesheet" href="{{ 'theme.css' | asset_url }}">
+ {% render 'dw-product-styles' %}
+ <link rel="stylesheet" href="{{ 'custom.css' | asset_url }}">
+ {% if settings.custom-css != blank %}
+ <style>
+ {{ settings.custom-css }}
+ </style>
+ {% endif %}
+
+ <!-- Theme object -->
+ {% comment %}Inject theme-object begin{% endcomment %}
+ <script>
+ var Theme = {};
+ Theme.version = "7.1.0";
+ Theme.name = 'Grid';
+
+ Theme.currency = {{ shop.currency | json }};
+ Theme.moneyFormat = {{ shop.money_format | strip_html | json }};
+
+ Theme.pleaseSelectText = "{{ 'general.general.please_select' | t | strip_newlines | escape }}";
+
+ Theme.addToCartSuccess = "{{ 'products.product.success_html' | t: product: '**product**', cart_link: '**cart_link**', continue_link: '**continue_link**', checkout_link: '**checkout_link**' | strip_newlines | escape }}";
+
+ {% if shop.customer_accounts_enabled and customer %}
+ Theme.customerLoggedIn = true;
+ {% endif %}
+
+ Theme.shippingCalculator = true;
+ Theme.shippingButton = "{{ 'cart.shipping_calculator.submit' | t | strip_newlines | escape }}";
+ Theme.shippingDisabled = "{{ 'cart.shipping_calculator.disabled' | t | strip_newlines | escape }}";
+
+ {% if shop.customer_accounts_enabled and customer and customer.default_address %}
+ Theme.customerAddress = {{ customer.default_address | json }};
+ {% endif %}
+
+ Theme.shippingCalcErrorMessage = "{{ 'cart.shipping_calculator.error' | t | strip_newlines | replace: '"','\\"' }}";
+ Theme.shippingCalcMultiRates = "{{ 'cart.shipping_calculator.rates_html' | t | strip_newlines | replace: '"','\\"' }}";
+ Theme.shippingCalcOneRate = "{{ 'cart.shipping_calculator.rate' | t | strip_newlines | replace: '"','\\"' }}";
+ Theme.shippingCalcNoRates = "{{ 'cart.shipping_calculator.no_rates' | t | strip_newlines | replace: '"','\\"' }}";
+ Theme.shippingCalcRateValues = "{{ 'cart.shipping_calculator.rate_values_html' | t | strip_newlines | replace: '"','\\"' }}";
+
+ Theme.routes = {
+ "root_url": "{{ routes.root_url }}",
+ "account_url": "{{ routes.account_url }}",
+ "account_login_url": "{{ routes.account_login_url }}",
+ "account_logout_url": "{{ routes.account_logout_url }}",
+ "account_register_url": "{{ routes.account_register_url }}",
+ "account_addresses_url": "{{ routes.account_addresses_url }}",
+ "collections_url": "{{ routes.collections_url }}",
+ "all_products_collection_url": "{{ routes.all_products_collection_url }}",
+ "search_url": "{{ routes.search_url }}",
+ "cart_url": "{{ routes.cart_url }}",
+ "cart_add_url": "{{ routes.cart_add_url }}",
+ "cart_change_url": "{{ routes.cart_change_url }}",
+ "cart_clear_url": "{{ routes.cart_clear_url }}",
+ "product_recommendations_url": "{{ routes.product_recommendations_url }}",
+ "predictive_search_url": "{{ routes.predictive_search_url }}",
+ };
+ </script>
+ {% comment %}Inject theme-object end{% endcomment %}
+
+ {% render 'jquery-snippet' %}
+ <script src="{{ 'custom.js' | asset_url }}" defer></script>
+
+ <script>
+ (function() {
+ document.documentElement.classList.remove('no-js');
+ window.addEventListener('DOMContentLoaded', function() {
+ document.documentElement.classList.remove('loading');
+ });
+ window.setTimeout(function() {
+ document.documentElement.classList.remove('loading');
+ }, 2000);
+
+ if (!window.MutationObserver || !window.MutationObserver.prototype) {
+ return;
+ }
+ var originalObserve = window.MutationObserver.prototype.observe;
+ window.MutationObserver.prototype.observe = function(target, options) {
+ if (!(target instanceof Node)) {
+ return;
+ }
+ return originalObserve.call(this, target, options);
+ };
+ })();
+ </script>
+
+{%- comment -%} dw-grid-control.js include removed 2026-06-23 — duplicate grid-density control; canonical control is the collection-toolbar snippet. {%- endcomment -%}
+
+
+
+
+
+
+
+
+
+
+
+<!-- DW: Price hiding script REMOVED 2026-03-24 -->
+
+
+<!-- DW: killPrices REMOVED 2026-03-24 -->
+
+<!-- /DW -->
+
+{%- comment -%}
+ DW Grid Density Slider (inline #dw-density-slider / #dw-col-range block) REMOVED
+ 2026-06-23. This was one of three competing grid-density controls layered by
+ five concurrent dev sessions. Grid density is now owned EXCLUSIVELY by the
+ canonical collection-toolbar snippet (#densitySlider), rendered inside
+ sections/collection.liquid. See pending-approval/collection-toolbar-consolidation.md.
+{%- endcomment -%}
+
+{% comment %} DW: ItemList structured data for the Shop-by-Brand page (script tags are stripped from page body_html, so injected here) {% endcomment %}
+{% if page.handle == 'brands' %}{% render 'brands-jsonld' %}{% endif %}
+
+<!-- cache-bust: 2026-03-25T00:54:55.724677 -->
+</head>
+
+<body
+ class="
+ template-{{ template.name }}
+ template-suffix-{{ template.suffix }}
+
+ {% if customer %}
+ customer-logged-in
+ {% endif %}
+ "
+>
+
+ {%- comment -%}
+ ── China Region Block (added 2026-02-27) ──
+ Blocks visitors from CN country code with a full-screen overlay.
+ {%- endcomment -%}
+ {%- if localization.country.iso_code == 'CN' -%}
+ <div id="region-block" style="position:fixed;inset:0;z-index:999999;background:#ffffff;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:40px;font-family:-apple-system,BlinkMacSystemFont,sans-serif;">
+ <h1 style="font-size:24px;color:#333;margin-bottom:16px;">This store is not available in your region</h1>
+ <p style="font-size:16px;color:#666;max-width:500px;">We apologize for the inconvenience, but this store does not currently serve customers in your region.</p>
+ </div>
+ <style>body{overflow:hidden !important;}</style>
+ {%- endif -%}
+
+ {% sections 'header-group' %}
+
+ <div style="--background-color: {{ settings.background-color }}">
+ {%
+ render 'age-gate',
+ id: 'page',
+ sections: content_for_layout,
+ %}
+ </div>
+
+ {% include 'quickshop' %}
+
+ {% comment %}Inject icon-star-symbol begin{% endcomment %}
+ <svg
+ class="icon-star-reference"
+ aria-hidden="true"
+ focusable="false"
+ role="presentation"
+ xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="3 3 17 17" fill="none"
+ >
+ <symbol id="icon-star">
+ <rect class="icon-star-background" width="20" height="20" fill="currentColor"/>
+ <path d="M10 3L12.163 7.60778L17 8.35121L13.5 11.9359L14.326 17L10 14.6078L5.674 17L6.5 11.9359L3 8.35121L7.837 7.60778L10 3Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+ </symbol>
+ <clipPath id="icon-star-clip">
+ <path d="M10 3L12.163 7.60778L17 8.35121L13.5 11.9359L14.326 17L10 14.6078L5.674 17L6.5 11.9359L3 8.35121L7.837 7.60778L10 3Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+ </clipPath>
+ </svg>
+ {% comment %}Inject icon-star-symbol end{% endcomment %}
+
+ <div class="main-content">
+ {% render "dw-boost-overrides" %}
+{{ content_for_layout }}
+ </div>
+
+ <div class="site-overlay" data-site-overlay></div>
+
+ {% sections 'footer-group' %}
+
+ <!-- Scripts -->
+ <!-- Third Party JS Libraries -->
+ <script src="{{ 'modernizr-2.8.2.min.js' | asset_url }}" defer></script>
+
+ {% if template contains 'cart' %}
+ <script src="{{ '/services/javascripts/countries.js' }}" defer></script>
+ <script src="{{ 'shopify_common.js' | shopify_asset_url }}" defer></script>
+ {% endif %}
+
+ {% if template contains 'customers' %}
+ <script src="{{ 'shopify_common.js' | shopify_asset_url }}" defer></script>
+ <script src="{{ 'customer_area.js' | shopify_asset_url }}" defer></script>
+ {% endif %}
+
+ <script src="{{ 'grid.js' | asset_url }}" defer></script>
+
+ {% comment %}Inject @pixelunion/shopify-structured-data/structured-data-article begin{% endcomment %}
+ {% comment %}
+ Article structured data
+ https://developers.google.com/search/docs/data-types/articles
+ {% endcomment %}
+
+ {% if template contains 'article' %}
+ {%- capture article_description -%}
+ {%- if article.excerpt != blank -%}
+ {{ article.excerpt | strip_html }}
+ {%- else -%}
+ {{ article.content | truncatewords: 100 | strip_html }}
+ {%- endif -%}
+ {%- endcapture -%}
+
+ <script type="application/ld+json">
+ {
+ "@context": "http://schema.org",
+ "@type": "BlogPosting",
+ "mainEntityOfPage": {
+ "@type": "WebPage",
+ "@id": "{{ shop.url }}{{ article.url }}"
+ },
+ "headline": {{ article.title | json }},
+ {% if article.image %}
+ "image": {
+ "@type": "ImageObject",
+ "url": {{ article.image | img_url: '800x800' | prepend: 'https:' | json }},
+ "height": 800,
+ "width": 800
+ },
+ {% endif %}
+ "datePublished": {{ article.published_at | date: '%Y-%m-%dT%H:%M:%S%z' | json}},
+ "dateModified": {{ article.published_at | date: '%Y-%m-%dT%H:%M:%S%z' | json}},
+ "author": {
+ "@type": "Person",
+ "name": {{ article.author | json }}
+ },
+ "publisher": {
+ "@type": "Organization",
+ "name": {{ shop.name | json }},
+ "logo": {
+ "@type": "ImageObject",
+ "url": {{ article.user.image | img_url: '200x200' | prepend: 'https:' | json }}
+ }
+ },
+ "description": {{ article_description | json }}
+ }
+ </script>
+ {% endif %}
+ {% comment %}Inject @pixelunion/shopify-structured-data/structured-data-article end{% endcomment %}
+
+ {% comment %}Inject @pixelunion/shopify-structured-data/structured-data-breadcrumbs begin{% endcomment %}
+ {% comment %}
+ Breadcrumbs
+ https://developers.google.com/search/docs/data-types/breadcrumbs
+ {% endcomment %}
+
+ {%- if current_tags -%}
+ {%- assign tag_names = current_tags | join: ', ' %}
+ {% comment %}Converting an array to a handle converts it to a string{% endcomment %}
+ {%- capture tag_handles -%}
+ {%- for tag in current_tags -%}
+ {{- tag | handle | append: '|' -}}
+ {%- endfor -%}
+ {%- endcapture -%}
+ {%- endif -%}
+
+ {% if collection.url == blank %}
+ {% assign collection_url = '/collections/all' %}
+ {% else %}
+ {% assign collection_url = collection.url %}
+ {% endif %}
+
+ {% if template.name == 'product'
+ or template.name == 'list-collections'
+ or template.name == 'collection'
+ or template.name == 'blog'
+ or template.name == 'article'
+ or template.name == 'search'
+ or template.name == 'cart'
+ or template.name == 'page'
+ %}
+
+ <script type="application/ld+json">
+ {
+ "@context": "http://schema.org",
+ "@type": "BreadcrumbList",
+ "itemListElement": [
+ {% case template.name %}
+ {% when 'product' %}
+ {% if product.collections.size >= 1 %}
+ {
+ "@type": "ListItem",
+ "position": 1,
+ "item": {
+ "@id": "{{ shop.url }}/collections",
+ "name": {{ 'structured_data.breadcrumbs.collections' | t | json }}
+ }
+ },
+ {
+ "@type": "ListItem",
+ "position": 2,
+ "item": {
+ "@id": "{{ shop.url }}/collections/{{ product.collections.first.handle }}",
+ "name": {{ product.collections.first.title | json }}
+ }
+ },
+ {% else %}
+ {
+ "@type": "ListItem",
+ "position": 1,
+ "item": {
+ "@id": "{{ shop.url }}/products",
+ "name": {{ 'structured_data.breadcrumbs.products' | t | json }}
+ }
+ },
+ {% endif %}
+ {
+ "@type": "ListItem",
+ "position": {% if product.collections.size >= 1 %}3{% else %}2{% endif %},
+ "item": {
+ "@id": "{{ shop.url }}{{ product.url | within: collection }}",
+ "name": {{ product.title | json }}
+ }
+ }
+ {% when 'list-collections' %}
+ {
+ "@type": "ListItem",
+ "position": 1,
+ "item": {
+ "@id": "{{ shop.url }}/collections",
+ "name": {{ 'structured_data.breadcrumbs.collections' | t | json }}
+ }
+ }
+ {% if current_page != 1 %}
+ ,
+ {
+ "@type": "ListItem",
+ "position": 2,
+ "item": {
+ "@id": "{{ shop.url }}/collections",
+ "name": {{ 'structured_data.breadcrumbs.page' | t: page: current_page | json }}
+ }
+ }
+ {% endif %}
+ {% when 'collection' %}
+ {
+ "@type": "ListItem",
+ "position": 1,
+ "item": {
+ "@id": "{{ shop.url }}/collections",
+ "name": {{ 'structured_data.breadcrumbs.collections' | t | json }}
+ }
+ },
+ {
+ "@type": "ListItem",
+ "position": 2,
+ "item": {
+ "@id": "{{ shop.url }}{{ collection_url }}",
+ "name": {{ collection.title | json }}
+ }
+ }
+ {% if current_tags %}
+ ,
+ {
+ "@type": "ListItem",
+ "position": 3,
+ "item": {
+ "@id": "{{ shop.url }}{{ collection_url }}/{{- tag_handles | split: '|' | join: '+' -}}",
+ "name": {{ 'structured_data.breadcrumbs.tags_html' | t: tags: tag_names | json }}
+ }
+ }
+ {% endif %}
+ {% if current_page != 1 %}
+ {% if current_tags %}
+ {% assign position = 4 %}
+ {% else %}
+ {% assign position = 3 %}
+ {% endif %}
+ ,
+ {
+ "@type": "ListItem",
+ "position": {{ position }},
+ "item": {
+ "@id": "{{ shop.url }}/collections?page={{ current_page }}",
+ "name": {{ 'structured_data.breadcrumbs.page' | t: page: current_page | json }}
+ }
+ }
+ {% endif %}
+ {% when 'blog' or 'article' %}
+ {
+ "@type": "ListItem",
+ "position": 1,
+ "item": {
+ "@id": "{{ shop.url }}{{ blog.url }}",
+ "name": {{ blog.title | json }}
+ }
+ }
+ {% if template.name == 'article' %}
+ ,
+ {
+ "@type": "ListItem",
+ "position": 2,
+ "item": {
+ "@id": "{{ shop.url }}{{ article.url }}",
+ "name": {{ article.title | json }}
+ }
+ }
+ {% elsif current_tags %}
+ ,
+ {
+ "@type": "ListItem",
+ "position": 2,
+ "item": {
+ "@id": "{{ shop.url }}{{ blog.url }}/tagged/{{- tag_handles | split: '|' | join: '+' -}}",
+ "name": {{ 'structured_data.breadcrumbs.tags_html' | t: tags: tag_names | json }}
+ }
+ }
+ {% endif %}
+ {% if current_page != 1 %}
+ {% if current_tags %}
+ {% assign position = 3 %}
+ {%- capture url -%}
+ {{ shop.url }}{{ blog.url }}/tagged/{{ tag_handles | split: '|' | join: '+' }}?page={{ current_page }}
+ {%- endcapture -%}
+ {% else %}
+ {% assign position = 2 %}
+ {%- capture url -%}
+ {{ shop.url }}{{ blog.url }}?page={{ current_page }}
+ {%- endcapture -%}
+ {% endif %}
+ ,
+ {
+ "@type": "ListItem",
+ "position": {{ position }},
+ "item": {
+ "@id": "{{ url }}",
+ "name": {{ 'structured_data.breadcrumbs.page' | t: page: current_page | json }}
+ }
+ }
+ {% endif %}
+ {% when 'search' %}
+ {
+ "@type": "ListItem",
+ "position": 1,
+ "item": {
+ "@id": "{{ shop.url }}/search",
+ "name": {{ 'structured_data.breadcrumbs.search' | t | json }}
+ }
+ }
+ {% if search.performed %}
+ ,
+ {
+ "@type": "ListItem",
+ "position": 2,
+ "item": {
+ "@id": "{{ shop.url }}/search?q={{ search.terms }}",
+ "name": {{ search.terms | json }}
+ }
+ }
+ {% if current_page != 1 %}
+ ,
+ {
+ "@type": "ListItem",
+ "position": 3,
+ "item": {
+ "@id": "{{ shop.url }}/search?page={{ current_page }}&q={{ search.terms }}",
+ "name": {{ 'structured_data.breadcrumbs.page' | t: page: current_page | json }}
+ }
+ }
+ {% endif %}
+ {% endif %}
+ {% when 'cart' %}
+ {
+ "@type": "ListItem",
+ "position": 1,
+ "item": {
+ "@id": "{{ shop.url }}/cart",
+ "name": {{ 'structured_data.breadcrumbs.cart' | t | json }}
+ }
+ }
+ {% when 'page' %}
+ {
+ "@type": "ListItem",
+ "position": 1,
+ "item": {
+ "@id": "{{ page.url }}",
+ "name": {{ page.title | json }}
+ }
+ }
+ {% else %}
+ {% endcase %}
+ ]
+ }
+ </script>
+ {% endif %}
+ {% comment %}Inject @pixelunion/shopify-structured-data/structured-data-breadcrumbs end{% endcomment %}
+
+ {% comment %}Inject @pixelunion/shopify-structured-data/structured-data-product begin{% endcomment %}
+ {% comment %}
+ Product structured data
+ https://developers.google.com/search/docs/data-types/products
+ {% endcomment %}
+
+ {% if template contains 'product' %}
+ {% assign selected_variant = product.selected_or_first_available_variant | default: product.variants.first %}
+ {% assign product_image = selected_variant.featured_image | default: product.featured_image %}
+ {%- capture product_name -%}
+ {{ product.title }}
+ {%- if selected_variant.title != 'Default Title' and selected_variant.option1 == 'Default Title' -%}
+ - {{ selected_variant.title }}
+ {%- endif -%}
+ {%- endcapture -%}
+
+ {%- assign now = 'now' | date: '%Y-%m-%d' | split: '-' -%}
+ {% capture year_from_now %}{{ now[0] | plus: 1 }}-{{ now[1] }}-{{ now[2] | at_most: 28 }}{% endcapture %}
+
+ <script type="application/ld+json">
+ {
+ "@context": "http://schema.org/",
+ "@type": "Product",
+ "name": {{ product_name | strip_newlines | json }},
+ "image": {{ product_image | img_url: '1024x1024' | prepend: 'https:' | json }},
+ {% if product.description != blank %}
+ "description": {{ product.description | json }},
+ {% endif %}
+ {% if product.vendor %}
+ "brand": {
+ "@type": "Thing",
+ "name": {{ product.vendor | json }}
+ },
+ {% endif %}
+ {% if selected_variant.sku != blank %}
+ "sku": {{ selected_variant.sku | json }},
+ {% endif %}
+ {% if selected_variant.barcode != blank %}
+ "mpn": {{ selected_variant.barcode | json }},
+ {% endif %}
+ "offers": {
+ "@type": "Offer",
+ "priceCurrency": {{ cart.currency.iso_code | json }},
+ "price": {{ selected_variant.price | divided_by: 100.0 | json }},
+ "availability": "http://schema.org/{% if selected_variant.available %}InStock{% else %}OutOfStock{% endif %}",
+ "url": "{{ shop.url }}{{ selected_variant.url }}",
+ "seller": {
+ "@type": "Organization",
+ "name": {{ shop.name | json }}
+ },
+ "priceValidUntil": {{ year_from_now | json }}
+ }
+ }
+ </script>
+ {% endif %}
+ {% comment %}Inject @pixelunion/shopify-structured-data/structured-data-product end{% endcomment %}
+
+ {% comment %}Inject @pixelunion/shopify-structured-data/structured-data-website begin{% endcomment %}
+ {% comment %}
+ Store information
+ https://developers.google.com/search/docs/data-types/sitename
+ {% endcomment %}
+
+ <script type="application/ld+json">
+ {
+ "@context": "http://schema.org",
+ "@type": "WebSite",
+ "name": "{{ shop.name }}",
+ "url": "{{ shop.url }}"
+ }
+ </script>
+ {% comment %}Inject @pixelunion/shopify-structured-data/structured-data-website end{% endcomment %}
+
+ <form id="checkout_form" action="{{ routes.cart_url }}" method="POST" style="display: none;"></form>
+
+ <script>
+ (function () {
+ function handleFirstTab(e) {
+ if (e.keyCode === 9) { // the "I am a keyboard user" key
+ document.body.classList.add('user-is-tabbing');
+ window.removeEventListener('keydown', handleFirstTab);
+ }
+ }
+ window.addEventListener('keydown', handleFirstTab);
+ })();
+ </script>
+ <script>(function(n, v) {/* eslint-disable-next-line max-len */if (window.Shopify && window.Shopify.theme && navigator && navigator.sendBeacon && window.Shopify.designMode) {if (sessionStorage.getItem('oots_beacon')) return;navigator.sendBeacon('https://app.outofthesandbox.com/beacon', new URLSearchParams({shop_domain: window.Shopify.shop.toLowerCase(),shop_id: '{{ shop.id }}',shop_email: '{{ shop.email }}',theme_name: n.toLowerCase(),theme_version: v.toLowerCase(),theme_store_id: window.Shopify.theme.theme_store_id,theme_id: window.Shopify.theme.id,theme_role: window.Shopify.theme.role,}));sessionStorage.setItem('oots_beacon', '');}}('grid','7.1.0'))</script>
+
+<!--Start of Zendesk Chat Script-->
+<script async>
+window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s=
+d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set.
+_.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute("charset","utf-8");
+$.src="https://v2.zopim.com/?RH5Yjru86SIJRwOxfiMAf2DTCgdROhhf";z.t=+new Date;$.
+type="text/javascript";e.parentNode.insertBefore($,e)})(document,"script");
+</script>
+<!--End of Zendesk Chat Script-->
+<!-- Statcounter code for DW - Started 3/5/19
+http://DesignerWallcoverings.com on Shopify -->
+<script type="text/javascript">
+var sc_project=11961678;
+var sc_invisible=1;
+var sc_security="9d9a53bd";
+var sc_https=1;
+</script>
+<script type="text/javascript"
+src="https://www.statcounter.com/counter/counter.js"
+async></script>
+<noscript><div class="statcounter"><a title="web statistics"
+href="https://statcounter.com/" target="_blank"><img
+class="statcounter"
+src="https://c.statcounter.com/11961678/0/9d9a53bd/1/"
+alt="web statistics"></a></div></noscript>
+<!-- End of Statcounter Code -->
+
+{% render 'hide-browse-hidden' %}
+
+<!-- DW: price restore band-aid removed 2026-06-11 — root cause (blank saw_variant_price) fixed in product-form-content.liquid; no price-hiding CSS exists. -->
+{%- comment -%} DW Shop-by-Color wheel {%- endcomment -%}
+<script>window.DW_CW_DATA="{{ 'dw-color-wheel-data.json' | asset_url }}";</script>
+<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 card hover label: Pattern, Color + Vendor on hover (2026-06-22) {%- endcomment -%}
+<script src="{{ 'dw-card-hover.js' | asset_url }}" defer></script>
+{%- comment -%} DW horizontal collapsible Boost filter bar (2026-06-22) {%- endcomment -%}
+{%- if template contains 'collection' or template contains 'search' -%}
+ {{ 'dw-hfilter.css' | asset_url | stylesheet_tag }}
+ <script src="{{ 'dw-hfilter.js' | asset_url }}" defer></script>
+{%- endif -%}
+{%- comment -%} DW PDP restyle: size <select> -> pills + uniform CTA pill layout (2026-06-22) {%- endcomment -%}
+{{ 'dw-pdp-restyle.css' | asset_url | stylesheet_tag }}
+<script src="{{ 'dw-pdp-size-pills.js' | asset_url }}" defer></script>
+ {%- comment -%}
+ newwall-infinite.js scoped 2026-06-23: only load on genuinely NATIVE-paginated
+ templates (blog, list/brand pages). It must NEVER load on collection or search
+ pages — those are Boost-powered, and the script would hide Boost's ul.pagination
+ and graft AJAX infinite-scroll onto a grid Boost owns. (The script also self-guards
+ on ul.pagination, but template-scoping is the hard fix.)
+ {%- endcomment -%}
+ {%- unless template contains 'collection' or template contains 'search' -%}
+ <script src="{{ 'newwall-infinite.js' | asset_url }}" defer></script>
+ {%- endunless -%}
+</body>
+</html>
diff --git a/pending-approval/toolbar-consolidation-assets/push-to-live.sh b/pending-approval/toolbar-consolidation-assets/push-to-live.sh
new file mode 100755
index 00000000..85f97231
--- /dev/null
+++ b/pending-approval/toolbar-consolidation-assets/push-to-live.sh
@@ -0,0 +1,84 @@
+#!/usr/bin/env bash
+# ============================================================================
+# DW Collection-Page Toolbar Consolidation — LIVE PUSH
+# Pushes 3 surgically-edited theme assets to the LIVE (role==main) theme.
+# Race-safe: resolves role==main dynamically, backs up each asset before PUT,
+# verifies byte-size after. Never hardcodes a theme id.
+#
+# Authored 2026-06-23 by vp-dw-commerce. Approved by Steve: ____________
+# ============================================================================
+set -euo pipefail
+
+TOKEN="$(grep -E '^SHOPIFY_THEME_TOKEN=' "$HOME/Projects/secrets-manager/.env" | cut -d= -f2-)"
+DOMAIN="designer-laboratory-sandbox.myshopify.com"
+VER="2024-10"
+SRC_DIR="$HOME/Projects/Designer-Wallcoverings/pending-approval/toolbar-consolidation-assets"
+BK_DIR="$HOME/Projects/Designer-Wallcoverings/shopify/theme-backups/toolbar-consolidation-$(date +%Y%m%d-%H%M%S)"
+mkdir -p "$BK_DIR"
+
+if [ -z "$TOKEN" ]; then echo "FATAL: SHOPIFY_THEME_TOKEN not found"; exit 1; fi
+
+# --- 1. Resolve the LIVE theme (role==main) dynamically ---
+LIVE="$(curl -s "https://$DOMAIN/admin/api/$VER/themes.json" \
+ -H "X-Shopify-Access-Token: $TOKEN" \
+ | python3 -c "import sys,json;print(next(t['id'] for t in json.load(sys.stdin)['themes'] if t['role']=='main'))")"
+if ! [[ "$LIVE" =~ ^[0-9]+$ ]]; then echo "FATAL: could not resolve role==main theme (got '$LIVE')"; exit 1; fi
+echo "LIVE theme (role==main) = $LIVE"
+echo "Backups -> $BK_DIR"
+echo
+
+enc() { python3 -c "import urllib.parse,sys;print(urllib.parse.quote(sys.argv[1]))" "$1"; }
+
+push_asset() {
+ local KEY="$1" SRCFILE="$2"
+ local ENC; ENC="$(enc "$KEY")"
+ local SAFE="${KEY//\//__}"
+
+ echo "==== $KEY ===="
+ # 1a. backup current live value
+ curl -s "https://$DOMAIN/admin/api/$VER/themes/$LIVE/assets.json?asset%5Bkey%5D=$ENC" \
+ -H "X-Shopify-Access-Token: $TOKEN" \
+ | python3 -c "
+import sys,json
+a=json.load(sys.stdin).get('asset')
+if not a or a.get('value') is None:
+ print(' WARN: no current value to back up (new asset?)'); sys.exit(0)
+open('$BK_DIR/$SAFE','w').write(a['value'])
+print(' backed up', len(a['value']), 'bytes ->', '$BK_DIR/$SAFE')
+"
+ # 1b. PUT the edited value
+ local PAYLOAD; PAYLOAD="$(python3 -c "
+import json,sys
+print(json.dumps({'asset':{'key':sys.argv[1],'value':open(sys.argv[2]).read()}}))
+" "$KEY" "$SRCFILE")"
+ local HTTP; HTTP="$(curl -s -o /tmp/_dw_put_resp.json -w '%{http_code}' -X PUT \
+ "https://$DOMAIN/admin/api/$VER/themes/$LIVE/assets.json" \
+ -H "X-Shopify-Access-Token: $TOKEN" -H "Content-Type: application/json" \
+ -d "$PAYLOAD")"
+ if [ "$HTTP" != "200" ] && [ "$HTTP" != "201" ]; then
+ echo " PUT FAILED http=$HTTP"; cat /tmp/_dw_put_resp.json; echo; return 1
+ fi
+ # 1c. verify size after
+ local EXPECT; EXPECT="$(wc -c < "$SRCFILE" | tr -d ' ')"
+ sleep 1
+ local ACTUAL; ACTUAL="$(curl -s "https://$DOMAIN/admin/api/$VER/themes/$LIVE/assets.json?asset%5Bkey%5D=$ENC" \
+ -H "X-Shopify-Access-Token: $TOKEN" \
+ | python3 -c "import sys,json;a=json.load(sys.stdin).get('asset');print(len(a.get('value') or '') if a else 0)")"
+ echo " PUT ok (http=$HTTP). expected ~${EXPECT}b, live now ${ACTUAL}b"
+ echo
+}
+
+# --- 2. Push the 3 consolidated assets ---
+push_asset "snippets/collection-toolbar.liquid" "$SRC_DIR/snippets__collection-toolbar.liquid"
+push_asset "sections/collection.liquid" "$SRC_DIR/sections__collection.liquid"
+push_asset "layout/theme.liquid" "$SRC_DIR/layout__theme.liquid"
+
+echo "============================================================"
+echo "DONE. Live theme $LIVE updated with the consolidated toolbar."
+echo "Verify in a real browser (hard-refresh / incognito):"
+echo " https://www.designerwallcoverings.com/collections/1838-wallcoverings"
+echo "Expect: 1 sort dropdown + 1 density slider + filter chips,"
+echo " density slider changes grid columns, and the"
+echo " 'addEventListener of null' pageerror is gone."
+echo "Rollback: restore any file from $BK_DIR via the same PUT."
+echo "============================================================"
diff --git a/pending-approval/toolbar-consolidation-assets/sections__collection.liquid b/pending-approval/toolbar-consolidation-assets/sections__collection.liquid
new file mode 100644
index 00000000..ce4f9e5e
--- /dev/null
+++ b/pending-approval/toolbar-consolidation-assets/sections__collection.liquid
@@ -0,0 +1,239 @@
+<script
+ type="application/json"
+ data-section-id="{{ section.id }}"
+ data-section-type="static-collection"
+>
+</script>
+
+{% liquid
+ assign products_per_page = section.settings.products_per_row | times: section.settings.number_of_rows
+ assign use_masonry = false
+
+ if section.settings.layout == 'masonry'
+ assign use_masonry = true
+ endif
+
+ assign show_filters = false
+ if section.settings.show_filters
+ assign show_filters = true
+ endif
+
+ assign show_sorting = false
+ if section.settings.sorting
+ assign show_sorting = true
+ endif
+
+ assign show_collection_image = false
+ if collection.image and section.settings.show_collection_image
+ assign show_collection_image = true
+ endif
+%}
+
+<div>
+ {% unless use_masonry %}
+ <h1 class="page-title">{{ collection.title }}</h1>
+ {% render 'breadcrumbs' %}
+ {% endunless %}
+
+ {% paginate collection.products by products_per_page %}
+ <section
+ class="collection collection-image--{{ show_collection_image }}"
+ data-product-hover="{{ settings.product_hover }}"
+ {% if use_masonry %}data-collection-masonry{% endif %}
+ data-section-id="{{ section.id }}"
+ data-section-type="collection">
+
+ {% if use_masonry or show_collection_image or collection.description != blank or show_sorting or show_filters %}
+ <div
+ class="
+ collection-header
+ {% if use_masonry %}
+ collection-header-alternate
+ {% endif %}
+ {% if show_filters and show_sorting %}
+ collection-header--filters-sort-enabled
+ {% endif %}
+ "
+ >
+ {% if show_collection_image %}
+ <div class="collection-featured-image">
+ {%
+ render 'rimg',
+ img: collection.image,
+ size: '1024x1024',
+ lazy: true,
+ %}
+ </div>
+ {% endif %}
+
+ <div class="collection-header-content">
+ {% if use_masonry %}
+ {% render 'breadcrumbs' %}
+ <h1 class="page-title">{{ collection.title }}</h1>
+ {% endif %}
+
+ {% if collection.description != blank and section.settings.show_description %}
+ <div class="collection-description rte">
+ {{ collection.description }}
+ </div>
+ {% endif %}
+
+ {% if show_filters or show_sorting %}
+ <div class="collection-filters">
+ {% if show_filters and collection.filters.size > 0 %}
+ <!-- Approach B: Horizontal filter bar (proxies to Boost's hidden controls) -->
+ {% render 'collection-filters-horizontal' %}
+
+ <!-- Boost native filters (hidden by Approach B CSS, powers the filtering) -->
+ <div class="faceted-filters" data-faceted-filter>
+ {%
+ render "faceted-filters",
+ filters: collection.filters,
+ class_prefix: 'collection',
+ %}
+ </div>
+ {% endif %}
+ {%- comment -%}
+ Native #sort-by dropdown removed 2026-06-23: sorting is now owned
+ exclusively by the canonical collection-toolbar snippet (#collectionSort)
+ rendered below, which carries the full DW sort set
+ (Newest/Color/Style/SKU/Title/Price). Keeping two sort controls
+ duplicated the UI.
+ {%- endcomment -%}
+ </div>
+ {% endif %}
+ </div>
+
+ {% if show_filters and collection.filters.size > 0 %}
+ {% for filter in collection.filters %}
+ {% if filter.active_values.size > 0 or filter.min_value.value or filter.max_value.value %}
+ {%-
+ render 'faceted-filters-active',
+ show_sorting: show_sorting,
+ filter: filter,
+ filters: collection.filters,
+ class_prefix: 'collection',
+ clear_url: collection.url,
+ %}
+ {% break %}
+ {% endif %}
+ {% endfor %}
+ {% endif %}
+ </div>
+ {% endif %}
+
+ <!-- Full Collection Toolbar: Sort + Grid Density Slider -->
+ {% include 'collection-toolbar' %}
+
+ <div
+ class="collection-products rows-of-{{ section.settings.products_per_row }} grid-cols-3"
+ data-collection-grid
+ {% if use_masonry %}data-masonry-grid{% endif %}
+ >
+ {%- if use_masonry -%}
+ <div class="product-grid-masonry-sizer" data-masonry-sizer></div>
+ {%- endif -%}
+
+ {%- if collection.handle == 'all' and collection.all_vendors.size == 0 and collection.all_types.size == 0 -%}
+ {%- for i in (1..section.settings.products_per_row) -%}
+ {%- capture productImage -%}
+ {%- cycle 'product-1', 'product-2', 'product-3' -%}
+ {%- endcapture -%}
+ {%- assign image = productImage | placeholder_svg_tag: 'placeholder-svg' -%}
+
+ {%- render 'home-onboard-product', image: image -%}
+ {%- endfor -%}
+ {%- else -%}
+ {% for product in collection.products %}
+ {%
+ render 'product-list-item',
+ product: product,
+ %}
+ {% else %}
+ {% capture continueLink %}
+ <a href="{{ routes.all_products_collection_url }}">{{ 'collections.collection.continue_link' | t }}</a>
+ {% endcapture %}
+ <p class="empty">{{ 'collections.collection.empty_html' | t: continue_link: continueLink }}</p>
+ {% endfor %}
+ {%- endif -%}
+ </div>
+ </section>
+
+ {%
+ render 'pagination',
+ paginate: paginate,
+ %}
+ {% endpaginate %}
+</div>
+
+{%- comment -%}
+ collection-grid-density.js include removed 2026-06-23: it queried
+ [data-collection-grid-slider] / [data-grid-density-value], which the current
+ toolbar markup never renders, so it was dead code. Grid density is now owned
+ solely by the canonical collection-toolbar snippet (#densitySlider).
+{%- endcomment -%}
+
+{% schema %}
+{
+ "name": "Collection pages",
+ "settings": [
+ {
+ "type": "checkbox",
+ "id": "show_collection_image",
+ "label": "Show collection image"
+ },
+ {
+ "type": "checkbox",
+ "id": "show_description",
+ "label": "Show description"
+ },
+ {
+ "type": "checkbox",
+ "id": "sorting",
+ "label": "Enable sorting",
+ "info": "Parameters include: best selling, A-Z, newest to oldest, etc."
+ },
+ {
+ "type": "checkbox",
+ "id": "show_filters",
+ "label": "Enable filtering",
+ "default": true
+ },
+ {
+ "type": "select",
+ "id": "layout",
+ "label": "Layout",
+ "options": [
+ {
+ "value": "default",
+ "label": "Default"
+ },
+ {
+ "value": "masonry",
+ "label": "Masonry"
+ }
+ ],
+ "default": "default"
+ },
+ {
+ "type": "range",
+ "id": "products_per_row",
+ "label": "Products per row",
+ "min": 2,
+ "max": 4,
+ "step": 1,
+ "default": 3
+ },
+ {
+ "type": "range",
+ "id": "number_of_rows",
+ "label": "Rows",
+ "min": 1,
+ "max": 12,
+ "step": 1,
+ "default": 3
+ }
+ ]
+}
+
+{% endschema %}
\ No newline at end of file
diff --git a/pending-approval/toolbar-consolidation-assets/snippets__collection-toolbar.liquid b/pending-approval/toolbar-consolidation-assets/snippets__collection-toolbar.liquid
new file mode 100644
index 00000000..d98bc3ba
--- /dev/null
+++ b/pending-approval/toolbar-consolidation-assets/snippets__collection-toolbar.liquid
@@ -0,0 +1,330 @@
+{%- comment -%}
+ Collection Toolbar — Horizontal sort + grid density slider + search
+ Replaces Shopify's native sorting/filtering UI with a unified toolbar.
+
+ Features:
+ - Sort dropdown (Newest, Color, Style, SKU, Title, Price)
+ - Grid density slider (3–12 columns)
+ - localStorage persistence
+ - Responsive mobile stacking
+
+ Revision: 2026-06-22
+{%- endcomment -%}
+
+<div class="collection-toolbar">
+ <style>
+ .collection-toolbar {
+ display: flex;
+ gap: 16px;
+ align-items: center;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ padding: 20px 0;
+ border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.1));
+ margin-bottom: 24px;
+ }
+
+ .toolbar-left {
+ display: flex;
+ gap: 14px;
+ align-items: center;
+ flex-wrap: nowrap;
+ min-width: 0;
+ }
+
+ .toolbar-label {
+ font-size: 11px;
+ letter-spacing: 0.22em;
+ text-transform: uppercase;
+ font-weight: 600;
+ color: var(--text-muted, rgba(0,0,0,0.6));
+ }
+
+ #collectionSort {
+ background: transparent;
+ border: 1px solid var(--border-color, rgba(0,0,0,0.12));
+ padding: 6px 10px;
+ font-family: inherit;
+ font-size: 12px;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ font-weight: 500;
+ color: var(--text-color, inherit);
+ cursor: pointer;
+ transition: all 0.2s ease;
+ min-width: 140px;
+ max-width: 100%;
+ overflow: visible;
+ }
+
+ #collectionSort:hover {
+ border-color: var(--accent-color, rgba(0,0,0,0.3));
+ }
+
+ #collectionSort:focus {
+ outline: 2px solid var(--accent-color, #000);
+ outline-offset: 2px;
+ }
+
+ .density-control {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 6px 0;
+ }
+
+ .density-control input[type="range"] {
+ flex: 0 0 120px;
+ -webkit-appearance: none;
+ appearance: none;
+ width: 120px;
+ height: 4px;
+ background: var(--border-color, rgba(0,0,0,0.15));
+ outline: none;
+ cursor: pointer;
+ border-radius: 2px;
+ }
+
+ .density-control input[type="range"]::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ appearance: none;
+ width: 13px;
+ height: 13px;
+ background: var(--accent-color, #000);
+ border-radius: 50%;
+ cursor: pointer;
+ transition: transform 0.2s ease;
+ }
+
+ .density-control input[type="range"]::-webkit-slider-thumb:hover {
+ transform: scale(1.2);
+ }
+
+ .density-control input[type="range"]::-moz-range-thumb {
+ width: 13px;
+ height: 13px;
+ background: var(--accent-color, #000);
+ border-radius: 50%;
+ border: 0;
+ cursor: pointer;
+ transition: transform 0.2s ease;
+ }
+
+ .density-control input[type="range"]::-moz-range-thumb:hover {
+ transform: scale(1.2);
+ }
+
+ .density-display {
+ font-size: 11px;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ font-weight: 600;
+ color: var(--text-muted, rgba(0,0,0,0.6));
+ min-width: 60px;
+ text-align: right;
+ }
+
+ .toolbar-search {
+ flex: 0 1 200px;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.1));
+ padding: 4px 0;
+ }
+
+ .toolbar-search input {
+ flex: 1;
+ background: transparent;
+ border: 0;
+ padding: 4px 0;
+ font-family: inherit;
+ font-size: 12px;
+ letter-spacing: 0.04em;
+ color: var(--text-color, inherit);
+ outline: none;
+ }
+
+ .toolbar-search input::placeholder {
+ color: var(--text-muted, rgba(0,0,0,0.4));
+ }
+
+ .toolbar-search svg {
+ width: 14px;
+ height: 14px;
+ stroke: var(--text-muted, rgba(0,0,0,0.4));
+ fill: none;
+ stroke-width: 1.5;
+ flex-shrink: 0;
+ }
+
+ /* Mobile responsive — hide density slider on mobile */
+ @media (max-width: 768px) {
+ .collection-toolbar {
+ gap: 12px;
+ }
+
+ .toolbar-left {
+ flex: 1 1 100%;
+ order: 1;
+ flex-wrap: wrap;
+ }
+
+ .toolbar-search {
+ flex: 1 1 100%;
+ order: 2;
+ margin-top: 8px;
+ }
+
+ .density-control {
+ display: none !important;
+ visibility: hidden !important;
+ width: 0 !important;
+ height: 0 !important;
+ margin: 0 !important;
+ padding: 0 !important;
+ border: 0 !important;
+ }
+ }
+
+ /* Extra-small devices — ensure slider is completely hidden */
+ @media (max-width: 480px) {
+ .density-control {
+ display: none !important;
+ visibility: hidden !important;
+ pointer-events: none !important;
+ }
+ }
+ </style>
+
+ <div class="toolbar-left">
+ <label for="collectionSort" class="toolbar-label">Sort</label>
+ <select id="collectionSort" aria-label="Sort products">
+ <option value="newest">Newest</option>
+ <option value="color">Color</option>
+ <option value="style">Style</option>
+ <option value="sku">SKU A→Z</option>
+ <option value="title">Title A→Z</option>
+ <option value="price-asc">Price ↑</option>
+ <option value="price-desc">Price ↓</option>
+ </select>
+
+ <div class="density-control">
+ <span class="toolbar-label">Grid</span>
+ <input type="range" id="densitySlider" min="3" max="12" value="4" aria-label="Grid density">
+ <div class="density-display"><span id="densityLabel">4</span> col</div>
+ </div>
+ </div>
+
+ {% if section.settings.show_search %}
+ <div class="toolbar-search">
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+ <circle cx="11" cy="11" r="8"></circle>
+ <path d="m21 21-4.35-4.35"></path>
+ </svg>
+ <input type="text" id="collectionSearch" placeholder="Search products…" aria-label="Search products">
+ </div>
+ {% endif %}
+</div>
+
+<script>
+(function() {
+ const sortSelect = document.getElementById('collectionSort');
+ const densitySlider = document.getElementById('densitySlider');
+ const densityLabel = document.getElementById('densityLabel');
+ const searchInput = document.getElementById('collectionSearch');
+ const STORAGE_KEY_SORT = 'dw_collection_sort';
+ const STORAGE_KEY_DENSITY = 'dw_collection_density';
+ const STORAGE_KEY_SEARCH = 'dw_collection_search';
+
+ // Hard guard: if the canonical toolbar markup isn't on this page, bail out
+ // entirely so a missing optional control (e.g. search when disabled) can never
+ // throw "Cannot read properties of null". 2026-06-23 consolidation.
+ if (!sortSelect || !densitySlider || !densityLabel) return;
+
+ // Load saved state
+ try {
+ const savedSort = localStorage.getItem(STORAGE_KEY_SORT);
+ if (savedSort) sortSelect.value = savedSort;
+
+ const savedDensity = localStorage.getItem(STORAGE_KEY_DENSITY);
+ if (savedDensity) {
+ densitySlider.value = savedDensity;
+ densityLabel.textContent = savedDensity;
+ updateGridDensity(parseInt(savedDensity));
+ }
+
+ const savedSearch = localStorage.getItem(STORAGE_KEY_SEARCH);
+ if (savedSearch && searchInput) searchInput.value = savedSearch;
+ } catch (e) {}
+
+ // Sort change
+ sortSelect.addEventListener('change', function() {
+ try { localStorage.setItem(STORAGE_KEY_SORT, this.value); } catch (e) {}
+ applySort(this.value);
+ });
+
+ // Density slider
+ densitySlider.addEventListener('input', function() {
+ const cols = parseInt(this.value);
+ densityLabel.textContent = cols;
+ try { localStorage.setItem(STORAGE_KEY_DENSITY, cols); } catch (e) {}
+ updateGridDensity(cols);
+ });
+
+ // Search (optional — only present when section.settings.show_search is on)
+ if (searchInput) {
+ searchInput.addEventListener('input', debounce(function() {
+ try { localStorage.setItem(STORAGE_KEY_SEARCH, this.value); } catch (e) {}
+ applySearch(this.value);
+ }, 300));
+ }
+
+ function updateGridDensity(cols) {
+ const productGrid = document.querySelector('.collection-products') || document.querySelector('[data-collection-grid]') || document.querySelector('[role="list"]') || document.querySelector('[data-product-grid]');
+ if (productGrid) {
+ productGrid.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
+ productGrid.setAttribute('data-cols', cols);
+ }
+ }
+
+ function applySort(mode) {
+ const url = new URL(window.location);
+ if (mode === 'newest') {
+ url.searchParams.delete('sort_by');
+ } else {
+ // Map DW sort modes to Shopify's sort_by values
+ const sortMap = {
+ 'title': 'title-ascending',
+ 'price-asc': 'price-ascending',
+ 'price-desc': 'price-descending'
+ };
+ url.searchParams.set('sort_by', sortMap[mode] || mode);
+ }
+ window.location.href = url.toString();
+ }
+
+ function applySearch(query) {
+ if (query.trim() === '') {
+ window.location.href = window.location.pathname;
+ } else {
+ const url = new URL(window.location);
+ url.searchParams.set('q', query);
+ window.location.href = url.toString();
+ }
+ }
+
+ function debounce(fn, delay) {
+ let timer;
+ return function(...args) {
+ clearTimeout(timer);
+ timer = setTimeout(() => fn.apply(this, args), delay);
+ };
+ }
+
+ // Initialize grid on page load
+ window.addEventListener('load', function() {
+ updateGridDensity(parseInt(densitySlider.value));
+ });
+})();
+</script>
← 4d3e8210 auto-save: 2026-06-23T14:22:11 (2 files) — shopify/tres-tint
·
back to Designer Wallcoverings
·
collections: add rendered hero design preview (Artmura/Fentu 418f8a16 →