[object Object]

← back to Designer Wallcoverings

Compact PDP layout: tighter spacing, smaller size buttons, rounded pill action buttons

1992de015fed9c975aa4f12aaabb8a97c074b48c · 2026-06-22 13:52:29 -0700 · Steve Abrams

- Reduce padding between PRICE and SIZE (row-gap 10px → 4px)
- Reduce size button padding (12px 14px → 8px 12px) + font-size (12px → 11px)
- Add rounded black pill styling to action buttons (border-radius: 50px)
- REQUEST SAMPLE + SPEC SHEET display side-by-side (2-col grid)
- ADD TO CART full-width below (grid-column: 1 / -1)
- Cleaner, tighter layout matching design reference

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

Files touched

Diff

commit 1992de015fed9c975aa4f12aaabb8a97c074b48c
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Mon Jun 22 13:52:29 2026 -0700

    Compact PDP layout: tighter spacing, smaller size buttons, rounded pill action buttons
    
    - Reduce padding between PRICE and SIZE (row-gap 10px → 4px)
    - Reduce size button padding (12px 14px → 8px 12px) + font-size (12px → 11px)
    - Add rounded black pill styling to action buttons (border-radius: 50px)
    - REQUEST SAMPLE + SPEC SHEET display side-by-side (2-col grid)
    - ADD TO CART full-width below (grid-column: 1 / -1)
    - Cleaner, tighter layout matching design reference
    
    Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 shopify/_cwGRID/layout/theme.liquid | 30 ++++++++++++++++++++++++++----
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/shopify/_cwGRID/layout/theme.liquid b/shopify/_cwGRID/layout/theme.liquid
index c4f3124f..2653bacb 100644
--- a/shopify/_cwGRID/layout/theme.liquid
+++ b/shopify/_cwGRID/layout/theme.liquid
@@ -335,18 +335,40 @@
 <!-- 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;
+  .dw-variant-btns{display:flex;gap:10px;margin:4px 0 0;flex-wrap:wrap}
+  .dw-variant-btns button{flex:1 1 0;min-width:100px;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}
   .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 !important; grid-template-columns:max-content minmax(220px, max-content) !important; column-gap:12px !important; row-gap:10px !important; align-items:center !important; }
+  .product-options{ display:grid !important; grid-template-columns:max-content minmax(220px, max-content) !important; column-gap:12px !important; row-gap:4px !important; align-items:center !important; }
   .product-options .dw-variant-btns{ grid-column:2 !important; align-self:center !important; }
   .product-options:has(.dw-variant-btns) .last_variant{ display:none !important; }
+  /* action buttons — rounded black pills */
+  .shopify-product-form button[type="submit"],
+  button.shopify-product-form__submit,
+  .product-form__submit,
+  form[action*="/cart"] button[type="submit"],
+  .product-submit button,
+  button[name="add"]{
+    border-radius: 50px !important; background: #111 !important; color: #fff !important;
+    padding: 12px 24px !important; font-weight: 600 !important; letter-spacing: 0.05em !important;
+    text-transform: uppercase !important; font-size: 13px !important;
+    margin: 4px 0 !important;
+  }
+  /* REQUEST SAMPLE + SPEC SHEET side-by-side in 2-col grid */
+  .product-form__submit-wrapper,
+  .product-form__actions,
+  .shopify-product-form .product-form__action {
+    display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important;
+  }
+  .product-form__action:last-child,
+  button[name="add"] {
+    grid-column: 1 / -1 !important;
+  }
 </style>
 <script>
 (function(){

← f92e94ea Add complete build summary for collection filter UI transfor  ·  back to Designer Wallcoverings  ·  Apply compact layout fix to all theme variants d9616965 →