← back to Designer Wallcoverings
PDP color section → full-width color bar (Steve 2026-07-28)
b501abaf6191517e1564dfd7fb9847b7d18f90cd · 2026-07-28 10:05:16 -0700 · steve@designerwallcoverings.com
- color-palette.liquid: 'Colors In This Pattern' → 'Select Color for Coordinates';
dots collapsed into ONE full-width color bar (~4x height); end drag-handles
expand/contract color count (replaces the 'Colors shown' slider); removed the
names+% legend and thin proportion bar.
- product.liquid: keywords now full-width (removed 80ch cap + 96-char hard wrap);
removed the black 'Design Coordinate' banner + panel entirely (DTD: remove feature).
- Pushed live to theme 144396058675 (PUT 200); verified on live PDP.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Files touched
A shopify/theme-LIVE-pull-20260728-colorbar/sections/product.liquidA shopify/theme-LIVE-pull-20260728-colorbar/snippets/color-palette.liquid
Diff
commit b501abaf6191517e1564dfd7fb9847b7d18f90cd
Author: steve@designerwallcoverings.com <steve@designerwallcoverings.com>
Date: Tue Jul 28 10:05:16 2026 -0700
PDP color section → full-width color bar (Steve 2026-07-28)
- color-palette.liquid: 'Colors In This Pattern' → 'Select Color for Coordinates';
dots collapsed into ONE full-width color bar (~4x height); end drag-handles
expand/contract color count (replaces the 'Colors shown' slider); removed the
names+% legend and thin proportion bar.
- product.liquid: keywords now full-width (removed 80ch cap + 96-char hard wrap);
removed the black 'Design Coordinate' banner + panel entirely (DTD: remove feature).
- Pushed live to theme 144396058675 (PUT 200); verified on live PDP.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
.../sections/product.liquid | 342 +++++++++++
.../snippets/color-palette.liquid | 677 +++++++++++++++++++++
2 files changed, 1019 insertions(+)
diff --git a/shopify/theme-LIVE-pull-20260728-colorbar/sections/product.liquid b/shopify/theme-LIVE-pull-20260728-colorbar/sections/product.liquid
new file mode 100644
index 00000000..e3d316af
--- /dev/null
+++ b/shopify/theme-LIVE-pull-20260728-colorbar/sections/product.liquid
@@ -0,0 +1,342 @@
+{% render 'breadcrumbs' %}
+
+{% liquid
+ assign enable_zoom = section.settings.enable_zoom
+ assign enable_cart_redirection = section.settings.enable_cart_redirection
+ assign images_layout = section.settings.images_layout
+ assign enable_video_autoplay = section.settings.enable_video_autoplay
+ assign enable_video_looping = section.settings.enable_video_looping
+ assign enable_linked_options = true
+ assign show_vendor = settings.show_vendor
+ assign show_social_media_icons = section.settings.show_social_media_icons
+ assign show_payment_button = section.settings.show_payment_button
+
+ for block in section.blocks
+ if block.type == 'complementary_products'
+ assign product_recommendation_limit = block.settings.product_recommendation_limit
+ break
+ endif
+ endfor
+%}
+
+{% if images_layout == 'masonry' %}
+ {% comment %}Related products in masonry grid must be below product{% endcomment %}
+ {% assign related_products_position_right = false %}
+{% endif %}
+
+<script
+ type="application/json"
+ data-section-type="product"
+ data-section-id="{{ section.id }}"
+ data-section-data
+>
+ {
+ "product": {{ product | json }},
+ "product_settings": {
+ "addToCartText": {{ 'products.product.add_to_cart' | t | json }},
+ "enableHistory": true,
+ "processingText": {{ 'products.product.processing' | t | json }},
+ "setQuantityText": {{ 'products.product.set_quantity' | t | json }},
+ "soldOutText": {{ 'products.product.sold_out' | t | json }},
+ "unavailableText": {{ 'products.product.unavailable' | t | json }}
+ },
+ "images_layout": {{ images_layout | json }},
+ "enable_zoom": {{ enable_zoom | json }},
+ "enable_video_autoplay": {{ enable_video_autoplay | json }},
+ "enable_video_looping": {{ enable_video_looping | json }},
+ "enable_cart_redirection": {{ enable_cart_redirection | json }},
+ "enable_fixed_positioning": true,
+ "product_recommendation_limit": {{ product_recommendation_limit | json }}
+ }
+</script>
+
+{% render 'product-success-labels' %}
+<section class="product-container">
+ {%
+ render 'product',
+ product: product,
+ enable_zoom: enable_zoom,
+ images_layout: images_layout,
+ enable_linked_options: enable_linked_options,
+ show_vendor: show_vendor,
+ show_social_media_icons: show_social_media_icons,
+ show_payment_button: show_payment_button,
+ %}
+
+ {%- comment -%} Design Coordinate feature removed from the PDP (Steve 2026-07-28, DTD: "remove feature entirely"). {%- endcomment -%}
+
+ <div
+ class="product-recommendations-wrapper--right"
+ data-product-recommendations-right
+ >
+ </div>
+</section>
+
+{% schema %}
+{
+ "name": "Product pages",
+ "settings": [
+ {
+ "type": "checkbox",
+ "id": "enable_cart_redirection",
+ "label": "Enable cart redirection",
+ "info": "Automatically sends users to the Cart page after adding a product.",
+ "default": false
+ },
+ {
+ "type": "checkbox",
+ "id": "show_payment_button",
+ "label": "Show dynamic checkout button",
+ "info": "Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
+ "default": true
+ },
+ {
+ "type": "header",
+ "content": "Media"
+ },
+ {
+ "type": "paragraph",
+ "content": "Learn more about [media types](https://help.shopify.com/en/manual/products/product-media/product-media-types)"
+ },
+ {
+ "type": "select",
+ "id": "images_layout",
+ "label": "Layout",
+ "options": [
+ {
+ "label": "Slideshow",
+ "value": "slideshow"
+ },
+ {
+ "label": "List",
+ "value": "list"
+ },
+ {
+ "label": "Masonry",
+ "value": "masonry"
+ }
+ ],
+ "default": "slideshow"
+ },
+ {
+ "type": "checkbox",
+ "id": "enable_zoom",
+ "label": "Enable image zoom",
+ "info": "Zoom only works with the slideshow image layout"
+ },
+ {
+ "type": "checkbox",
+ "id": "enable_video_autoplay",
+ "label": "Enable video autoplay",
+ "default": true
+ },
+ {
+ "type": "checkbox",
+ "id": "enable_video_looping",
+ "label": "Enable video looping"
+ }
+ ],
+ "blocks": [
+ {
+ "type": "@app"
+ },
+ {
+ "type": "collapsible-tab",
+ "name": "Collapsible tab",
+ "settings": [
+ {
+ "type": "text",
+ "id": "collapsible_tab_heading",
+ "label": "Heading",
+ "default": "Collapsible tab"
+ },
+ {
+ "type": "richtext",
+ "id": "collapsible_tab_text",
+ "label": "Text",
+ "default": "<p>Use this text to share information about your product.</p>"
+ }
+ ]
+ },
+ {
+ "type": "custom-liquid",
+ "name": "Custom liquid",
+ "settings": [
+ {
+ "type": "liquid",
+ "id": "custom_liquid",
+ "label": "Custom liquid",
+ "info": "Add app snippets or other Liquid code to create advanced customizations."
+ }
+ ]
+ },
+ {
+ "type": "tabs",
+ "name": "Tabs",
+ "limit": 1,
+ "settings": [
+ {
+ "type": "checkbox",
+ "id": "show_product_description",
+ "label": "Show product description",
+ "default": false
+ },
+ {
+ "type": "header",
+ "content": "Tab"
+ },
+ {
+ "type": "text",
+ "id": "tab_heading_1",
+ "label": "Heading",
+ "default": "Tab 1"
+ },
+ {
+ "type": "richtext",
+ "id": "tab_text_1",
+ "label": "Text",
+ "default": "<p>Tab 1 content goes here.</p>"
+ },
+ {
+ "type": "header",
+ "content": "Tab"
+ },
+ {
+ "type": "text",
+ "id": "tab_heading_2",
+ "label": "Heading",
+ "default": "Tab 2"
+ },
+ {
+ "type": "richtext",
+ "id": "tab_text_2",
+ "label": "Text",
+ "default": "<p>Tab 2 content goes here.</p>"
+ },
+ {
+ "type": "header",
+ "content": "Tab"
+ },
+ {
+ "type": "text",
+ "id": "tab_heading_3",
+ "label": "Heading",
+ "default": "Tab 3"
+ },
+ {
+ "type": "richtext",
+ "id": "tab_text_3",
+ "label": "Text",
+ "default": "<p>Tab 3 content goes here.</p>"
+ }
+ ]
+ },
+ {
+ "type": "title",
+ "name": "Title",
+ "limit": 1
+ },
+ {
+ "type": "vendor",
+ "name": "Vendor",
+ "limit": 1
+ },
+ {
+ "type": "social",
+ "name": "Social",
+ "limit": 1
+ },
+ {
+ "type": "description",
+ "name": "Description",
+ "limit": 1
+ },
+ {
+ "type": "price",
+ "name": "Price",
+ "limit": 1
+ },
+ {
+ "type": "form",
+ "name": "Form",
+ "limit": 1,
+ "settings": [
+ {
+ "type": "paragraph",
+ "content": "Customize form features for the product in the products portion of the theme settings."
+ },
+ {
+ "type": "checkbox",
+ "id": "show_gift_card_recipient_form",
+ "label": "t:sections.product.blocks.form.show_gift_card_recipient_form.label",
+ "info": "t:sections.product.blocks.form.show_gift_card_recipient_form.info",
+ "default": false
+ }
+ ]
+ },
+ {
+ "type": "rating",
+ "name": "Product rating",
+ "limit": 1,
+ "settings": [
+ {
+ "type": "paragraph",
+ "content": "To display a rating, add a product rating app. [Learn more](https://apps.shopify.com/product-reviews)"
+ }
+ ]
+ },
+ {
+ "type": "complementary_products",
+ "name": "Complementary products",
+ "limit": 1,
+ "settings": [
+ {
+ "type": "paragraph",
+ "content": "To select complementary products, add the Search & Discovery app. [Learn more](https:\/\/shopify.dev\/themes\/product-merchandising\/recommendations)"
+ },
+ {
+ "type": "text",
+ "id": "heading",
+ "label": "Heading",
+ "default": "Pairs well with"
+ },
+ {
+ "type": "range",
+ "id": "product_recommendation_limit",
+ "label": "Maximum products to show",
+ "min": 1,
+ "max": 10,
+ "default": 5
+ },
+ {
+ "type": "range",
+ "id": "products_per_slide",
+ "label": "Number of products per page",
+ "min": 1,
+ "max": 3,
+ "default": 2
+ }
+ ]
+ }
+ ]
+}
+
+{% endschema %}
+
+{%- comment -%} KEYWORDS (Steve 2026-07-28): serve full-width across the entire
+ screen. Removed the 80ch cap + the manual 96-char <br> wrapping so the tag links
+ now flow and wrap naturally at the full container width. {%- endcomment -%}
+<div class="keywords-desktop" style="width: 100%; max-width: none; box-sizing: border-box; padding: 0 3ch; line-height: 1.9;">
+ <h4 style="margin: 0 0 6px;">KEYWORDS:</h4>
+ <div class="keywords-desktop__list" style="width: 100%;">
+ {%- for tag in product.tags -%}
+ {%- unless tag == "display_variant" -%}<a href="/search?q={{ tag | url_encode }}">{{ tag }}</a>{%- unless forloop.last -%}, {% endunless -%}{%- endunless -%}
+ {%- endfor -%}
+ </div>
+</div>
+
+{% comment %} Recently Viewed Products — tracks current product + shows carousel {% endcomment %}
+{% if settings.dw_enable_recently_viewed %}
+
+ {% render 'recently-viewed' %}
+{% endif %}
diff --git a/shopify/theme-LIVE-pull-20260728-colorbar/snippets/color-palette.liquid b/shopify/theme-LIVE-pull-20260728-colorbar/snippets/color-palette.liquid
new file mode 100644
index 00000000..2abc2458
--- /dev/null
+++ b/shopify/theme-LIVE-pull-20260728-colorbar/snippets/color-palette.liquid
@@ -0,0 +1,677 @@
+{% comment %}
+ color-palette — "Colors In This Pattern" swatch spectrum.
+ Shows the pattern's real colors AND interpolated in-between colors, laid out as
+ uniform swatches centered in even rows. The TOTAL rendered dots are driven by a
+ user DENSITY SLIDER (Steve 2026-07-09d: "allow the user to grid slide the amount
+ of dots that they can see.. expand.. contract"): every real base color is kept,
+ and the remaining budget of interpolated dots is spread EVENLY across the gaps
+ (never truncating one end of the spectrum). The slider runs MIN_DOTS(6) →
+ MAX_DOTS(64) with DEFAULT 20 (the former hard cap became the default value),
+ re-renders live on drag with NO page reload, and persists to localStorage under
+ 'dw_palette_dot_count' (a palette-specific key, distinct from the product-grid
+ density slider). (was Steve 2026-07-09c: a fixed 20-dot cap, MAX_SWATCHES=20.)
+
+ FIX PASS (Steve 2026-07-09, contrarian FIX-FIRST): (1) the slider 'input' handler
+ DEBOUNCES the expensive paintSpectrum() re-render ~80ms so a continuous drag doesn't
+ thrash the whole dot spectrum every tick — the numeric "Colors shown" output and the
+ minus/plus buttons still update IMMEDIATELY for snappy feedback; persistence stays on
+ 'change' (drag-release). (2) When a pattern has only ONE dominant base color there is
+ genuinely nothing to interpolate, so instead of silently HIDING the control (a dead
+ end that leaves the user wondering), it stays VISIBLE but DISABLED with a title/aria
+ hint ("Only one dominant color in this pattern").
+
+ DOT CLICK TARGET (Steve 2026-07-09b): "bring up an index of many images, not
+ just that exact hex. tolerance 10% for color to pull more." A swatch click now
+ opens an IN-PAGE expanding grid of MANY products whose dominant color is within
+ a perceptual 10% tolerance (CIELAB ΔE76) of the clicked hex — CATALOG-WIDE, not
+ one collection. The grid is served by the color-index endpoint
+ POST https://photo.designerwallcoverings.com/apps/color-index {hex, k}
+ (dwphoto → data/color-index.json, one dominant color per ACTIVE product with
+ precomputed LAB). Cards link to /products/<handle> (the roll variant, never the
+ $4.25 Sample). The family-collection href stays as the plain href so
+ middle-click / new-tab / crawlers still get a valid destination, and is the
+ graceful fallback if the endpoint is unreachable.
+ (was: Steve 2026-07-09a, a click deep-linked to the ONE nearest product+variant.)
+
+ Data tiers (mirrors color-dots.liquid, kept in sync):
+ Tier 1 custom.color_dots_json / custom.color_details (enriched JSON: [{hex,name,pct}])
+ Tier 2 custom.primary_color_hex + dwc.ai_generated_colors (name list → hex map)
+ Tier 3 custom.color_hex (single)
+ Tier 4 Canvas pixel extraction from the product image (always yields real % — reliable fallback)
+{% endcomment %}
+
+{% comment %} Read the authoritative enriched field FIRST (color_details); legacy
+ color_dots_json is only a fallback so it can never shadow fresh enrichment. {% endcomment %}
+{% assign color_dots_json_val = product.metafields.custom.color_dots_json.value %}
+{% assign color_details_val = product.metafields.custom.color_details.value %}
+{% if color_details_val != blank %}
+ {% assign color_details_raw = color_details_val | json %}
+{% elsif color_dots_json_val != blank %}
+ {% assign color_details_raw = color_dots_json_val | json %}
+{% else %}
+ {% assign color_details_raw = blank %}
+{% endif %}
+{% assign color_hex = product.metafields.custom.color_hex.value %}
+{% assign primary_hex = product.metafields.custom.primary_color_hex.value %}
+{% assign ai_colors_raw = product.metafields.dwc.ai_generated_colors.value | json %}
+{% assign color_name = product.metafields.custom.color_name.value %}
+
+<div class="dw-color-palette" data-dw-color-palette
+ {% if color_details_raw != blank and color_details_raw != 'null' %}data-colors='{{ color_details_raw | escape }}'{% endif %}
+ {% if primary_hex != blank %}data-primary-hex="{{ primary_hex }}"{% endif %}
+ {% if ai_colors_raw != blank and ai_colors_raw != 'null' %}data-ai-colors='{{ ai_colors_raw }}'{% endif %}
+ {% if color_name != blank %}data-color-name="{{ color_name }}"{% endif %}
+ {% if color_hex != blank %}data-color-hex="{{ color_hex }}"{% endif %}
+ {% if product.featured_image %}data-product-image="{{ product.featured_image | img_url: '400x400' }}"{% endif %}
+ data-product-style="{{ product.metafields.custom.style.value | default: product.type | escape }}"
+>
+ <p class="dw-color-palette__title">Select Color for Coordinates</p>
+
+ {%- comment -%} COLOR BAR (Steve 2026-07-28): the palette renders as ONE large
+ horizontal color BAR (was individual dots), ~4× the old dot height. Drag the pill
+ handle on either END of the bar to EXPAND / CONTRACT how many colors it shows —
+ this replaces the old "Colors shown" slider. The count persists to localStorage
+ 'dw_palette_dot_count'. Single-dominant-color palettes hide the handles (nothing
+ to expand). {%- endcomment -%}
+ <div class="dw-color-palette__barwrap" data-dw-cp-barwrap hidden>
+ <span class="dw-cp-handle dw-cp-handle--l" data-dw-cp-handle="l" role="slider" tabindex="0"
+ aria-label="Drag to change how many colors are shown" aria-valuemin="6" aria-valuemax="64"><i aria-hidden="true"></i></span>
+ <div class="dw-color-palette__cards" data-dw-color-palette-cards aria-live="polite"></div>
+ <span class="dw-cp-handle dw-cp-handle--r" data-dw-cp-handle="r" role="slider" tabindex="0"
+ aria-label="Drag to change how many colors are shown" aria-valuemin="6" aria-valuemax="64"><i aria-hidden="true"></i></span>
+ </div>
+
+ {%- comment -%} In-page color-index grid the dot brings up (Steve 2026-07-09b).
+ Hidden until a swatch is clicked; then filled with the catalog-wide products
+ within 10% (CIELAB ΔE76) of the clicked hex. {%- endcomment -%}
+ <div class="dw-color-index" data-dw-color-index hidden
+ data-endpoint="https://photo.designerwallcoverings.com/apps/color-index">
+ <div class="dw-color-index__head">
+ <span class="dw-color-index__swatch" data-dw-ci-swatch></span>
+ <span class="dw-color-index__label" data-dw-ci-label aria-live="polite"></span>
+ <button type="button" class="dw-color-index__close" data-dw-ci-close aria-label="Close color index">×</button>
+ </div>
+ <div class="dw-color-index__grid" data-dw-ci-grid aria-live="polite"></div>
+ </div>
+</div>
+
+<style>
+ .dw-color-palette{padding:18px 0 12px;text-align:center;min-height:10px;}
+ .dw-color-palette__title{font-family:Lora,serif;font-size:15px;font-weight:500;color:#3D4246;margin:0 0 4px;letter-spacing:.01em;}
+ /* ── COLOR BAR (Steve 2026-07-28): dots → ONE large horizontal bar, ~4× the old
+ dot height, with a drag handle on each END to expand/contract the color count.
+ Replaces the density slider + the names/% legend + the thin proportion bar. ── */
+ .dw-color-palette__barwrap{position:relative;width:100%;max-width:900px;margin:8px auto 0;box-sizing:border-box;}
+ .dw-color-palette__barwrap[hidden]{display:none;}
+ /* the bar itself: contiguous full-width color segments, no gaps, rounded ends */
+ .dw-color-palette__cards{display:flex;flex-wrap:nowrap;align-items:stretch;gap:0;width:100%;height:76px;border-radius:9px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 1px 4px rgba(0,0,0,.08);}
+ .dw-swatch{flex:1 1 0;min-width:0;height:100%;display:block;border-radius:0;box-sizing:border-box;text-decoration:none;box-shadow:none;transition:filter .12s ease,box-shadow .12s ease;position:relative;}
+ a.dw-swatch{cursor:pointer;}
+ .dw-swatch:hover{filter:brightness(1.07);box-shadow:inset 0 0 0 2px rgba(255,255,255,.55),inset 0 0 0 3px rgba(0,0,0,.12);z-index:3;}
+ /* base (real pattern) colors read the same in a contiguous bar — no ring/scale */
+ .dw-swatch--base{box-shadow:none;}
+ .dw-swatch--base:hover{filter:brightness(1.07);box-shadow:inset 0 0 0 2px rgba(255,255,255,.6),inset 0 0 0 3px rgba(0,0,0,.16);z-index:3;}
+ /* END drag handles — pill grips that protrude past the bar; drag horizontally to
+ expand (outward) / contract (inward) the color count, persisted to localStorage. */
+ .dw-cp-handle{position:absolute;top:50%;transform:translateY(-50%);width:15px;height:94px;background:#fff;border:1px solid #c9c4b8;border-radius:8px;box-shadow:0 1px 5px rgba(0,0,0,.20);cursor:ew-resize;display:flex;align-items:center;justify-content:center;z-index:6;touch-action:none;-webkit-user-select:none;user-select:none;}
+ .dw-cp-handle i{display:block;width:2px;height:38px;background:#b0aa9c;border-radius:2px;box-shadow:4px 0 0 #b0aa9c,-4px 0 0 #b0aa9c;}
+ .dw-cp-handle--l{left:-6px;}
+ .dw-cp-handle--r{right:-6px;}
+ .dw-cp-handle:hover{border-color:#a8a294;}
+ .dw-cp-handle:focus-visible{outline:2px solid #b8b3a8;outline-offset:3px;}
+ .dw-color-palette__barwrap.is-single .dw-cp-handle{display:none;} /* one dominant color: nothing to expand */
+ .dw-color-palette:empty{display:none;}
+ @media (max-width:600px){
+ .dw-color-palette__cards{height:58px;border-radius:7px;}
+ .dw-cp-handle{height:74px;width:14px;}
+ .dw-cp-handle i{height:30px;}
+ }
+ /* ── In-page color-index grid the dot brings up — refined to read as a curated
+ "shop this colorway" drawer: hairline-ruled header, Lora title at the palette
+ scale, soft reveal, even gutters, hairline media. (refine 2026-07-09) ── */
+ .dw-color-index{max-width:660px;margin:20px auto 6px;text-align:left;border-top:1px solid #ece9e3;padding-top:16px;}
+ .dw-color-index[hidden]{display:none;}
+ @keyframes dwCiReveal{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
+ .dw-color-index.is-open{animation:dwCiReveal .28s ease both;}
+ .dw-color-index__head{display:flex;align-items:center;gap:10px;margin:0 0 14px;}
+ .dw-color-index__swatch{width:22px;height:22px;border-radius:5px;flex:0 0 auto;box-shadow:0 0 0 1px rgba(0,0,0,.14),inset 0 -3px 5px rgba(0,0,0,.06);}
+ .dw-color-index__label{font-family:Lora,serif;font-size:14px;color:#3D4246;flex:1 1 auto;letter-spacing:.01em;}
+ .dw-color-index__label b{font-weight:600;text-transform:capitalize;}
+ .dw-color-index__close{flex:0 0 auto;background:none;border:1px solid #e0ded9;border-radius:50%;width:26px;height:26px;line-height:1;font-size:15px;color:#8a8577;cursor:pointer;padding:0;transition:color .12s ease,border-color .12s ease;}
+ .dw-color-index__close:hover{color:#3D4246;border-color:#b8b3a8;}
+ .dw-color-index__close:focus-visible{outline:2px solid #b8b3a8;outline-offset:2px;}
+ .dw-color-index__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:16px 14px;}
+ .dw-color-index__card{display:block;text-decoration:none;color:inherit;}
+ .dw-color-index__card img{width:100%;aspect-ratio:1;object-fit:cover;box-shadow:0 0 0 1px #ece9e3;border-radius:3px;background:#f4f2ee;transition:box-shadow .14s ease;}
+ .dw-color-index__card:hover img{box-shadow:0 0 0 1px #b8b3a8,0 3px 12px rgba(0,0,0,.10);}
+ .dw-color-index__cap{display:block;font-family:Lora,serif;font-size:11px;color:#3D4246;margin-top:7px;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-transform:capitalize;}
+ .dw-color-index__card:hover .dw-color-index__cap{text-decoration:underline;text-decoration-color:#d8d4cc;}
+ .dw-color-index__cap i{display:block;font-style:normal;color:#8a8577;font-size:10px;text-transform:none;margin-top:1px;letter-spacing:.02em;}
+ .dw-color-index__empty,.dw-color-index__loading{font-family:Lora,serif;font-size:12px;color:#8a8577;padding:8px 0;}
+ @media (max-width:600px){
+ .dw-color-index__grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;}
+ }
+</style>
+
+<script>
+(function(){
+ function init(){
+ var root = document.querySelector('[data-dw-color-palette]');
+ if(!root || root.dataset.rendered) return;
+ var cards = root.querySelector('[data-dw-color-palette-cards]');
+ if(!cards) return;
+ root.dataset.rendered = '1';
+
+ /* name -> hex fallback map (kept in sync with color-dots.liquid) */
+ var N = {
+ 'red':'#DC2626','crimson':'#DC143C','burgundy':'#800020','wine':'#722F37','maroon':'#800000',
+ 'blue':'#2563EB','navy':'#1B2A4A','cobalt':'#0047AB','indigo':'#3F51B5','sky blue':'#87CEEB','steel blue':'#4682B4','royal blue':'#4169E1','blue frost':'#C4D3E0','deep indigo':'#1B2A4A','dark navy':'#1B2A4A','midnight':'#191970',
+ 'green':'#16A34A','sage':'#87AE73','olive':'#808000','forest green':'#228B22','emerald':'#50C878','mint':'#98FF98','moss':'#8A9A5B','sea glass':'#C6D8CE',
+ 'gold':'#D4AF37','golden':'#FFD700','amber':'#FFBF00',
+ 'yellow':'#EAB308','mustard':'#FFDB58',
+ 'orange':'#EA580C','rust':'#B7410E','terracotta':'#E2725B','melon':'#FDBCB4','soft melon':'#F6C9A8',
+ 'pink':'#EC4899','blush':'#DE5D83','rose':'#FF007F','salmon':'#FA8072','fuchsia':'#FF00FF',
+ 'purple':'#9333EA','violet':'#7C3AED','plum':'#8E4585','lavender':'#E6E6FA','lilac':'#C8A2C8','mauve':'#E0B0FF',
+ 'black':'#1A1A1A','charcoal':'#36454F','ebony':'#555D50','onyx':'#353839',
+ 'white':'#FAFAFA','ivory':'#FFFFF0','cream':'#FFFDD0','pearl':'#F0EAD6','off-white':'#FAF9F6','eggshell':'#F0EAD6',
+ 'gray':'#6B7280','grey':'#6B7280','silver':'#C0C0C0','slate':'#708090','metallic silver':'#BFC1C2',
+ 'brown':'#92400E','chocolate':'#7B3F00','espresso':'#3C1414','walnut':'#5C3A1D','mocha':'#967969','sienna':'#A0522D',
+ 'beige':'#F5F5DC','tan':'#D2B48C','taupe':'#483C32','sand':'#C2B280','khaki':'#F0E68C','camel':'#C19A6B','oatmeal':'#B8AB8C','linen':'#FAF0E6',
+ 'coral':'#FF6F61','peach':'#FFCBA4',
+ 'teal':'#0D9488','aqua':'#00FFFF','turquoise':'#40E0D0','cyan':'#06B6D4',
+ 'metallic':'#AAA9AD','copper':'#B87333','bronze':'#CD7F32'
+ };
+
+ function pctOf(c){ var p = (c.pct!=null?c.pct:(c.percentage!=null?c.percentage:null)); if(p==null) return null; p=parseFloat(p); return isNaN(p)?null:Math.round(p); }
+
+ /* ── HEX → color-family COLLECTION (handles verified live 2026-07-08) ──────
+ Derive the family from the REAL measured hex and link to that family's
+ collection. blue-wallpaper & grey-silver corrected from the old dead
+ handles (blue-wallpaper-collection / grey-wallcovering, which 404'd). */
+ var FAM_COLL = {
+ red:'red-wallpaper-collection', orange:'orange', yellow:'yellow-wallpaper-collection',
+ gold:'gold-wallpaper', green:'green-wallpaper-collection', teal:'turquoise',
+ blue:'blue-wallpaper', purple:'purple', pink:'pink-wallcovering-2',
+ brown:'brown-wallpaper-collection', beige:'beige-cream-wallpaper-collection',
+ black:'black', white:'white-wallpaper-collection', gray:'grey-silver'
+ };
+ function hexToRgb(h){
+ h=(h||'').replace('#','');
+ if(h.length===3) h=h.split('').map(function(x){return x+x;}).join('');
+ if(h.length<6) return null;
+ var r=parseInt(h.slice(0,2),16),g=parseInt(h.slice(2,4),16),b=parseInt(h.slice(4,6),16);
+ return (isNaN(r)||isNaN(g)||isNaN(b))?null:[r,g,b];
+ }
+ function familyFromHex(hex){
+ var rgb=hexToRgb(hex); if(!rgb) return null;
+ var r=rgb[0]/255,g=rgb[1]/255,b=rgb[2]/255;
+ var mx=Math.max(r,g,b),mn=Math.min(r,g,b),d=mx-mn;
+ var l=(mx+mn)/2, s=d===0?0:d/(1-Math.abs(2*l-1));
+ var hdeg=0;
+ if(d!==0){
+ if(mx===r) hdeg=60*(((g-b)/d)%6);
+ else if(mx===g) hdeg=60*(((b-r)/d)+2);
+ else hdeg=60*(((r-g)/d)+4);
+ }
+ if(hdeg<0) hdeg+=360;
+ if(s<0.18){
+ if(l>0.86) return 'white';
+ if(l<0.18) return 'black';
+ if((hdeg>=20 && hdeg<=70) && l>0.30) return 'beige';
+ return 'gray';
+ }
+ if(l>0.80 && (hdeg>=20 && hdeg<70)) return 'beige';
+ if(l<0.40 && s<0.75 && ((hdeg>=10 && hdeg<70) || hdeg>=345)) return 'brown';
+ if(l<0.16) return 'black';
+ if(hdeg<15||hdeg>=345) return 'red';
+ if(hdeg<40){ return (s<0.45 && l>0.55) ? 'beige' : 'orange'; }
+ if(hdeg<55){ return (s<0.45) ? 'beige' : (hdeg<50 ? 'gold' : 'yellow'); }
+ if(hdeg<65) return (l<0.45) ? 'gold' : 'yellow';
+ if(hdeg<170) return 'green';
+ if(hdeg<200) return 'teal';
+ if(hdeg<255) return 'blue';
+ if(hdeg<290) return 'purple';
+ return 'pink';
+ }
+ var PRODUCT_STYLE = (root.dataset.productStyle||'').trim();
+ /* The color-FAMILY collection handle for a hex (used both as the search space
+ for the nearest-specific-product resolver AND as the graceful fallback). */
+ function familyHandle(hex){
+ var fam=familyFromHex(hex); if(!fam) return null;
+ return FAM_COLL[fam] || null;
+ }
+ /* Fallback collection URL — only used if we can't resolve a single specific
+ product of that hue (edge case). (Steve 2026-07-09: DEFAULT must be a
+ specific product+variant, this is the graceful floor.) */
+ function familyHref(hex){
+ var handle=familyHandle(hex); if(!handle) return null;
+ var url='/collections/'+handle+'?sort_by=created-descending';
+ if(PRODUCT_STYLE){ url+='&filter.p.m.custom.style='+encodeURIComponent(PRODUCT_STYLE); }
+ return url;
+ }
+
+ /* ── hex → IN-PAGE INDEX of MANY products within 10% color tolerance ───────
+ Steve 2026-07-09b: "bring up an index of many images, not just that exact
+ hex. tolerance 10% for color to pull more." A dot is a palette-extracted
+ hue; clicking it opens the in-page grid (below the palette) of products
+ whose dominant color is within a perceptual 10% tolerance (CIELAB ΔE76) of
+ the clicked hex, drawn CATALOG-WIDE from the color-index endpoint. Results
+ are cached per hex so re-clicking a swatch is instant. */
+ var CI = root.querySelector('[data-dw-color-index]');
+ var CI_ENDPOINT = (CI && CI.dataset.endpoint) || 'https://photo.designerwallcoverings.com/apps/color-index';
+ var CI_K = 36; // cards to show (endpoint caps at 60)
+ var _ciCache = {}; // hex -> Promise<{results,total,tolerance_pct}>
+ function fetchColorIndex(hex){
+ if(_ciCache[hex]) return _ciCache[hex];
+ _ciCache[hex]=fetch(CI_ENDPOINT,{
+ method:'POST', mode:'cors', headers:{'Content-Type':'application/json'},
+ body:JSON.stringify({hex:hex, k:CI_K})
+ }).then(function(r){ return r.ok?r.json():{results:[]}; })
+ .catch(function(){ return {results:[], _err:true}; });
+ return _ciCache[hex];
+ }
+ function ciEl(sel){ return CI ? CI.querySelector(sel) : null; }
+ function closeIndex(){ if(CI){ CI.classList.remove('is-open'); CI.hidden=true; } }
+ if(CI){
+ var _cx=ciEl('[data-dw-ci-close]');
+ if(_cx) _cx.addEventListener('click', closeIndex);
+ // Esc closes the drawer when it (or something inside it) is focused (a11y).
+ CI.addEventListener('keydown', function(ev){ if(ev.key==='Escape'){ closeIndex(); } });
+ }
+ /* Open the in-page index for a clicked hex. */
+ function openIndex(hex, name){
+ if(!CI) return;
+ var sw=ciEl('[data-dw-ci-swatch]'), lbl=ciEl('[data-dw-ci-label]'), grid=ciEl('[data-dw-ci-grid]');
+ var fam=familyFromHex(hex)||'';
+ if(sw) sw.style.background=hex;
+ if(lbl) lbl.innerHTML='Wallcoverings in this color — <b>'+(name||fam||hex)+'</b>';
+ if(grid) grid.innerHTML='<div class="dw-color-index__loading">Finding matches…</div>';
+ CI.hidden=false;
+ // retrigger the soft reveal even on a re-click (refine 2026-07-09)
+ CI.classList.remove('is-open'); void CI.offsetWidth; CI.classList.add('is-open');
+ CI.scrollIntoView({behavior:'smooth', block:'nearest'});
+ var _cl=ciEl('[data-dw-ci-close]'); if(_cl){ try{ _cl.focus({preventScroll:true}); }catch(e){} }
+ fetchColorIndex(hex).then(function(d){
+ if(!grid) return;
+ var res=(d&&d.results)||[];
+ if(!res.length){
+ grid.innerHTML='';
+ var empty=document.createElement('div'); empty.className='dw-color-index__empty';
+ empty.textContent = d && d._err
+ ? 'Could not load matches right now — try another color.'
+ : 'No close matches for this color yet.';
+ grid.appendChild(empty);
+ return;
+ }
+ grid.innerHTML='';
+ var frag=document.createDocumentFragment();
+ res.forEach(function(p){
+ if(!p || !p.handle) return;
+ var a=document.createElement('a'); a.className='dw-color-index__card'; a.rel='nofollow';
+ // link straight to the PDP handle — the roll/first-available variant,
+ // never the $4.25 Sample (Sample is never the default variant).
+ a.href='/products/'+encodeURIComponent(p.handle);
+ var img=document.createElement('img'); img.loading='lazy';
+ img.src=p.image||''; img.alt=p.title||'';
+ var cap=document.createElement('span'); cap.className='dw-color-index__cap';
+ cap.textContent=(p.title||'').replace(/\s*\|\s*.*$/,''); // pattern part
+ if(p.vendor){ var v=document.createElement('i'); v.textContent=p.vendor; cap.appendChild(v); }
+ a.appendChild(img); a.appendChild(cap); frag.appendChild(a);
+ });
+ grid.appendChild(frag);
+ });
+ }
+ /* Click handler shared by every swatch: open the in-page index for that hue.
+ Modified clicks (new tab) fall through to the plain family-collection href. */
+ function onSwatchClick(hex, ev, name){
+ ev.preventDefault();
+ openIndex(hex, name);
+ }
+
+ /* ── color math: normalize + interpolate ── */
+ function normHex(hex){
+ var rgb=hexToRgb(hex); if(!rgb) return null;
+ return '#'+rgb.map(function(x){return x.toString(16).padStart(2,'0');}).join('');
+ }
+ function mix(a,b,t){
+ var ca=hexToRgb(a),cb=hexToRgb(b); if(!ca||!cb) return a;
+ var r=Math.round(ca[0]+(cb[0]-ca[0])*t),g=Math.round(ca[1]+(cb[1]-ca[1])*t),bl=Math.round(ca[2]+(cb[2]-ca[2])*t);
+ return '#'+[r,g,bl].map(function(x){return x.toString(16).padStart(2,'0');}).join('');
+ }
+ /* ── perceptual ΔE (CIELAB, ΔE76) for VISUAL dedup of adjacent interpolated dots.
+ On a low-base, low-chroma pattern (e.g. an all-grey paisley) cranking the slider
+ high produces long runs of visually-identical adjacent swatches — meaningless
+ and it cheapens the curated feel. We skip an INTERPOLATED dot when it is within
+ ΔE < DEDUP_DE of the previously-placed swatch. Base (real) colors are NEVER
+ deduped — they're the pattern's actual colors. (refine 2026-07-09) */
+ function _rgb2lab(rgb){
+ var r=rgb[0]/255,g=rgb[1]/255,b=rgb[2]/255;
+ r=r>0.04045?Math.pow((r+0.055)/1.055,2.4):r/12.92;
+ g=g>0.04045?Math.pow((g+0.055)/1.055,2.4):g/12.92;
+ b=b>0.04045?Math.pow((b+0.055)/1.055,2.4):b/12.92;
+ var x=(r*0.4124+g*0.3576+b*0.1805)/0.95047,
+ y=(r*0.2126+g*0.7152+b*0.0722)/1.0,
+ z=(r*0.0193+g*0.1192+b*0.9505)/1.08883;
+ var f=function(t){return t>0.008856?Math.pow(t,1/3):(7.787*t)+16/116;};
+ x=f(x);y=f(y);z=f(z);
+ return [(116*y)-16, 500*(x-y), 200*(y-z)];
+ }
+ function deltaE(hexA,hexB){
+ var a=hexToRgb(hexA),b=hexToRgb(hexB); if(!a||!b) return 999;
+ var la=_rgb2lab(a),lb=_rgb2lab(b);
+ return Math.sqrt(Math.pow(la[0]-lb[0],2)+Math.pow(la[1]-lb[1],2)+Math.pow(la[2]-lb[2],2));
+ }
+ var DEDUP_DE = 2.3; // ~1 JND: below this, two swatches are indistinguishable
+ /* TOTAL rendered dots are driven by a user DENSITY SLIDER (Steve 2026-07-09d:
+ "allow the user to grid slide the amount of dots that they can see..
+ expand.. contract"). The slider value is the target TOTAL dot count. We keep
+ EVERY real base color, then spend whatever budget is left on interpolated
+ in-between dots, distributed EVENLY across the gaps (never truncating one end
+ of the spectrum). See buildSteps. The former hard cap of 20 is now the slider
+ DEFAULT; the range is MIN_DOTS..MAX_DOTS, persisted to localStorage. */
+ var MIN_DOTS = 6, MAX_DOTS = 64, DEFAULT_DOTS = 20; /* slider bounds + default */
+ var LS_KEY = 'dw_palette_dot_count'; /* palette-specific persistence key */
+ function readDotCount(){
+ var v = DEFAULT_DOTS;
+ try { var s = localStorage.getItem(LS_KEY); if(s!=null){ var n=parseInt(s,10); if(!isNaN(n)) v=n; } } catch(e){}
+ if(v<MIN_DOTS) v=MIN_DOTS; if(v>MAX_DOTS) v=MAX_DOTS;
+ return v;
+ }
+ function writeDotCount(v){ try { localStorage.setItem(LS_KEY, String(v)); } catch(e){} }
+ var dotTarget = readDotCount(); /* current TOTAL-dot target (base + interpolated) */
+
+ /* Given the base-color count, return the number of interpolated dots to place
+ in EACH of the (n-1) gaps, so that base + sum(steps) <= `total` and the
+ leftover is spread across the earliest gaps (keeps the spectrum balanced,
+ left-to-right, rather than starving the tail). `total` = current slider value. */
+ function buildSteps(n, total){
+ var gaps = n - 1;
+ if(gaps <= 0) return [];
+ var budget = total - n; // interpolated dots we can afford
+ if(budget < 0) budget = 0;
+ var per = Math.floor(budget / gaps);
+ var extra = budget - per * gaps; // spread +1 across the first `extra` gaps
+ var out = [];
+ for(var g=0; g<gaps; g++){ out.push(per + (g < extra ? 1 : 0)); }
+ return out;
+ }
+
+ /* Build one swatch. Left-click opens the IN-PAGE index of many products
+ within 10% of that hue (onSwatchClick → openIndex); the href is the family
+ collection so middle-click / new-tab / crawlers still get a valid
+ destination. (Steve 2026-07-09b: "bring up an index of many images.") */
+ function makeSwatch(hex, opts){
+ opts=opts||{};
+ var href=familyHref(hex);
+ var el=document.createElement(href?'a':'span');
+ el.className='dw-swatch'+(opts.base?' dw-swatch--base':'');
+ el.style.background=hex;
+ if(href){
+ el.href=href;
+ el.addEventListener('click', (function(nm){ return function(ev){
+ // let modified clicks (new tab / new window) use the plain-collection href
+ if(ev.metaKey||ev.ctrlKey||ev.shiftKey||ev.altKey||ev.button!==0) return;
+ onSwatchClick(hex, ev, nm);
+ }; })(opts.name));
+ }
+ var fam=familyFromHex(hex);
+ if(opts.base){
+ var lbl=(opts.name?opts.name:(fam||''));
+ el.title='Shop this '+(fam||'')+' color'+(lbl&&lbl!==fam?' — '+lbl:'')+' ('+hex+(opts.pct!=null?', '+opts.pct+'% here':'')+')';
+ } else {
+ el.title='Shop this '+(fam||'')+' color ('+hex+')';
+ }
+ return el;
+ }
+
+ /* Resolved base-color state, cached once so the density slider can re-render
+ the spectrum WITHOUT re-fetching / re-extracting the product image. */
+ var _baseList = null; // [{hex,name,pct}] real base colors (deduped, sorted)
+ var _hasPct = false;
+
+ /* Rebuild ONLY the dot spectrum (cards) from the cached base list at the current
+ `dotTarget`. Called on first render and on every slider change. Every real base
+ color is kept; interpolated dots fill the remaining budget, evenly across gaps.
+ Legend + proportion bar reflect the real base colors and are built once (they
+ don't change with the dot count). */
+ function paintSpectrum(){
+ if(!_baseList || !_baseList.length) return;
+ var list = _baseList;
+ var stepsPerGap = buildSteps(list.length, dotTarget);
+ var frag=document.createDocumentFragment();
+ var _lastHex=null; // last hex actually appended, for adjacent visual dedup
+ for(var i=0;i<list.length;i++){
+ // BASE colors are always shown (real pattern colors, never deduped).
+ frag.appendChild(makeSwatch(list[i].hex,{base:true,name:list[i].name,pct:list[i].pct}));
+ _lastHex=list[i].hex;
+ if(i<list.length-1){
+ var steps = stepsPerGap[i] || 0;
+ for(var k=1;k<=steps;k++){
+ var t=k/(steps+1);
+ var ih=mix(list[i].hex,list[i+1].hex,t);
+ // skip an interpolated dot that's visually identical to the previous one
+ // (dedup near-duplicates on low-chroma / low-base palettes). We still
+ // guarantee the NEXT base color renders because bases bypass this check.
+ if(_lastHex && deltaE(ih,_lastHex) < DEDUP_DE) continue;
+ frag.appendChild(makeSwatch(ih,{base:false}));
+ _lastHex=ih;
+ }
+ }
+ }
+ cards.innerHTML=''; // clear prior segments (re-render)
+ cards.appendChild(frag);
+ var _bw=root.querySelector('[data-dw-cp-barwrap]'); if(_bw) _bw.hidden=false; // reveal the bar once it has content
+ }
+
+ /* Wire the two END drag-handles once (Steve 2026-07-28: "allow user to drag ends
+ of the bar to expand colors"). Dragging a handle OUTWARD expands the color count,
+ INWARD contracts it (~STEP_PX px of travel ≈ one color). The value is clamped to
+ [MIN_DOTS, MAX_DOTS] and persisted to localStorage; the bar re-renders live
+ (debounced) during the drag. A single-dominant-color palette has nothing to
+ expand, so the handles are hidden (is-single). Arrow keys / Home / End give the
+ handles keyboard control (a11y). */
+ var _paintTimer = null; // debounce handle for paintSpectrum (closure var)
+ var PAINT_DEBOUNCE_MS = 60; // ~60ms: coalesces continuous drag ticks into one re-render
+ var HANDLE_STEP_PX = 16; // px of horizontal drag travel per ±1 color
+ function wireHandles(){
+ var wrap = root.querySelector('[data-dw-cp-barwrap]');
+ if(!wrap) return;
+ var handles = wrap.querySelectorAll('[data-dw-cp-handle]');
+ // A single base color has nothing to interpolate — hide the handles entirely.
+ if(_baseList.length < 2){ wrap.classList.add('is-single'); return; }
+ wrap.classList.remove('is-single');
+ if(dotTarget < MIN_DOTS) dotTarget = MIN_DOTS;
+ if(dotTarget > MAX_DOTS) dotTarget = MAX_DOTS;
+ // setTarget(v, persist, immediate): update the color count; repaint the bar
+ // (immediate=now, else debounced during a continuous drag). Keeps aria in sync.
+ function setTarget(v, persist, immediate){
+ v = Math.round(v);
+ if(v < MIN_DOTS) v = MIN_DOTS; if(v > MAX_DOTS) v = MAX_DOTS;
+ var changed = (v !== dotTarget);
+ dotTarget = v;
+ handles.forEach(function(h){ h.setAttribute('aria-valuenow', String(v)); });
+ if(persist) writeDotCount(v);
+ if(!changed && !immediate) return;
+ if(immediate){
+ if(_paintTimer){ clearTimeout(_paintTimer); _paintTimer = null; }
+ paintSpectrum();
+ } else {
+ if(_paintTimer) clearTimeout(_paintTimer);
+ _paintTimer = setTimeout(function(){ _paintTimer = null; paintSpectrum(); }, PAINT_DEBOUNCE_MS);
+ }
+ }
+ handles.forEach(function(h){
+ var side = h.getAttribute('data-dw-cp-handle'); // 'l' (left) | 'r' (right)
+ var dir = (side === 'r') ? 1 : -1; // OUTWARD travel sign that EXPANDS
+ h.setAttribute('aria-valuenow', String(dotTarget));
+ var startX = 0, startT = dotTarget, dragging = false;
+ function onMove(ev){
+ if(!dragging) return;
+ var dpx = ev.clientX - startX;
+ setTarget(startT + dir * (dpx / HANDLE_STEP_PX), false, false); // outward = +colors
+ ev.preventDefault();
+ }
+ function onUp(){
+ if(!dragging) return;
+ dragging = false;
+ writeDotCount(dotTarget); // persist final count on release
+ paintSpectrum(); // final crisp paint
+ document.removeEventListener('pointermove', onMove);
+ document.removeEventListener('pointerup', onUp);
+ }
+ h.addEventListener('pointerdown', function(ev){
+ dragging = true; startX = ev.clientX; startT = dotTarget;
+ try { h.setPointerCapture(ev.pointerId); } catch(e){}
+ document.addEventListener('pointermove', onMove);
+ document.addEventListener('pointerup', onUp);
+ ev.preventDefault();
+ });
+ // Keyboard: outward arrow = more colors, inward = fewer; Home/End = min/max.
+ h.addEventListener('keydown', function(ev){
+ var step = 0;
+ if(ev.key === 'ArrowRight' || ev.key === 'ArrowUp') step = dir;
+ else if(ev.key === 'ArrowLeft' || ev.key === 'ArrowDown') step = -dir;
+ else if(ev.key === 'Home'){ setTarget(MIN_DOTS, true, true); ev.preventDefault(); return; }
+ else if(ev.key === 'End'){ setTarget(MAX_DOTS, true, true); ev.preventDefault(); return; }
+ if(step){ setTarget(dotTarget + step, true, true); ev.preventDefault(); }
+ });
+ });
+ }
+
+ function render(colors){
+ if(!colors || !colors.length) return false;
+ /* de-dupe by hex/name, keep order; resolve each to a real hex */
+ var seen={}, list=[];
+ colors.forEach(function(c){
+ if(!c) return;
+ var hex=normHex(c.hex) || normHex(N[(c.name||'').toLowerCase()]);
+ if(!hex) return;
+ if(seen[hex]) return; seen[hex]=1;
+ list.push({hex:hex, name:c.name||'', pct:pctOf(c)});
+ });
+ if(!list.length) return false;
+ var hasPct = list.some(function(c){return c.pct!=null;});
+ if(hasPct) list.sort(function(a,b){return (b.pct||0)-(a.pct||0);});
+ /* Keep the real base colors (still capped at ≤8 dominant hues — bases are the
+ pattern's actual colors; interpolation between them fills the slider budget). */
+ list = list.slice(0, 8);
+
+ /* Cache the resolved base list + wire the slider, then paint the spectrum at
+ the current (persisted) dot target. Slider re-renders call paintSpectrum
+ directly — no image re-extraction. (Steve 2026-07-09d) */
+ _baseList = list; _hasPct = hasPct;
+ wireHandles();
+ paintSpectrum();
+ /* (Steve 2026-07-28) The names+% legend and the thin proportion bar were removed
+ — the large color bar above is now the single palette element. */
+ return true;
+ }
+
+ /* Metafield fallbacks — used ONLY if canvas extraction yields nothing. */
+ function renderMeta(){
+ var ph=root.dataset.primaryHex, aiRaw=root.dataset.aiColors, sh=root.dataset.colorHex, list2=[];
+ if(ph) list2.push({hex:ph, name:root.dataset.colorName||'Primary'});
+ try { JSON.parse((aiRaw||'[]').replace(/=>/g,':')).forEach(function(nm){ var h=N[(''+nm).toLowerCase()]; if(h) list2.push({hex:h,name:nm}); }); } catch(e){}
+ if(list2.length && render(list2)) return true;
+ if(sh) return render([{hex:sh, name:root.dataset.colorName||'Color'}]);
+ return false;
+ }
+
+ /* ── Tier 1: color_details / color_dots_json metafield (BEST — local-vision enriched) ── */
+ var raw = root.dataset.colors;
+ if(raw){
+ try { if(render(JSON.parse(raw.replace(/=>/g,':')))) return; } catch(e){}
+ }
+
+ /* ── Tier 2: Canvas extraction from the product image (multi-color + %), meta as fallback ── */
+ var REF={'red':[190,55,55],'crimson':[176,40,60],'navy':[30,45,80],'blue':[70,110,175],'slate blue':[95,120,150],'powder blue':[170,196,214],'green':[70,130,80],'sage':[150,168,138],'celadon':[176,192,168],'eucalyptus':[130,146,128],'moss':[120,138,90],'olive':[124,124,70],'gold':[200,168,90],'ochre':[190,150,80],'yellow':[224,186,90],'orange':[220,120,70],'terracotta':[196,110,85],'coral':[224,140,120],'pink':[220,150,165],'blush':[224,190,190],'purple':[140,100,160],'lavender':[190,180,205],'black':[40,40,40],'charcoal':[70,74,78],'white':[248,246,240],'ivory':[240,236,224],'cream':[236,228,206],'eggshell':[224,216,196],'gray':[140,140,142],'greige':[176,168,154],'silver':[196,196,198],'brown':[130,95,70],'walnut':[110,80,55],'taupe':[150,138,120],'beige':[214,202,178],'tan':[196,176,140],'sand':[200,184,150],'stone':[186,180,166],'teal':[70,140,140],'turquoise':[110,180,175]};
+ function closestName(r,g,b){var best='',bd=1e9;for(var n in REF){var c=REF[n],d=Math.pow(r-c[0],2)+Math.pow(g-c[1],2)+Math.pow(b-c[2],2);if(d<bd){bd=d;best=n;}}return best;}
+ function hx(r,g,b){return '#'+[r,g,b].map(function(x){return x.toString(16).padStart(2,'0');}).join('');}
+ function fromCanvas(url){
+ var img=new Image(); img.crossOrigin='anonymous';
+ img.onload=function(){
+ try{
+ var sz=120,cv=document.createElement('canvas');cv.width=sz;cv.height=sz;
+ var ctx=cv.getContext('2d');ctx.drawImage(img,0,0,sz,sz);
+ var px=ctx.getImageData(0,0,sz,sz).data,bk={};
+ for(var i=0;i<px.length;i+=4){var kr=Math.round(px[i]/22)*22,kg=Math.round(px[i+1]/22)*22,kb=Math.round(px[i+2]/22)*22,k=kr+','+kg+','+kb;if(!bk[k])bk[k]={r:0,g:0,b:0,n:0};bk[k].r+=px[i];bk[k].g+=px[i+1];bk[k].b+=px[i+2];bk[k].n++;}
+ var sorted=Object.keys(bk).map(function(k){return bk[k];}).sort(function(a,b){return b.n-a.n;});
+ var tot=sz*sz,out=[],seen={};
+ for(var j=0;j<sorted.length && out.length<8;j++){var s=sorted[j],ar=Math.round(s.r/s.n),ag=Math.round(s.g/s.n),ab=Math.round(s.b/s.n),nm=closestName(ar,ag,ab),pct=Math.round(s.n/tot*100);if(seen[nm]||pct<2)continue;seen[nm]=1;out.push({name:nm,hex:hx(ar,ag,ab),pct:pct});}
+ if(!render(out.slice(0,6))) renderMeta();
+ }catch(e){ renderMeta(); }
+ };
+ img.onerror=function(){ renderMeta(); };
+ img.src=url;
+ }
+ function imgUrl(){
+ var u=root.dataset.productImage;
+ if(u&&u.length>5) return u.indexOf('//')===0?'https:'+u:u;
+ var sels=['.product-gallery--viewport img[src]','.product-gallery img[src]','[data-product-gallery] img[src]','.media-gallery__slide img[src]'];
+ for(var i=0;i<sels.length;i++){var el=document.querySelector(sels[i]);if(el&&el.src)return el.src;}
+ return null;
+ }
+ var u=imgUrl();
+ if(u){ fromCanvas(u); }
+ else {
+ var obs=new MutationObserver(function(m,o){var v=imgUrl();if(v){o.disconnect();fromCanvas(v);}});
+ obs.observe(document.body,{childList:true,subtree:true});
+ setTimeout(function(){ obs.disconnect(); if(!cards.children.length) renderMeta(); },5000);
+ }
+ }
+ if(document.readyState==='loading'){document.addEventListener('DOMContentLoaded',init);}else{init();}
+})();
+</script>
+
+{%- comment -%} CLIP "More like this" — PDP color-dot CLIP visual-similarity row.
+ Calls the SAME-BEHAVIOR public proxy /apps/similar (dwphoto → loopback CLIP :9914),
+ which returns the visually-nearest patterns to THIS product, softly re-ranked by the
+ same hex→color-family bucket + style overlap the swatches use. Additive: the swatch
+ spectrum + its color-family links above are unchanged. dw_sku / hex / style come from
+ the product's REAL fields. (Steve "ship the CLIP dots" 2026-07-08) {%- endcomment -%}
+{%- assign _dw_sku = product.selected_or_first_available_variant.sku | default: product.variants.first.sku | remove: '-Sample' -%}
+{%- assign _dw_hex = product.metafields.custom.primary_color_hex.value | default: product.metafields.custom.color_hex.value | default: product.metafields.dwc.dominant_hex.value -%}
+{%- assign _dw_style = product.metafields.custom.style.value | default: product.metafields.global.Style.value | default: product.type -%}
+{%- if _dw_sku != blank -%}
+<div id="dw-similar" class="dw-similar"
+ data-dw-sku="{{ _dw_sku | escape }}"
+ data-hex="{{ _dw_hex | escape }}"
+ data-style="{{ _dw_style | escape }}"
+ data-endpoint="https://photo.designerwallcoverings.com/apps/similar">
+ <h3 class="dw-similar__h">More Wallcoverings Like This</h3>
+ <div class="dw-similar__grid" aria-live="polite"></div>
+</div>
+<script>
+(function(){
+ var root=document.getElementById('dw-similar'); if(!root) return;
+ var sku=(root.dataset.dwSku||'').trim().replace(/-Sample$/i,''); // base SKU keys the CLIP index; the Sample variant SKU (usually first-available) has no embedding
+ if(!sku){ root.style.display='none'; return; }
+ var ep=root.dataset.endpoint||'https://photo.designerwallcoverings.com/apps/similar';
+ fetch(ep,{method:'POST',mode:'cors',headers:{'Content-Type':'application/json'},
+ body:JSON.stringify({dw_sku:sku, hex:root.dataset.hex||'', style:root.dataset.style||'', k:8})})
+ .then(function(r){return r.ok?r.json():{results:[]};})
+ .then(function(d){
+ var g=root.querySelector('.dw-similar__grid');
+ if(!d.results||!d.results.length){ root.style.display='none'; return; }
+ d.results.forEach(function(p){
+ var a=document.createElement('a'); a.className='dw-similar__card'; a.rel='nofollow';
+ // real PDP link when we have a storefront handle; else fall back to a SKU search (never a name-search)
+ a.href = p.handle ? ('/products/'+encodeURIComponent(p.handle))
+ : ('/search?q='+encodeURIComponent(p.dw_sku||'')+'&type=product');
+ var img=document.createElement('img'); img.loading='lazy'; img.src=p.image||''; img.alt=p.pattern||'';
+ var cap=document.createElement('span'); cap.className='dw-similar__cap'; cap.textContent=p.pattern||'';
+ a.appendChild(img); a.appendChild(cap); g.appendChild(a);
+ });
+ }).catch(function(){ root.style.display='none'; });
+})();
+</script>
+<style>
+.dw-similar{margin:20px auto 8px;max-width:660px;text-align:center}
+.dw-similar__h{font-family:Lora,serif;font-size:15px;font-weight:500;color:#3D4246;letter-spacing:-0.01em;margin:0 0 12px}
+.dw-similar__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
+.dw-similar__card{display:block;text-decoration:none;color:inherit}
+.dw-similar__card img{width:100%;aspect-ratio:1;object-fit:cover;border:1px solid #e5e5e5;border-radius:3px}
+.dw-similar__cap{display:block;font-family:Lora,serif;font-size:11px;color:#3D4246;margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:capitalize}
+.dw-similar:empty{display:none}
+</style>
+{%- endif -%}
← 041dfca4 auto-save: 2026-07-28T09:29:05 (1 files) — shopify/scripts/d
·
back to Designer Wallcoverings
·
auto-save: 2026-07-28T10:29:49 (4 files) — shopify/scripts/d 4eeb4db8 →