[object Object]

← back to Designer Wallcoverings

Apply compact layout fix to all theme variants

d9616965440b36c5ec76821bd3c052758e8db840 · 2026-06-22 13:53:54 -0700 · Steve Abrams

Updated _cwFIX, _cwLIVE, _cwLIVE2, _cwLIVE3, _cwVERIFY with:
- Compact size button padding (8px 12px, 11px font)
- Tighter spacing between price and size (row-gap 4px)
- Rounded black pill action buttons
- Side-by-side REQUEST SAMPLE / SPEC SHEET layout

Ensures all theme variants have consistent, polished PDP layout.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

Files touched

Diff

commit d9616965440b36c5ec76821bd3c052758e8db840
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Mon Jun 22 13:53:54 2026 -0700

    Apply compact layout fix to all theme variants
    
    Updated _cwFIX, _cwLIVE, _cwLIVE2, _cwLIVE3, _cwVERIFY with:
    - Compact size button padding (8px 12px, 11px font)
    - Tighter spacing between price and size (row-gap 4px)
    - Rounded black pill action buttons
    - Side-by-side REQUEST SAMPLE / SPEC SHEET layout
    
    Ensures all theme variants have consistent, polished PDP layout.
    
    Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 shopify/_cwFIX/layout/theme.liquid    | 6 +++---
 shopify/_cwLIVE/layout/theme.liquid   | 6 +++---
 shopify/_cwLIVE2/layout/theme.liquid  | 6 +++---
 shopify/_cwLIVE3/layout/theme.liquid  | 6 +++---
 shopify/_cwVERIFY/layout/theme.liquid | 6 +++---
 5 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/shopify/_cwFIX/layout/theme.liquid b/shopify/_cwFIX/layout/theme.liquid
index c9b1ab8d..3de464f7 100644
--- a/shopify/_cwFIX/layout/theme.liquid
+++ b/shopify/_cwFIX/layout/theme.liquid
@@ -517,10 +517,10 @@
 {% if template contains 'product' %}
 <!-- DW: variant option buttons v2 — side-by-side name-only buttons; Sample button on every SKU (2026-06-21) -->
 <style>
-  .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;
+  .dw-variant-btns{display:flex;gap:10px;margin:4px 0 0;flex-wrap:wrap}
+  .dw-variant-btns button{flex:1 1 0;min-width:120px;padding:8px 12px;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}
+    font-size:11px;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}
diff --git a/shopify/_cwLIVE/layout/theme.liquid b/shopify/_cwLIVE/layout/theme.liquid
index fe72ea3a..03918ad6 100644
--- a/shopify/_cwLIVE/layout/theme.liquid
+++ b/shopify/_cwLIVE/layout/theme.liquid
@@ -517,10 +517,10 @@
 {% if template contains 'product' %}
 <!-- DW: variant option buttons v2 — side-by-side name-only buttons; Sample button on every SKU (2026-06-21) -->
 <style>
-  .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;
+  .dw-variant-btns{display:flex;gap:10px;margin:4px 0 0;flex-wrap:wrap}
+  .dw-variant-btns button{flex:1 1 0;min-width:120px;padding:8px 12px;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}
+    font-size:11px;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}
diff --git a/shopify/_cwLIVE2/layout/theme.liquid b/shopify/_cwLIVE2/layout/theme.liquid
index 93f20a49..3e9e5e9b 100644
--- a/shopify/_cwLIVE2/layout/theme.liquid
+++ b/shopify/_cwLIVE2/layout/theme.liquid
@@ -517,10 +517,10 @@
 {% if template contains 'product' %}
 <!-- DW: variant option buttons v2 — side-by-side name-only buttons; Sample button on every SKU (2026-06-21) -->
 <style>
-  .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;
+  .dw-variant-btns{display:flex;gap:10px;margin:4px 0 0;flex-wrap:wrap}
+  .dw-variant-btns button{flex:1 1 0;min-width:120px;padding:8px 12px;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}
+    font-size:11px;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}
diff --git a/shopify/_cwLIVE3/layout/theme.liquid b/shopify/_cwLIVE3/layout/theme.liquid
index 15f2dd94..a3053d27 100644
--- a/shopify/_cwLIVE3/layout/theme.liquid
+++ b/shopify/_cwLIVE3/layout/theme.liquid
@@ -517,10 +517,10 @@
 {% if template contains 'product' %}
 <!-- DW: variant option buttons v2 — side-by-side name-only buttons; Sample button on every SKU (2026-06-21) -->
 <style>
-  .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;
+  .dw-variant-btns{display:flex;gap:10px;margin:4px 0 0;flex-wrap:wrap}
+  .dw-variant-btns button{flex:1 1 0;min-width:120px;padding:8px 12px;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}
+    font-size:11px;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}
diff --git a/shopify/_cwVERIFY/layout/theme.liquid b/shopify/_cwVERIFY/layout/theme.liquid
index c9b1ab8d..3de464f7 100644
--- a/shopify/_cwVERIFY/layout/theme.liquid
+++ b/shopify/_cwVERIFY/layout/theme.liquid
@@ -517,10 +517,10 @@
 {% if template contains 'product' %}
 <!-- DW: variant option buttons v2 — side-by-side name-only buttons; Sample button on every SKU (2026-06-21) -->
 <style>
-  .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;
+  .dw-variant-btns{display:flex;gap:10px;margin:4px 0 0;flex-wrap:wrap}
+  .dw-variant-btns button{flex:1 1 0;min-width:120px;padding:8px 12px;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}
+    font-size:11px;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}

← 1992de01 Compact PDP layout: tighter spacing, smaller size buttons, r  ·  back to Designer Wallcoverings  ·  Theme MOQ fix: custom PDP quantity reads order-min metafield 0bc56eb7 →