[object Object]

← back to Designer Wallcoverings

_cwGRID: port variant-buttons UX + inline qty-below layout (buttons inline beside Size in col 2; Quantity row below, not side-by-side)

de5ca0b81c2c4dac564c2f6d331b278e4c095220 · 2026-06-22 13:38:14 -0700 · Steve

Files touched

Diff

commit de5ca0b81c2c4dac564c2f6d331b278e4c095220
Author: Steve <steve@designerwallcoverings.com>
Date:   Mon Jun 22 13:38:14 2026 -0700

    _cwGRID: port variant-buttons UX + inline qty-below layout (buttons inline beside Size in col 2; Quantity row below, not side-by-side)
---
 shopify/_cwGRID/layout/theme.liquid | 52 +++++++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/shopify/_cwGRID/layout/theme.liquid b/shopify/_cwGRID/layout/theme.liquid
index f824b3c2..94c7f63f 100644
--- a/shopify/_cwGRID/layout/theme.liquid
+++ b/shopify/_cwGRID/layout/theme.liquid
@@ -332,6 +332,58 @@
   </script>
   {% comment %}Inject theme-object end{% endcomment %}
 
+<!-- DW: variant option buttons + inline qty-below layout (ported to _cwGRID 2026-06-22) -->
+<style>
+  /* variant buttons — replace native single-option dropdown with side-by-side name-only buttons */
+  .dw-variant-btns{display:flex;gap:10px;margin:10px 0 4px;flex-wrap:wrap}
+  .dw-variant-btns button{flex:1 1 0;min-width:120px;padding:12px 14px;border:1px solid #111;
+    background:#fff;color:#111;font:inherit;letter-spacing:.04em;text-transform:uppercase;
+    font-size:12px;cursor:pointer;border-radius:2px;transition:background .12s,color .12s}
+  .dw-variant-btns button:hover{background:#f2f2f2}
+  .dw-variant-btns button[aria-pressed="true"],
+  .dw-variant-btns button[aria-pressed="true"]:hover{background:#111;color:#fff}
+  .dw-hide-native{display:none !important}
+  /* product-options as 2-col grid: SIZE row sits ABOVE the QUANTITY row (qty BELOW, never side-by-side); variant buttons inline in col 2 next to the label */
+  .product-options{ display:grid; grid-template-columns:max-content minmax(220px, max-content); column-gap:12px; row-gap:10px; align-items:center; }
+  .product-options .dw-variant-btns{ grid-column:2; align-self:center; }
+  .product-options:has(.dw-variant-btns) .last_variant{ display:none; }
+</style>
+<script>
+(function(){
+  function build(){
+    var sels=document.querySelectorAll('.single-option-selector,[id^="single-option-"]');
+    Array.prototype.forEach.call(sels,function(sel){
+      if(sel.dataset.dwBtnDone) return;
+      if(!sel.options||sel.options.length<2){ sel.dataset.dwBtnDone='1'; return; }
+      sel.dataset.dwBtnDone='1';
+      var wrap=document.createElement('div'); wrap.className='dw-variant-btns';
+      Array.prototype.forEach.call(sel.options,function(opt){
+        var b=document.createElement('button');
+        b.type='button';
+        b.textContent=(opt.text||'').trim();
+        b.setAttribute('data-value',opt.value);
+        b.setAttribute('aria-pressed', opt.selected?'true':'false');
+        b.addEventListener('click',function(){
+          sel.value=opt.value;
+          sel.dispatchEvent(new Event('change',{bubbles:true}));
+          Array.prototype.forEach.call(wrap.querySelectorAll('button'),function(x){
+            x.setAttribute('aria-pressed', x===b?'true':'false');
+          });
+        });
+        wrap.appendChild(b);
+      });
+      var host=sel.closest('.select-wrapper')||sel.closest('.selector-wrapper')||sel.parentElement;
+      host.classList.add('dw-hide-native');
+      host.parentElement.insertBefore(wrap,host);
+    });
+  }
+  function init(){ build(); setTimeout(build,400); setTimeout(build,1200); }
+  if(document.readyState!=='loading') init();
+  else document.addEventListener('DOMContentLoaded',init);
+})();
+</script>
+<!-- /DW variant buttons -->
+
 </head>
 
 <body

← 2d1bdd4c auto-save: 2026-06-22T13:36:34 (1 files) — shopify/scripts/m  ·  back to Designer Wallcoverings  ·  Port variant buttons v2 to _cwGRID: inline buttons + qty-bel 1f9612ea →