{"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}],"url":"https:\/\/www.taskhusky.com\/products\/color-swatches-on-collection-page-symmetry","provider":"TaskHusky","version":"1.0","type":"link"}