{"title":"Variant Images \u0026 Variant Pictures","description":"\u003cp\u003eVariant Images \u0026amp; Variant Pictures 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 119 variant images \u0026amp; variant pictures requests for merchants, including work on Retina, Prestige, Brooklyn and Turbo. Below are 4 real examples with the request, the approach and what shipped.\u003c\/p\u003e","products":[{"product_id":"show-variant-specific-image-when-variant-selected-retina","title":"Show Variant-Specific Image When Variant Selected","description":"\u003cp class=\"task-lead\"\u003eA retailer wanted the product page to open showing the main product image, not the first variant's image, until the customer chose a variant.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eWhen a product with variants opens, the default product image should be selected, not the first variant's picture. Only when the customer picks a color should the image change.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eThe theme pre-selected the first variant and its image, which was often not the hero shot.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe changed the product page to load with the main product image and no variant selected. Once the customer picks a variant, the gallery switches to that variant's images.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eMain product image shown on load\u003c\/li\u003e\n\u003cli\u003eNo variant pre-selected\u003c\/li\u003e\n\u003cli\u003eGallery switches on variant 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":44155677605962,"sku":"TASK-0132","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"variant-image-on-collection-card-prestige","title":"Variant Image on Collection Card","description":"\u003cp class=\"task-lead\"\u003eA brand with many color variants wanted color-specific collections where each variant showed its own image on the card.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eI have products with eleven color variants each. I want to create sub-collections by color so when a customer browses by color, the card shows that color's image.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eCollection cards that always showed the default color.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe set up color-filtered collection views where each product card shows the image for the browsed color, and clicking opens the product with that color selected.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eColor-filtered collection views\u003c\/li\u003e\n\u003cli\u003eCard shows the browsed color's image\u003c\/li\u003e\n\u003cli\u003eProduct opens with that color selected\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155695202378,"sku":"TASK-0298","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"multiple-images-per-variant-brooklyn","title":"Multiple Images Per Variant","description":"\u003cp class=\"task-lead\"\u003eA brand launching a new site wanted color options presented as separate products, linked to each other from the product page.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eWe have products with multiple colors. We want each color as its own product, with the other colors shown on the product page as linked swatches.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eSeparate products that needed to feel like one family.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe set up linked products so each color's product page shows swatches for the other colors, linking directly to them, driven by a shared grouping field.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eColor swatches linking to sibling products\u003c\/li\u003e\n\u003cli\u003eDriven by a grouping field\u003c\/li\u003e\n\u003cli\u003eConsistent across the product family\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155697266762,"sku":"TASK-0335","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"group-variant-images-by-color-turbo","title":"Group Variant Images by Color","description":"\u003cp class=\"task-lead\"\u003eAn eyewear brand with several colors per product wanted the gallery to show only the selected color's images.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eWe have products with several colors and many images each. When a customer selects a color, the gallery should show only that color's images.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eA gallery showing everything at once.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe grouped product images by color so the gallery filters to the selected color, with all images available when no color is chosen.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eGallery filtered by selected color\u003c\/li\u003e\n\u003cli\u003eAll images shown when no color is chosen\u003c\/li\u003e\n\u003cli\u003eWorks on mobile\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155708571722,"sku":"TASK-0418","price":0.0,"currency_code":"USD","in_stock":false}]}],"url":"https:\/\/www.taskhusky.com\/collections\/variant-images-variant-pictures.oembed","provider":"TaskHusky","version":"1.0","type":"link"}