Add !important to grid CSS to override dw-product.css rules

33d192a8e2124a62c66d067ac8030afe7591d613 · 2026-06-22 13:39:01 -0700 · Steve Abrams

Ensures product-options grid layout (qty below size, buttons inline) wins over the conflicting auto 1fr grid in dw-product.css.

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

Files touched

M shopify/_cwGRID/layout/theme.liquid

Diff

commit 33d192a8e2124a62c66d067ac8030afe7591d613
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Mon Jun 22 13:39:01 2026 -0700

    Add !important to grid CSS to override dw-product.css rules
    
    Ensures product-options grid layout (qty below size, buttons inline) wins over the conflicting auto 1fr grid in dw-product.css.
    
    Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 shopify/_cwGRID/layout/theme.liquid | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/shopify/_cwGRID/layout/theme.liquid b/shopify/_cwGRID/layout/theme.liquid
index 37321a4f..c4f3124f 100644
--- a/shopify/_cwGRID/layout/theme.liquid
+++ b/shopify/_cwGRID/layout/theme.liquid
@@ -344,9 +344,9 @@
   .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; }
+  .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 .dw-variant-btns{ grid-column:2 !important; align-self:center !important; }
+  .product-options:has(.dw-variant-btns) .last_variant{ display:none !important; }
 </style>
 <script>
 (function(){

← 1f9612ea Port variant buttons v2 to _cwGRID: inline buttons + qty-bel · back to Designer Wallcoverings · Tier B MOQ: read-only UOM packaging scan + per-vendor propos 796b1a30 →