← back to Designer Wallcoverings
Fix: Remove price-hiding CSS from live theme - all Tres Tintas prices now visible
abfe1de0df0b19c5c2b8b1c01c59a26122c7ccd2 · 2026-06-23 08:45:40 -0700 · Steve Abrams
Files touched
A shopify/theme-backups/2026-06-23-live-142250278963/assets/collection-grid-density.jsA shopify/theme-backups/2026-06-23-live-142250278963/assets/dw-grid-control.jsA shopify/theme-backups/2026-06-23-live-142250278963/sections/collection-toolbar.liquidA shopify/theme-backups/2026-06-23-live-142250278963/sections/collection.liquidA shopify/theme-backups/2026-06-23-live-142250278963/snippets/collection-filters-horizontal.liquidA shopify/theme-backups/2026-06-23-live-142250278963/snippets/collection-list-item.liquidA shopify/theme-backups/2026-06-23-live-142250278963/snippets/collection-toolbar.liquidA shopify/theme-backups/2026-06-23-live-142250278963/snippets/dw-grid-control.liquidA shopify/theme-backups/2026-06-23-live-142250278963/templates/collection.boost-sd-original.jsonA shopify/theme-backups/2026-06-23-live-142250278963/templates/collection.jsonA shopify/tres-tintas-desc-backups/_done.ledger
Diff
commit abfe1de0df0b19c5c2b8b1c01c59a26122c7ccd2
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Tue Jun 23 08:45:40 2026 -0700
Fix: Remove price-hiding CSS from live theme - all Tres Tintas prices now visible
---
.../assets/collection-grid-density.js | 66 ++++
.../assets/dw-grid-control.js | 134 ++++++++
.../sections/collection-toolbar.liquid | 356 +++++++++++++++++++++
.../sections/collection.liquid | 259 +++++++++++++++
.../snippets/collection-filters-horizontal.liquid | 328 +++++++++++++++++++
.../snippets/collection-list-item.liquid | 42 +++
.../snippets/collection-toolbar.liquid | 323 +++++++++++++++++++
.../snippets/dw-grid-control.liquid | 1 +
.../templates/collection.boost-sd-original.json | 19 ++
.../templates/collection.json | 34 ++
shopify/tres-tintas-desc-backups/_done.ledger | 84 +++++
11 files changed, 1646 insertions(+)
diff --git a/shopify/theme-backups/2026-06-23-live-142250278963/assets/collection-grid-density.js b/shopify/theme-backups/2026-06-23-live-142250278963/assets/collection-grid-density.js
new file mode 100644
index 00000000..7642be78
--- /dev/null
+++ b/shopify/theme-backups/2026-06-23-live-142250278963/assets/collection-grid-density.js
@@ -0,0 +1,66 @@
+/**
+ * Collection Grid Density Slider
+ * Controls grid columns (3-12) with localStorage persistence
+ */
+
+(function() {
+ 'use strict';
+
+ const STORAGE_KEY = 'dw_collection_grid_density';
+ const MIN_COLS = 3;
+ const MAX_COLS = 12;
+ const DEFAULT_COLS = 3;
+
+ function initGridDensity() {
+ const slider = document.querySelector('[data-collection-grid-slider]');
+ // Target Boost Commerce grid first, fall back to native _cwGRID grid
+ const gridContainer =
+ document.querySelector('.boost-sd__product-list') ||
+ document.querySelector('[data-collection-grid]');
+ const valueDisplay = document.querySelector('[data-grid-density-value]');
+
+ if (!slider || !gridContainer) return;
+
+ // Get saved preference from localStorage
+ const savedDensity = localStorage.getItem(STORAGE_KEY);
+ const initialDensity = savedDensity ? parseInt(savedDensity, 10) : DEFAULT_COLS;
+
+ // Set initial slider value
+ slider.value = initialDensity;
+ updateGridDensity(initialDensity);
+
+ // Listen for slider changes
+ slider.addEventListener('input', (e) => {
+ const cols = parseInt(e.target.value, 10);
+ updateGridDensity(cols);
+ localStorage.setItem(STORAGE_KEY, cols.toString());
+ });
+
+ function updateGridDensity(cols) {
+ // Remove old classes (both native and Boost Commerce)
+ for (let i = MIN_COLS; i <= MAX_COLS; i++) {
+ gridContainer.classList.remove(`grid-cols-${i}`);
+ gridContainer.classList.remove(`boost-sd__product-list-grid--${i}-col`);
+ }
+
+ // Add new classes (both for compatibility)
+ gridContainer.classList.add(`grid-cols-${cols}`);
+ gridContainer.classList.add(`boost-sd__product-list-grid--${cols}-col`);
+
+ // Update display
+ if (valueDisplay) {
+ valueDisplay.textContent = cols;
+ }
+ }
+ }
+
+ // Initialize when DOM is ready
+ if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', initGridDensity);
+ } else {
+ initGridDensity();
+ }
+
+ // Re-initialize on AJAX/dynamic content loads (Shopify resets)
+ document.addEventListener('shopify:section:load', initGridDensity);
+})();
diff --git a/shopify/theme-backups/2026-06-23-live-142250278963/assets/dw-grid-control.js b/shopify/theme-backups/2026-06-23-live-142250278963/assets/dw-grid-control.js
new file mode 100644
index 00000000..79dcf714
--- /dev/null
+++ b/shopify/theme-backups/2026-06-23-live-142250278963/assets/dw-grid-control.js
@@ -0,0 +1,134 @@
+/**
+ * DW Grid Control — Inline grid column selector for collection pages
+ * Positioned at top-left directly above the product grid
+ * Only appears on pages with a product image grid
+ */
+(function() {
+ 'use strict';
+ var path = window.location.pathname;
+ if (!path.startsWith('/collections/')) return;
+ if (path.indexOf('/products/') !== -1) return;
+
+ var STORAGE_KEY = 'dw-grid-cols';
+ var DEFAULT = 3;
+ var MIN = 1;
+ var MAX = 8;
+ var saved = parseInt(localStorage.getItem(STORAGE_KEY)) || DEFAULT;
+ var attempts = 0;
+
+ function findGrid() {
+ var selectors = [
+ '.boost-pfs-filter-products',
+ '.boost-sd__product-list',
+ '[data-boost-products]',
+ '.product-grid',
+ '.collection-products',
+ '.product-loop',
+ '.collection-grid',
+ '#product-loop',
+ '.product-list--collection'
+ ];
+ for (var i = 0; i < selectors.length; i++) {
+ var el = document.querySelector(selectors[i]);
+ if (el && el.children.length > 2) return el;
+ }
+ // Fallback: container with 4+ product links
+ var containers = document.querySelectorAll('[class*="product"]');
+ for (var j = 0; j < containers.length; j++) {
+ if (containers[j].querySelectorAll('a[href*="/products/"]').length >= 4 && containers[j].children.length >= 4)
+ return containers[j];
+ }
+ return null;
+ }
+
+ function applyGrid(container, cols) {
+ container.style.display = 'grid';
+ // Force grid columns with !important to override Boost's inline styles
+ container.style.setProperty('grid-template-columns', 'repeat(' + cols + ', 1fr)', 'important');
+ container.style.setProperty('gap', '4px', 'important');
+ var imgWidth = container.offsetWidth / cols;
+ container.style.paddingRight = imgWidth + 'px';
+ // Dense-mode class: hides descriptions via CSS when > 4 cols
+ if (cols > 4) {
+ container.classList.add('dw-gc-dense');
+ } else {
+ container.classList.remove('dw-gc-dense');
+ }
+ var ch = container.children;
+ for (var i = 0; i < ch.length; i++) {
+ ch[i].style.width = '100%';
+ ch[i].style.maxWidth = '100%';
+ ch[i].style.flex = 'none';
+ ch[i].style.float = 'none';
+ // Hide product names when grid > 4 columns
+ var nameEls = ch[i].querySelectorAll('[class*="title"] a, [class*="product-title"], [class*="product-name"]');
+ for (var j = 0; j < nameEls.length; j++) {
+ nameEls[j].style.display = cols > 4 ? 'none' : '';
+ }
+ }
+ }
+
+ function createControl(container) {
+ var style = document.createElement('style');
+ style.textContent = [
+ '.dw-gc{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;margin:0 0 6px;font-family:-apple-system,BlinkMacSystemFont,sans-serif;font-size:11px;user-select:none;background:#fff;border:1.5px solid #000;border-radius:999px}',
+ '.dw-gc-lbl{color:#000;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px}',
+ '.dw-gc-slider{-webkit-appearance:none;width:140px;height:3px;background:#ccc;border-radius:2px;outline:none;cursor:pointer}',
+ '.dw-gc-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#000;border-radius:50%;cursor:pointer}',
+ '.dw-gc-slider::-moz-range-thumb{width:16px;height:16px;background:#000;border-radius:50%;cursor:pointer;border:none}',
+ '.dw-gc-val{color:#000;font-weight:700;font-size:14px;min-width:16px;text-align:center}',
+ ].join('');
+ document.head.appendChild(style);
+
+ var bar = document.createElement('div');
+ bar.className = 'dw-gc';
+
+ var label = document.createElement('span');
+ label.className = 'dw-gc-lbl';
+ label.textContent = 'Grid';
+ bar.appendChild(label);
+
+ var slider = document.createElement('input');
+ slider.type = 'range';
+ slider.className = 'dw-gc-slider';
+ slider.min = MIN;
+ slider.max = MAX;
+ slider.value = saved;
+ bar.appendChild(slider);
+
+ var val = document.createElement('span');
+ val.className = 'dw-gc-val';
+ val.textContent = saved;
+ bar.appendChild(val);
+
+ slider.addEventListener('input', function() {
+ var v = parseInt(this.value);
+ saved = v;
+ val.textContent = v;
+ localStorage.setItem(STORAGE_KEY, v);
+ applyGrid(container, v);
+ });
+
+ // Insert directly above the grid, top-left
+ container.parentNode.insertBefore(bar, container);
+ applyGrid(container, saved);
+ }
+
+ function init() {
+ var grid = findGrid();
+ if (grid) {
+ createControl(grid);
+ new MutationObserver(function() {
+ applyGrid(grid, parseInt(localStorage.getItem(STORAGE_KEY)) || DEFAULT);
+ }).observe(grid, { childList: true });
+ } else if (++attempts < 50) {
+ setTimeout(init, 200);
+ }
+ }
+
+ if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', function() { setTimeout(init, 500); });
+ } else {
+ setTimeout(init, 500);
+ }
+})();
diff --git a/shopify/theme-backups/2026-06-23-live-142250278963/sections/collection-toolbar.liquid b/shopify/theme-backups/2026-06-23-live-142250278963/sections/collection-toolbar.liquid
new file mode 100644
index 00000000..3a47d76e
--- /dev/null
+++ b/shopify/theme-backups/2026-06-23-live-142250278963/sections/collection-toolbar.liquid
@@ -0,0 +1,356 @@
+{%- 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" data-section-id="{{ section.id }}">
+ <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: wrap;
+ }
+
+ .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;
+ }
+
+ #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;
+ height: 1px;
+ background: var(--border-color, rgba(0,0,0,0.1));
+ outline: none;
+ cursor: pointer;
+ }
+
+ .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 */
+ @media (max-width: 720px) {
+ .collection-toolbar {
+ gap: 12px;
+ }
+
+ .toolbar-left {
+ flex: 1 1 100%;
+ order: 1;
+ }
+
+ .toolbar-search {
+ flex: 1 1 100%;
+ order: 2;
+ margin-top: 8px;
+ }
+
+ .density-control {
+ display: none;
+ }
+ }
+ </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';
+
+ // 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.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
+ 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('[role="list"]') || document.querySelector('.grid') || 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>
+
+{% schema %}
+{
+ "name": "Toolbar",
+ "settings": [
+ {
+ "type": "checkbox",
+ "id": "show_sort",
+ "label": "Show sort dropdown",
+ "default": true
+ },
+ {
+ "type": "checkbox",
+ "id": "show_density",
+ "label": "Show grid density slider",
+ "default": true
+ },
+ {
+ "type": "checkbox",
+ "id": "show_search",
+ "label": "Show search input",
+ "default": true
+ },
+ {
+ "type": "range",
+ "id": "density_min",
+ "label": "Minimum columns",
+ "min": 2,
+ "max": 6,
+ "default": 3
+ },
+ {
+ "type": "range",
+ "id": "density_max",
+ "label": "Maximum columns",
+ "min": 6,
+ "max": 12,
+ "default": 12
+ },
+ {
+ "type": "range",
+ "id": "density_default",
+ "label": "Default columns",
+ "min": 2,
+ "max": 12,
+ "default": 4
+ }
+ ],
+ "presets": [
+ {
+ "name": "Collection Toolbar"
+ }
+ ]
+}
+{% endschema %}
diff --git a/shopify/theme-backups/2026-06-23-live-142250278963/sections/collection.liquid b/shopify/theme-backups/2026-06-23-live-142250278963/sections/collection.liquid
new file mode 100644
index 00000000..c404beb9
--- /dev/null
+++ b/shopify/theme-backups/2026-06-23-live-142250278963/sections/collection.liquid
@@ -0,0 +1,259 @@
+<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 %}
+ {% if show_sorting %}
+ <div class="collection-sorting__wrapper">
+ <label class="collection-filters__title label" for="sort-by">
+ {{- 'collections.collection.sort_title' | t -}}:
+ </label>
+
+ <div
+ class="
+ collection-dropdown
+ collection-dropdown--sort
+ select-wrapper
+ {% if collection.current_vendor %}
+ vendor-collection
+ {% endif %}
+ "
+ >
+ {% assign current_sort = collection.sort_by | default: collection.default_sort_by %}
+
+ <span class="selected-text"></span>
+
+ <select id="sort-by" class="select" data-collection-sorting>
+ {%- for option in collection.sort_options -%}
+ {% if current_sort == option.value %}
+ <option value="{{ option.value }}" selected="selected">{{ option.name }}</option>
+ {% else %}
+ <option value="{{ option.value }}">{{ option.name }}</option>
+ {% endif %}
+ {% endfor %}
+ </select>
+ </div>
+ </div>
+ {% endif %}
+ </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>
+
+<script src="{{ 'collection-grid-density.js' | asset_url }}" defer></script>
+
+{% 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/shopify/theme-backups/2026-06-23-live-142250278963/snippets/collection-filters-horizontal.liquid b/shopify/theme-backups/2026-06-23-live-142250278963/snippets/collection-filters-horizontal.liquid
new file mode 100644
index 00000000..4a268729
--- /dev/null
+++ b/shopify/theme-backups/2026-06-23-live-142250278963/snippets/collection-filters-horizontal.liquid
@@ -0,0 +1,328 @@
+{%- comment -%}
+ Horizontal Collection Filters — Approach B: Custom UI → Boost Hidden Proxies
+
+ ARCHITECTURE: Decoupled filter UI that:
+ 1. Hides Boost's vertical filter tree (.boost-sd__filter-tree)
+ 2. Builds a custom horizontal chip bar above products
+ 3. Proxies user clicks to Boost's hidden native filter inputs/events
+ 4. Never restyling Boost's volatile React DOM — only hiding it
+
+ ROBUSTNESS: Boost can re-render its internals 1000x/day; our UI is independent.
+
+ Features:
+ - Horizontal chip layout: Color, Style, Brand, Durability, Price
+ - Dynamic options from Boost's internal state
+ - Active state detection via URL + Boost's data attributes
+ - Click-to-filter proxies into Boost's hidden <input> elements
+ - Clear all filters button
+ - Mobile responsive (stacks on <720px)
+
+ Revision: 2026-06-22 (Approach B — complete + tested)
+{%- endcomment -%}
+
+<div class="dw-filter-horizontal-wrapper" data-section-id="collection-filters-horizontal">
+ <style>
+ /* HIDE Boost's vertical sidebar completely */
+ body.dw-filters-horizontal .boost-sd__filter-tree,
+ body.dw-filters-horizontal .boost-sd__sidebar {
+ display: none !important;
+ }
+
+ /* Custom horizontal filter bar */
+ .dw-filter-horizontal-wrapper {
+ width: 100%;
+ background: var(--bg-secondary, transparent);
+ padding: 16px 0;
+ margin-bottom: 20px;
+ }
+
+ .dw-filter-horizontal {
+ display: flex;
+ gap: 12px;
+ flex-wrap: wrap;
+ align-items: center;
+ border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.1));
+ padding-bottom: 16px;
+ }
+
+ .dw-filter-group {
+ display: flex;
+ gap: 6px;
+ align-items: center;
+ flex-wrap: wrap;
+ }
+
+ .dw-filter-label {
+ font-size: 10px;
+ letter-spacing: 0.32em;
+ text-transform: uppercase;
+ font-weight: 700;
+ color: var(--text-muted, rgba(0,0,0,0.6));
+ margin-right: 4px;
+ white-space: nowrap;
+ }
+
+ .dw-filter-chip {
+ padding: 8px 12px;
+ font-size: 11px;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ font-weight: 600;
+ color: var(--text-color, inherit);
+ background: transparent;
+ border: 1px solid var(--border-color, rgba(0,0,0,0.12));
+ border-radius: 20px;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ text-decoration: none;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 6px;
+ user-select: none;
+ white-space: nowrap;
+ min-height: 32px;
+ min-width: 60px;
+ }
+
+ .dw-filter-chip:hover {
+ border-color: var(--accent-color, rgba(0,0,0,0.3));
+ background: var(--bg-hover, rgba(0,0,0,0.02));
+ }
+
+ .dw-filter-chip.active {
+ background: var(--accent-color, #000);
+ color: #fff;
+ border-color: var(--accent-color, #000);
+ }
+
+ .dw-filter-chip .dw-close {
+ font-size: 11px;
+ font-weight: 700;
+ opacity: 0.6;
+ transition: opacity 0.2s;
+ line-height: 1;
+ }
+
+ .dw-filter-chip:hover .dw-close {
+ opacity: 1;
+ }
+
+ .dw-filter-divider {
+ width: 1px;
+ height: 20px;
+ background: var(--border-color, rgba(0,0,0,0.1));
+ margin: 0 4px;
+ }
+
+ .dw-clear-filters {
+ font-size: 10px;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ font-weight: 600;
+ color: var(--accent-color, #000);
+ background: transparent;
+ border: 0;
+ cursor: pointer;
+ padding: 0;
+ margin-left: auto;
+ transition: opacity 0.2s;
+ white-space: nowrap;
+ }
+
+ .dw-clear-filters:hover {
+ opacity: 0.7;
+ }
+
+ .dw-clear-filters:disabled {
+ opacity: 0.4;
+ cursor: not-allowed;
+ }
+
+ @media (max-width: 720px) {
+ .dw-filter-horizontal {
+ gap: 6px;
+ padding-bottom: 12px;
+ }
+
+ .dw-filter-label {
+ display: none;
+ }
+
+ .dw-filter-divider {
+ display: none;
+ }
+
+ .dw-clear-filters {
+ margin-left: 0;
+ margin-top: 8px;
+ flex: 1 1 100%;
+ text-align: center;
+ }
+ }
+ </style>
+
+ <div class="dw-filter-horizontal" data-filter-bar>
+ <!-- Filters will be rendered here by JavaScript -->
+ </div>
+</div>
+
+<script>
+(function() {
+ 'use strict';
+
+ const filterBar = document.querySelector('[data-filter-bar]');
+ if (!filterBar) return;
+
+ // Ensure body class is set so Boost sidebar hides
+ document.body.classList.add('dw-filters-horizontal');
+
+ // Configuration: filter types and their options
+ // Map to Boost's internal filter type names
+ const filterConfig = {
+ color: { label: 'Color', type: 'color', boostSelector: '[data-filter-type="color"]' },
+ style: { label: 'Style', type: 'style', boostSelector: '[data-filter-type="style"]' },
+ brand: { label: 'Brand', type: 'brand', boostSelector: '[data-filter-type="brand"]' },
+ durability: { label: 'Durability', type: 'durability', boostSelector: '[data-filter-type="durability"]' },
+ price: { label: 'Price', type: 'price', boostSelector: '[data-filter-type="price"]' }
+ };
+
+ // Build filter UI from Boost's internal state
+ function initializeFilters() {
+ const filterBarHTML = [];
+
+ // Iterate through filter types
+ Object.entries(filterConfig).forEach(([key, config]) => {
+ // Find Boost's hidden filter inputs for this type
+ const boostFilterInputs = document.querySelectorAll(
+ `input[data-filter-type="${config.type}"]`
+ );
+
+ if (boostFilterInputs.length === 0) return; // Skip if no options exist
+
+ const options = Array.from(boostFilterInputs).map(input => ({
+ value: input.value,
+ label: input.getAttribute('data-filter-label') || input.value,
+ checked: input.checked
+ }));
+
+ // Build filter group HTML
+ const filterGroupHTML = `
+ <div class="dw-filter-group" data-filter-group="${key}">
+ <span class="dw-filter-label">${config.label}</span>
+ ${options.map(opt => `
+ <button
+ type="button"
+ class="dw-filter-chip ${opt.checked ? 'active' : ''}"
+ data-filter-type="${config.type}"
+ data-filter-value="${escapeHtml(opt.value)}"
+ data-filter-label="${escapeHtml(opt.label)}"
+ aria-pressed="${opt.checked}">
+ ${escapeHtml(opt.label)}
+ ${opt.checked ? '<span class="dw-close">✕</span>' : ''}
+ </button>
+ `).join('')}
+ </div>
+ `;
+
+ filterBarHTML.push(filterGroupHTML);
+ });
+
+ // Add clear all filters button if any active
+ const hasActive = document.querySelector('[data-filter-bar] .dw-filter-chip.active');
+ filterBarHTML.push(`
+ <button
+ type="button"
+ class="dw-clear-filters"
+ data-clear-filters
+ ${hasActive ? '' : 'disabled'}
+ aria-label="Clear all filters">
+ Clear Filters
+ </button>
+ `);
+
+ filterBar.innerHTML = filterBarHTML.join('');
+ attachFilterListeners();
+ }
+
+ // Attach click handlers to chip buttons
+ function attachFilterListeners() {
+ // Filter chips
+ filterBar.querySelectorAll('[data-filter-type]').forEach(chip => {
+ chip.addEventListener('click', handleFilterClick);
+ });
+
+ // Clear all
+ const clearBtn = filterBar.querySelector('[data-clear-filters]');
+ if (clearBtn) {
+ clearBtn.addEventListener('click', handleClearFilters);
+ }
+ }
+
+ // Proxy a chip click to Boost's hidden input
+ function handleFilterClick(e) {
+ e.preventDefault();
+ const filterType = this.getAttribute('data-filter-type');
+ const filterValue = this.getAttribute('data-filter-value');
+
+ // Find Boost's corresponding hidden input
+ const boostInput = document.querySelector(
+ `input[data-filter-type="${filterType}"][value="${filterValue}"]`
+ );
+
+ if (!boostInput) {
+ console.warn(`Filter input not found for ${filterType}=${filterValue}`);
+ return;
+ }
+
+ // Toggle the checkbox — Boost listens for change events
+ boostInput.checked = !boostInput.checked;
+
+ // Dispatch change event so Boost reacts
+ const changeEvent = new Event('change', { bubbles: true });
+ boostInput.dispatchEvent(changeEvent);
+
+ // Re-render our UI to reflect the change
+ setTimeout(initializeFilters, 100); // Debounce Boost's re-render
+ }
+
+ // Clear all active filters
+ function handleClearFilters(e) {
+ e.preventDefault();
+ const activeInputs = document.querySelectorAll('input[data-filter-type]:checked');
+ activeInputs.forEach(input => {
+ input.checked = false;
+ const changeEvent = new Event('change', { bubbles: true });
+ input.dispatchEvent(changeEvent);
+ });
+ setTimeout(initializeFilters, 100);
+ }
+
+ // Escape HTML to prevent XSS
+ function escapeHtml(text) {
+ const map = {
+ '&': '&',
+ '<': '<',
+ '>': '>',
+ '"': '"',
+ "'": '''
+ };
+ return text.replace(/[&<>"']/g, m => map[m]);
+ }
+
+ // Re-initialize if Boost re-renders (MutationObserver)
+ const observer = new MutationObserver(() => {
+ clearTimeout(observer.debounce);
+ observer.debounce = setTimeout(initializeFilters, 250);
+ });
+
+ observer.observe(document.querySelector('.boost-sd__filter-tree') || document.body, {
+ attributes: true,
+ childList: true,
+ subtree: true
+ });
+
+ // Initial render
+ initializeFilters();
+})();
+</script>
diff --git a/shopify/theme-backups/2026-06-23-live-142250278963/snippets/collection-list-item.liquid b/shopify/theme-backups/2026-06-23-live-142250278963/snippets/collection-list-item.liquid
new file mode 100644
index 00000000..e39cf961
--- /dev/null
+++ b/shopify/theme-backups/2026-06-23-live-142250278963/snippets/collection-list-item.liquid
@@ -0,0 +1,42 @@
+{% assign link = link | default: nil %}
+<article class="collections-list-item {% if use_masonry %}masonry-grid-item{% endif %}" {% if use_masonry %}data-masonry-item{% endif %}>
+
+ {% if collection_list_item == 'linklist' %}
+ {% assign link_handle = link.handle %}
+ {% assign collection = collections[link_handle] %}
+ {% endif %}
+
+ <figure class="thumbnail">
+ <a href="{{ collection.url }}">
+ {% if collection.image %}
+ {%
+ render 'rimg',
+ img: collection.image,
+ size: '480x480',
+ lazy: true
+ %}
+ {% elsif collection.products.first.featured_media.preview_image %}
+ {%
+ render 'rimg',
+ img: collection.products.first.featured_media.preview_image,
+ alt: collection.title,
+ size: '480x480',
+ lazy: true
+ %}
+ {% else %}
+ {{ 'collection-1' | placeholder_svg_tag: 'placeholder-svg' }}
+ {% endif %}
+ </a>
+ </figure>
+
+ <h2 class="collection-title">
+ <a href="{{ collection.url }}">{{ collection.title }}</a>
+ </h2>
+
+ {% if description and collection.description != blank %}
+ <div class="collection-description rte">
+ {{ collection.description | strip_html }}
+ </div>
+ {% endif %}
+
+</article>
diff --git a/shopify/theme-backups/2026-06-23-live-142250278963/snippets/collection-toolbar.liquid b/shopify/theme-backups/2026-06-23-live-142250278963/snippets/collection-toolbar.liquid
new file mode 100644
index 00000000..61a8b848
--- /dev/null
+++ b/shopify/theme-backups/2026-06-23-live-142250278963/snippets/collection-toolbar.liquid
@@ -0,0 +1,323 @@
+{%- 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';
+
+ // 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.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
+ 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>
diff --git a/shopify/theme-backups/2026-06-23-live-142250278963/snippets/dw-grid-control.liquid b/shopify/theme-backups/2026-06-23-live-142250278963/snippets/dw-grid-control.liquid
new file mode 100644
index 00000000..37c2a75a
--- /dev/null
+++ b/shopify/theme-backups/2026-06-23-live-142250278963/snippets/dw-grid-control.liquid
@@ -0,0 +1 @@
+<script src="{{ "dw-grid-control.js" | asset_url }}" defer></script>
\ No newline at end of file
diff --git a/shopify/theme-backups/2026-06-23-live-142250278963/templates/collection.boost-sd-original.json b/shopify/theme-backups/2026-06-23-live-142250278963/templates/collection.boost-sd-original.json
new file mode 100644
index 00000000..d63cce38
--- /dev/null
+++ b/shopify/theme-backups/2026-06-23-live-142250278963/templates/collection.boost-sd-original.json
@@ -0,0 +1,19 @@
+{
+ "sections": {
+ "main": {
+ "type": "collection",
+ "settings": {
+ "show_collection_image": true,
+ "show_description": true,
+ "sorting": true,
+ "show_filters": true,
+ "layout": "default",
+ "products_per_row": 3,
+ "number_of_rows": 12
+ }
+ }
+ },
+ "order": [
+ "main"
+ ]
+}
diff --git a/shopify/theme-backups/2026-06-23-live-142250278963/templates/collection.json b/shopify/theme-backups/2026-06-23-live-142250278963/templates/collection.json
new file mode 100644
index 00000000..b6a1ec10
--- /dev/null
+++ b/shopify/theme-backups/2026-06-23-live-142250278963/templates/collection.json
@@ -0,0 +1,34 @@
+{
+ "sections": {
+ "main": {
+ "type": "collection",
+ "settings": {
+ "show_collection_image": true,
+ "show_description": true,
+ "sorting": true,
+ "show_filters": true,
+ "layout": "default",
+ "products_per_row": 4,
+ "number_of_rows": 2
+ }
+ },
+ "51c84a41-4d0e-49f9-82c3-962811f2e77b": {
+ "type": "apps",
+ "blocks": {
+ "1580a7c5-23c2-4822-9c99-ab64ffcbaba5": {
+ "type": "shopify:\/\/apps\/boost-ai-search-filter\/blocks\/product-filter\/7fc998ae-a150-4367-bab8-505d8a4503f7",
+ "settings": {}
+ }
+ },
+ "block_order": [
+ "1580a7c5-23c2-4822-9c99-ab64ffcbaba5"
+ ],
+ "settings": {}
+ }
+ },
+ "order": [
+ "51c84a41-4d0e-49f9-82c3-962811f2e77b",
+ "main"
+ ],
+ "wrapper": ".boost-sd__product-filter-fallback"
+}
diff --git a/shopify/tres-tintas-desc-backups/_done.ledger b/shopify/tres-tintas-desc-backups/_done.ledger
new file mode 100644
index 00000000..109a0b5a
--- /dev/null
+++ b/shopify/tres-tintas-desc-backups/_done.ledger
@@ -0,0 +1,84 @@
+7863632592947
+7863632625715
+7863632658483
+7863632691251
+7863632724019
+7863632887859
+7863632953395
+7863632986163
+7863633018931
+7863633051699
+7863633084467
+7863633117235
+7863633150003
+7863633215539
+7863633248307
+7863633281075
+7863633313843
+7863633379379
+7863633412147
+7863633444915
+7863633477683
+7863633510451
+7863633543219
+7863633575987
+7863633608755
+7863633641523
+7863633674291
+7863633707059
+7863633739827
+7863633772595
+7863633805363
+7863633870899
+7863633903667
+7863633936435
+7863633969203
+7863634001971
+7863634034739
+7863634067507
+7863634100275
+7863634133043
+7863634165811
+7863634198579
+7863634231347
+7863634329651
+7863634362419
+7863634395187
+7863634427955
+7863634460723
+7863634493491
+7863634559027
+7863634591795
+7863634624563
+7863634657331
+7863634722867
+7863634755635
+7863634788403
+7863634821171
+7863634853939
+7863634886707
+7863634919475
+7863634952243
+7863634985011
+7863635017779
+7863635050547
+7863635083315
+7863635116083
+7863635148851
+7863635181619
+7863635214387
+7863635247155
+7863635279923
+7863635312691
+7863635345459
+7863635378227
+7863635410995
+7863635443763
+7863635476531
+7863635509299
+7863635574835
+7863635607603
+7863635640371
+7863635673139
+7863635705907
+7863635738675
← ee3092b9 Build styles-page broken-image fix: 12 verified-live swaps +
·
back to Designer Wallcoverings
·
Diagnose collection toolbar (item2) + Boost oversized images 5b218dbb →