{"title":"Variant Selector \u0026 Variant Picker","description":"\u003cp\u003eVariant Selector \u0026amp; Variant Picker work for Shopify and Shopify Plus stores, handled as a flat-rate task by an in-house team that has worked on this since 2016.\u003c\/p\u003e\u003cp\u003eWe have completed 215 variant selector \u0026amp; variant picker requests for merchants, including work on Launch, Prestige, Symmetry and Icon. Below are 6 real examples with the request, the approach and what shipped.\u003c\/p\u003e","products":[{"product_id":"display-multiple-variant-options-at-once-launch","title":"Display Multiple Variant Options at Once","description":"\u003cp class=\"task-lead\"\u003eA lifestyle brand wanted the product page to show all variant options at once and display Coming Soon when a variant was out of stock on a specific template.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eDisplay Coming Soon on the add-to-cart button when stock is zero, only on the back-in-stock product template. All the variant options should be visible so customers can see what's coming.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eThe brand used a specific template for pre-launch products and needed the button and variant display to behave differently there.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe made all variant options visible on the product page and, on the designated template only, swapped the button text to Coming Soon when the selected variant had no stock. Everywhere else the standard behavior stayed.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eAll variant options visible on the product page\u003c\/li\u003e\n\u003cli\u003eComing Soon button text on the designated template\u003c\/li\u003e\n\u003cli\u003eStandard behavior everywhere else\u003c\/li\u003e\n\u003cli\u003eUpdates as the customer selects variants\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44154835861578,"sku":"TASK-0044","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"variant-dropdown-to-buttons-and-swatches-prestige","title":"Variant Dropdown to Buttons and Swatches","description":"\u003cp class=\"task-lead\"\u003eA menswear brand wanted their variant dropdowns replaced with buttons, matching a competitor's product page they admired.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eWe want to implement changes we see on another store. Their size and color options are buttons, not dropdowns. Ours are dropdowns. Make ours look like theirs.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eDropdowns hide options. Buttons show them all at once. The brand wanted the visibility.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe replaced the variant dropdowns with button groups for size and color. Unavailable combinations are shown crossed out. Selection updates price and availability as before.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eVariant dropdowns replaced with buttons\u003c\/li\u003e\n\u003cli\u003eUnavailable options shown crossed out\u003c\/li\u003e\n\u003cli\u003ePrice and availability update on selection\u003c\/li\u003e\n\u003cli\u003eStyled to match the reference\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155511898186,"sku":"TASK-0080","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"custom-variant-logic-and-hide-unavailable-symmetry","title":"Custom Variant Logic and Hide Unavailable","description":"\u003cp class=\"task-lead\"\u003eA brand's unavailable variant options weren't showing as crossed out after they added more variant options.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eWe're adding extra variant options and the unavailable combinations don't show as crossed out anymore. Customers pick a combination that doesn't exist and get an error.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eVariant logic that broke with added options.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe fixed the variant availability display so unavailable combinations show crossed out across all option types, and the add-to-cart button disables for them.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eUnavailable combinations crossed out\u003c\/li\u003e\n\u003cli\u003eWorks across all option types\u003c\/li\u003e\n\u003cli\u003eAdd to cart disabled for unavailable combinations\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155697922122,"sku":"TASK-0345","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"color-swatches-as-variant-selector-icon","title":"Color Swatches as Variant Selector","description":"\u003cp class=\"task-lead\"\u003eA leather goods brand wanted color swatches for variant selection on the product page, modeled on a competitor.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eI want to customize my product page like this reference. Color swatches instead of a dropdown, with the leather color shown as an actual swatch image.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eA dropdown that couldn't show color.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe replaced the color dropdown with image swatches showing each leather option, updating the product image on selection, and styled to match the reference.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eImage swatches for color selection\u003c\/li\u003e\n\u003cli\u003eProduct image updates on selection\u003c\/li\u003e\n\u003cli\u003eStyled to the reference\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155699200074,"sku":"TASK-0366","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"image-variants-and-image-swatch-turbo","title":"Image Variants and Image Swatch","description":"\u003cp class=\"task-lead\"\u003eA retailer building on a new theme wanted variant selection to use image swatches for pattern and finish options.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eThe new site is on a different theme. I want the variant selector to use image swatches for pattern and finish, not text dropdowns.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eOptions that needed to be seen.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe replaced the pattern and finish dropdowns with image swatches showing each option, updating the product gallery on selection.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eImage swatches for pattern and finish\u003c\/li\u003e\n\u003cli\u003eGallery updates on selection\u003c\/li\u003e\n\u003cli\u003eConsistent in quick view\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155700969546,"sku":"TASK-0386","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"size-plus-color-variant-combination-launch","title":"Size + Color Variant Combination","description":"\u003cp class=\"task-lead\"\u003eA sock brand with four color products wanted a size and color selector that let customers pick a combination in one place.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eI have four sock products, same design in different colors, each with sizes. I want one page where customers pick color and size together.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eFour products that were really one.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe built a combined selector that presents color and size together, mapping each combination to the right product and variant, and adding the correct item to the cart.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eCombined color and size selector\u003c\/li\u003e\n\u003cli\u003eMaps to the correct product and variant\u003c\/li\u003e\n\u003cli\u003eAdds the correct item to the cart\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155721252938,"sku":"TASK-0460","price":0.0,"currency_code":"USD","in_stock":false}]}],"url":"https:\/\/www.taskhusky.com\/collections\/variant-selector-variant-picker.oembed","provider":"TaskHusky","version":"1.0","type":"link"}