{"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}],"url":"https:\/\/www.taskhusky.com\/products\/color-swatches-as-variant-selector-icon","provider":"TaskHusky","version":"1.0","type":"link"}