Poupette St BarthLong Dress Nova - Navy Kerylos

/* Product page: sold-out sizes reachable, and the size row drawn as buttons. 22 Sep 2026 WHY THE OPTIONS ARE RE-ENABLED The theme marks every sold-out size , which greys it AND makes it unselectable. Klaviyo Back In Stock (#BIS_trigger) only reveals itself when the SELECTED variant is sold out, so on the 62% of products where only some sizes are gone the button could never be reached - a shopper wanting that size had no way to ask for it. It only ever appeared on the few products where everything was gone, because there the sold-out variant is selected by default. Selecting a sold-out size still cannot be bought: the theme sets the button to Sold Out and disables it, and the hidden no-JS select[name=id] keeps its own disabled options. WHY BUTTONS RATHER THAN THE DROPDOWN The collection cards already show sold-out sizes greyed and struck through, and the owner asked the product page to read the same way. A native cannot: colour on an is ignored by Safari, text-decoration is not painted in the popup by any browser, and the closed box draws the selected option in the SELECT’s colour - measured, a grey sold-out option still renders black once chosen. So the row is drawn as buttons, reusing the state language already on the cards (black / grey struck through) at the size the product page needs. The is not replaced, only hidden: every click writes to it and fires its change event, so the theme’s own price, image, Sold Out and notify logic keep running untouched. Nothing in the theme’s own files is modified, and deleting this one section restores the dropdown. Only rows with more than one option are converted, which on this catalogue means Size alone. WHY THE ROW CAN VANISH When EVERY option in a row is gone, the row - label and control - is removed. A size picker that can only ever answer Sold Out tells the shopper nothing; the page already says Sold Out and offers the notify button. Keyed on the row, and safe because the theme only marks a single-value row such as Color or Material sold out when no variant at all is available. Verified on both. */ /* The product template puts this section under #PageContainer, not inside #MainContent - it rendered as an empty 32px strip until that was measured. Match on the id alone. */ .shopify-section[id$="__psb_size_oos"]{display:none !important;} /* Kept as the fallback for anyone whose JavaScript never runs: the dropdown still greys the sold-out sizes, which is what the page did before any of this. */ select[data-variant-input] option.psb-oos{color:#bbb;} /* Marked important because the rule this has to beat sits in a stylesheet the page cannot read back - cssRules throws on it - so it cannot be out-specified by inspection, only outranked. */ .variant-wrapper.psb-row-gone{display:none !important;} .variant-wrapper.psb-has-buttons select[data-variant-input]{display:none !important;} .psb-sizes{display:flex;flex-wrap:wrap;gap:8px;} .psb-size{font-family:"League Spartan Light",sans-serif;font-size:14px;line-height:1;letter-spacing:.5px; color:rgb(35,35,35);background:transparent;border:1px solid rgb(15,15,15);border-radius:0; min-width:40px;height:34px;padding:0 10px;cursor:pointer;-webkit-appearance:none;appearance:none;} .psb-size:hover{background:rgba(0,0,0,.04);} .psb-size.psb-size--on{background:rgb(35,35,35);color:#fff;border-color:rgb(35,35,35);} /* the same two signals the collection cards use for a size that is gone */ .psb-size.psb-size--oos{color:rgba(0,0,0,.3);border-color:rgba(0,0,0,.18);text-decoration:line-through;} .psb-size.psb-size--oos.psb-size--on{background:rgba(0,0,0,.06);color:rgba(0,0,0,.45);border-color:rgba(0,0,0,.3);} (function(){ var busy = false; function build(s){ var row = s.closest ? s.closest(".variant-wrapper") : null; if (!row || s.options.length < 2) return; var strip = row.querySelector(".psb-sizes"); if (!strip){ strip = document.createElement("div"); strip.className = "psb-sizes"; s.parentElement.appendChild(strip); if (row.className.indexOf("psb-has-buttons") === -1) row.className = row.className + " psb-has-buttons"; } // Rebuilt outright on every pass rather than diffed: four buttons cost nothing, and a rebuild // cannot drift out of step with the select the way incremental updates can. strip.innerHTML = ""; for (var i = 0; i < s.options.length; i++){ var o = s.options[i]; var b = document.createElement("button"); b.type = "button"; b.className = "psb-size" + (o.className.indexOf("psb-oos") !== -1 ? " psb-size--oos" : "") + (o.selected ? " psb-size--on" : ""); b.textContent = o.textContent.trim(); b.setAttribute("data-psb-value", o.value); b.addEventListener("click", function(){ s.value = this.getAttribute("data-psb-value"); // The theme listens on the select, so writing to it and firing change leaves every // downstream behaviour - price, gallery, Sold Out, notify - exactly as the theme wrote it. s.dispatchEvent(new Event("change", { bubbles: true })); }); strip.appendChild(b); } } function apply(){ if (busy) return; busy = true; var sels = document.querySelectorAll("select[data-variant-input]"); for (var i = 0; i < sels.length; i++){ var s = sels[i]; // The theme re-applies disabled every time the selection changes, so the set of sold-out // values is remembered per select rather than read fresh each pass - otherwise the first // pass would erase the only evidence of which sizes were gone. if (!s.psbSold) s.psbSold = {}; var gone = 0; for (var k = 0; k < s.options.length; k++){ var o = s.options[k]; if (o.disabled) s.psbSold[o.value] = 1; if (!s.psbSold[o.value]) continue; gone++; if (o.disabled){ o.disabled = false; o.removeAttribute("disabled"); } if (o.className.indexOf("psb-oos") === -1) o.className = (o.className + " psb-oos").replace(/^ /, ""); } var row = s.closest ? s.closest(".variant-wrapper") : null; if (row){ var all = s.options.length > 0 && gone === s.options.length; if (all && row.className.indexOf("psb-row-gone") === -1){ row.className = (row.className + " psb-row-gone").replace(/^ /, ""); } else if (!all && row.className.indexOf("psb-row-gone") !== -1){ row.className = row.className.split(" ").filter(function(c){ return c && c !== "psb-row-gone"; }).join(" "); } } build(s); } busy = false; } function start(){ apply(); var sels = document.querySelectorAll("select[data-variant-input]"); for (var i = 0; i < sels.length; i++){ sels[i].addEventListener("change", function(){ setTimeout(apply, 0); }); // apply() only ever REMOVES disabled and ADDS classes, so the observer it wakes finds // nothing left to change on the next pass and stops there. new MutationObserver(function(){ setTimeout(apply, 0); }) .observe(sels[i], { attributes: true, subtree: true, childList: true, attributeFilter: ["disabled"] }); } } if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", start); else start(); })();