PDP: add color-palette (big swatch cards + %) between product images and Other Colorways; replaces color-dots strip (live theme 5.9.1 pull)

a2719adfec9105c4df9c99481731f2bbb4c5942b · 2026-07-07 09:13:30 -0700 · Steve
Files touched

M shopify/theme-LIVE-591/snippets/color-palette.liquid
Diff

commit a2719adfec9105c4df9c99481731f2bbb4c5942b
Author: Steve <steve@designerwallcoverings.com>
Date:   Tue Jul 7 09:13:30 2026 -0700

    PDP: add color-palette (big swatch cards + %) between product images and Other Colorways; replaces color-dots strip (live theme 5.9.1 pull)
---
 shopify/theme-LIVE-591/snippets/color-palette.liquid | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/shopify/theme-LIVE-591/snippets/color-palette.liquid b/shopify/theme-LIVE-591/snippets/color-palette.liquid
index b7eff06a..6ff27f3d 100644
--- a/shopify/theme-LIVE-591/snippets/color-palette.liquid
+++ b/shopify/theme-LIVE-591/snippets/color-palette.liquid
@@ -152,21 +152,21 @@
     if(sh){ if(render([{hex:sh, name:root.dataset.colorName||'Color'}])) return; }
 
     /* ── Tier 3: Canvas extraction from the product image (always yields %) ── */
-    var REF={'red':[220,38,38],'navy':[27,42,74],'blue':[37,99,235],'green':[22,163,74],'sage':[135,174,115],'gold':[212,175,55],'yellow':[234,179,8],'orange':[234,88,12],'pink':[236,72,153],'purple':[147,51,234],'black':[26,26,26],'charcoal':[54,69,79],'white':[250,250,250],'ivory':[255,255,240],'cream':[255,253,208],'gray':[107,114,128],'silver':[192,192,192],'brown':[146,64,14],'beige':[245,245,220],'tan':[210,180,140],'taupe':[72,60,50],'teal':[13,148,136],'coral':[255,111,97],'olive':[128,128,0],'sand':[194,178,128],'mint':[152,255,152],'turquoise':[64,224,208]};
+    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=60,cv=document.createElement('canvas');cv.width=sz;cv.height=sz;
+          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]/32)*32,kg=Math.round(px[i+1]/32)*32,kb=Math.round(px[i+2]/32)*32,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++;}
+          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<6;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);if(seen[nm])continue;seen[nm]=1;out.push({name:nm,hex:hx(ar,ag,ab),pct:Math.round(s.n/tot*100)});}
-          render(out);
+          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});}
+          render(out.slice(0,6));
         }catch(e){}
       };
       img.onerror=function(){};
← bb62c10f Gated Shopify room push + judge label-normalize fix · back to Designer Wallcoverings · gitignore rooms-local/ PNGs (keep 200MB of renders out of hi 51842e8e →