{"product_id":"color-swatches-on-product-page-canopy","title":"Color Swatches on Product Page","description":"\u003cp class=\"task-lead\"\u003eA furniture brand wanted a variant to be actively chosen before the add-to-cart button became clickable. The theme defaulted to pre-selecting the first option.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eRequire customers to select a variant swatch before add to cart is active. Right now the first available variant is selected automatically and people end up ordering the wrong finish.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003ePre-selecting a variant was causing wrong orders. The brand wanted the button disabled until a customer made a deliberate choice.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe changed the product page so no variant is selected on load, the swatches are clearly presented, and the add-to-cart button stays disabled with a prompt until one is chosen. Once selected, price and availability update as normal.\u003c\/p\u003e\u003cp\u003eWe kept the behavior consistent in quick view and on mobile.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eNo variant pre-selected on page load\u003c\/li\u003e\n\u003cli\u003eAdd-to-cart disabled until a swatch is chosen\u003c\/li\u003e\n\u003cli\u003eClear prompt telling the customer to select an option\u003c\/li\u003e\n\u003cli\u003eSame behavior in quick view and on mobile\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44154829176906,"sku":"TASK-0011","price":0.0,"currency_code":"USD","in_stock":false}],"url":"https:\/\/www.taskhusky.com\/products\/color-swatches-on-product-page-canopy","provider":"TaskHusky","version":"1.0","type":"link"}