← back to Designer Wallcoverings
v5.6.0 staged: PDP info-column light tidy (equal-width aligned action buttons + even rhythm)
f7aa3d46ce6167e25942d8a17edc04bf996b1556 · 2026-06-25 15:50:31 -0700 · Steve (Claude)
Files touched
A pending-approval/pdp-size-pills-2026-06-25/dw-pdp-restyle.v5.6.0.cssM shopify/THEME-CHANGELOG.md
Diff
commit f7aa3d46ce6167e25942d8a17edc04bf996b1556
Author: Steve (Claude) <steve@designerwallcoverings.com>
Date: Thu Jun 25 15:50:31 2026 -0700
v5.6.0 staged: PDP info-column light tidy (equal-width aligned action buttons + even rhythm)
---
.../dw-pdp-restyle.v5.6.0.css | 184 +++++++++++++++++++++
shopify/THEME-CHANGELOG.md | 5 +
2 files changed, 189 insertions(+)
diff --git a/pending-approval/pdp-size-pills-2026-06-25/dw-pdp-restyle.v5.6.0.css b/pending-approval/pdp-size-pills-2026-06-25/dw-pdp-restyle.v5.6.0.css
new file mode 100644
index 00000000..05315393
--- /dev/null
+++ b/pending-approval/pdp-size-pills-2026-06-25/dw-pdp-restyle.v5.6.0.css
@@ -0,0 +1,184 @@
+/* ==========================================================================
+ dw-pdp-restyle.css (Designer Wallcoverings PDP restyle, 2026-06-22)
+ Reference-design pass on the product page:
+ - SIZE selector -> two pill buttons (progressive enhancement; the native
+ <select.single-option-selector> stays in the DOM, visually hidden, so
+ all variant / cart / cowlendar / MOQ JS keeps reading it).
+ - REQUEST SAMPLE / SPEC SHEET / ADD TO CART -> three uniform rounded
+ pills, laid out: [Request Sample] [Spec Sheet] on one row, Add to Cart
+ below. Existing hrefs/handlers/classes untouched; restyle/relayout only.
+ Scoped to .template-product so nothing leaks to other templates.
+ ========================================================================== */
+
+/* --- Token: keep pill radius/font consistent across size pills + CTAs ------ */
+:root {
+ --dw-pill-radius: 99px;
+ --dw-pill-font: Lora, serif;
+}
+
+/* ==========================================================================
+ 1. SIZE PILLS
+ ========================================================================== */
+
+/* Hide the native size <select> but KEEP it operable for JS (.value/.dispatch).
+ We only hide it once our pills have been built (data-dw-pilled="1"), so on a
+ no-JS render the original dropdown is still usable. */
+.template-product select.single-option-selector[data-dw-pilled="1"] {
+ position: absolute !important;
+ width: 1px !important;
+ height: 1px !important;
+ padding: 0 !important;
+ margin: -1px !important;
+ overflow: hidden !important;
+ clip: rect(0 0 0 0) !important;
+ white-space: nowrap !important;
+ border: 0 !important;
+}
+
+.template-product .dw-size-pills {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+ margin: 6px 0 18px;
+}
+
+.template-product .dw-size-pill {
+ font-family: var(--dw-pill-font);
+ font-weight: 700;
+ font-size: 12px;
+ letter-spacing: 0.02em;
+ text-transform: uppercase;
+ line-height: 1.1;
+ cursor: pointer;
+ padding: 14px 22px;
+ min-height: 46px;
+ border-radius: var(--dw-pill-radius);
+ border: 1.5px solid #111;
+ background: #fff;
+ color: #111;
+ transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+ -webkit-appearance: none;
+ appearance: none;
+}
+
+.template-product .dw-size-pill:hover {
+ background: #f2f2f2;
+}
+
+.template-product .dw-size-pill.is-active {
+ background: #111;
+ color: #fff;
+ border-color: #111;
+}
+
+.template-product .dw-size-pill.is-active:hover {
+ background: #000;
+}
+
+.template-product .dw-size-pill.is-unavailable,
+.template-product .dw-size-pill:disabled {
+ opacity: 0.45;
+ cursor: not-allowed;
+ text-decoration: line-through;
+}
+
+/* When the size pills are present we don't need the legacy plain-text
+ ".last_variant" echo of the option value cluttering the column. The
+ theme JS still toggles it for the display_variant=="no" single-variant
+ case; we only hide it once pills exist as a sibling. */
+.template-product .dw-size-pills ~ .selector-wrapper .last_variant {
+ /* leave theme behavior intact; no override needed */
+}
+
+/* ==========================================================================
+ 2. CTA PILL ROW (Request Sample + Spec Sheet on a row, Add to Cart below)
+ The existing buttons already share border-radius:99px + black fill from
+ custom.css. Here we only normalize sizing and arrange them in the
+ reference 2-up + full-width layout.
+ ========================================================================== */
+
+.template-product .product-add-to-cart {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 12px;
+ align-items: stretch;
+ max-width: 432px; /* ~ two 206px pills + gap */
+}
+
+/* Every primary CTA pill: uniform height / font / weight / radius / color */
+.template-product .product-add-to-cart .dl-sample-btn,
+.template-product .product-add-to-cart .dl-second-sample-btn,
+.template-product .product-add-to-cart .add-to-cart,
+.template-product .product-add-to-cart .shopify-payment-button__button {
+ flex: 1 1 calc(50% - 6px);
+ width: auto !important; /* override fixed 206px so they share the row */
+ min-width: 0;
+ min-height: 48px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ margin: 0 !important;
+ border-radius: var(--dw-pill-radius) !important;
+ font-family: var(--dw-pill-font);
+ font-weight: 700;
+ font-size: 12px !important;
+ letter-spacing: 0.02em;
+ text-transform: uppercase;
+ box-sizing: border-box;
+}
+
+/* Add to Cart spans the full width on its own row, beneath the 2-up pills. */
+.template-product .product-add-to-cart .add-to-cart {
+ flex: 1 1 100%;
+}
+
+/* Spec-sheet button has its own inline-block style block in its snippet; make
+ sure it participates in the flex row like the other pills. */
+.template-product .product-add-to-cart .spec-sheet-btn {
+ display: inline-flex !important;
+ vertical-align: top;
+}
+
+/* Keep the hidden/unavailable helpers behaving (they were display utilities). */
+.template-product .product-add-to-cart .hidden {
+ display: none !important;
+}
+
+/* Mobile: stack everything full-width but keep the pill look. */
+@media screen and (max-width: 1024px) {
+ .template-product .product-add-to-cart {
+ max-width: none;
+ }
+ .template-product .product-add-to-cart .dl-sample-btn,
+ .template-product .product-add-to-cart .dl-second-sample-btn,
+ .template-product .product-add-to-cart .add-to-cart,
+ .template-product .product-add-to-cart .shopify-payment-button__button {
+ flex: 1 1 100%;
+ width: 100% !important;
+ max-width: none !important;
+ }
+}
+
+/* ── DW 2026-06-25: keep the printable Tear Sheet (.dw-spec-page) OUT of the
+ on-screen PDP. It was rendering inline — a duplicate <h1> product title +
+ the Purchasing-Agency address block. Off-screen (NOT display:none) so the
+ "Download Tear Sheet"/PDF capture can still read it; restored for print. */
+.dw-spec-page{position:absolute !important;left:-99999px !important;top:0 !important;width:794px !important;max-width:none !important;pointer-events:none !important;}
+@media print{ .dw-spec-page{position:static !important;left:auto !important;width:auto !important;} }
+
+/* ── v5.5.2 (2026-06-25): the black pills ARE the size control — hide the
+ redundant native dropdown row robustly. Theme puts inline display:block on
+ the <select>, so !important is required. Select stays in DOM (cart/variant
+ JS still reads it); only visually removed. */
+.template-product .product-options .select-wrapper{display:none !important;}
+.template-product .product-options .last_variant{display:none !important;}
+.template-product select.single-option-selector{display:none !important;}
+.template-product .product-options > label.selected-text[for*="single-option"]{display:none !important;}
+/* ── v5.6.0 LIGHT TIDY (2026-06-25): even vertical rhythm + equal-width,
+ left-aligned action buttons in the PDP info column. No structural change. */
+.template-product .dw-size-pills{margin:14px 0 16px !important;}
+.template-product .product-add-to-cart{margin:0 0 10px !important;width:340px !important;max-width:100% !important;box-sizing:border-box !important;}
+.template-product .block-buttonpdf{margin:0 0 18px !important;}
+.template-product .block-buttonpdf .spec-sheet-btn.pdf-download-btn,
+.template-product .spec-sheet-btn.pdf-download-btn{width:340px !important;max-width:100% !important;box-sizing:border-box !important;justify-content:center !important;}
+.template-product .spec-sheet-controls{margin-top:14px !important;}
diff --git a/shopify/THEME-CHANGELOG.md b/shopify/THEME-CHANGELOG.md
index 53f01fe7..eb37b69b 100644
--- a/shopify/THEME-CHANGELOG.md
+++ b/shopify/THEME-CHANGELOG.md
@@ -8,6 +8,11 @@ and the rollback backup path.
---
+## v5.6.0 — PDP info-column light tidy · STAGED (awaiting Steve deploy approval)
+**Δ from v5.5.2:** ADDS CSS-only tidy to `dw-pdp-restyle.css` — equal-width (340px), left-aligned REQUEST SAMPLE + DOWNLOAD PDF buttons (was a full-width black slab next to a small blue button), and even vertical rhythm between pills/buttons/specs. No layout/structure change.
+**Verified (injection on live PMW-75923):** buttons equal width + aligned, spacing even, nothing else moved.
+**Rollback:** drop the appended "v5.6.0 LIGHT TIDY" block from dw-pdp-restyle.css.
+
## v5.5.2 — hide redundant native size dropdown · DEPLOYED 2026-06-25 ~15:33 PT
**Δ from v5.5.1:** ADDS `!important` CSS to `dw-pdp-restyle.css` that hides the native `.select-wrapper`/`<select>`/label size row (the theme re-renders an inline `display:block` that beat the non-`!important` rule, leaving a duplicate dropdown under the pills). Select stays in DOM for cart/variant JS.
**Verified live (PMW-75923 + DWAK-700035):** pills only, native dropdown hidden, image/cart/single-title intact.
← 21644ea1 v5.5.2: PDP black size pills live (5.5.0 staged, 5.5.1 scrip
·
back to Designer Wallcoverings
·
cadence-import: gated double-roll MOQ for York/Brewster roll c56edd4d →