{"title":"Color \u0026 Image Swatches","description":"\u003cp\u003eColor \u0026amp; Image Swatches 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 182 color \u0026amp; image swatches requests for merchants, including work on Canopy, Brooklyn, Symmetry and Testament. Typical turnaround is 1 to 2 business days. Below are 5 real examples with the request, the approach and what shipped.\u003c\/p\u003e","products":[{"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}]},{"product_id":"variant-image-linked-to-swatch-brooklyn","title":"Variant Image Linked to Swatch","description":"\u003cp class=\"task-lead\"\u003eA furniture brand wanted swatch selection to drive the product image, so clicking a finish swatch showed that finish.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eWhen a customer clicks a color swatch, the main product image should switch to that variant's image. Right now the swatch changes the price but the image stays the same.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eCustomers couldn't see what they were selecting. Wrong-finish returns were the result.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe connected the swatches to the product gallery so selecting a finish shows its image immediately. Where a variant has multiple images, the gallery filters to just that variant's set.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eSwatch selection switches the product image\u003c\/li\u003e\n\u003cli\u003eGallery filters to the selected variant's images\u003c\/li\u003e\n\u003cli\u003eWorks in quick view\u003c\/li\u003e\n\u003cli\u003eTested across the full catalog\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44154836516938,"sku":"TASK-0047","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"color-swatches-on-collection-page-symmetry","title":"Color Swatches on Collection Page","description":"\u003cp class=\"task-lead\"\u003eA children's apparel brand wanted the color swatches from a theme upgrade on their collection page, with a few customizations to how they displayed.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eOur theme had an upgrade with swatches on the collection page that we haven't implemented. We want them, but with customizations: bigger, with the color name on hover, and only showing colors that are in stock.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eThe upgrade's swatches were close but not right. The brand wanted them adapted before turning them on.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe brought the upgraded swatches onto the collection page and adjusted them to the brand's spec: larger, color name on hover, and out-of-stock colors hidden. Clicking a swatch swaps the product image.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eCollection page swatches enabled\u003c\/li\u003e\n\u003cli\u003eLarger swatch size with color name on hover\u003c\/li\u003e\n\u003cli\u003eOut-of-stock colors hidden\u003c\/li\u003e\n\u003cli\u003eImage swaps on swatch click\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155511373898,"sku":"TASK-0066","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"image-swatches-canopy","title":"Image Swatches","description":"\u003cp class=\"task-lead\"\u003eA brand wanted their image swatches linked to the gallery so choosing a swatch showed that option's photo.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eLink the swatch images to the gallery images. When a customer chooses an image swatch, the main product image should switch to that option.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eSwatches that didn't drive the gallery.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe connected the image swatches to the product gallery so selecting one shows its photo, and filters the gallery to that option's images.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eSwatch selection switches the main image\u003c\/li\u003e\n\u003cli\u003eGallery filtered to the selected option\u003c\/li\u003e\n\u003cli\u003eWorks in quick view\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155706441802,"sku":"TASK-0411","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"swatch-sizing-and-shape-testament","title":"Swatch Sizing and Shape","description":"\u003cp class=\"task-lead\"\u003eA brand's color swatches and product photos weren't staying in sync, confusing customers about what they'd selected.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eI need the color swatch selected to match the product picture and vice versa. Customers click a photo and the swatch doesn't update, or pick a swatch and the photo doesn't change.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eTwo-way sync that was missing.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe synced swatches and the gallery in both directions: selecting a swatch shows its photo, and clicking a photo selects its swatch. We also enlarged the swatches for clarity.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eTwo-way sync between swatches and gallery\u003c\/li\u003e\n\u003cli\u003eSwatches enlarged\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":44155715682378,"sku":"TASK-0439","price":0.0,"currency_code":"USD","in_stock":false}]}],"url":"https:\/\/www.taskhusky.com\/collections\/color-image-swatches.oembed","provider":"TaskHusky","version":"1.0","type":"link"}