{"product_id":"add-quick-view-and-quick-add-to-product-card-canopy","title":"Add Quick View and Quick Add to Product Card","description":"\u003cp class=\"task-lead\"\u003eA menswear brand wanted a quick view button on product cards, appearing on hover, matching a reference site.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eAnother gig for a quote: quick view on the product cards, appearing on hover with the product info, like the reference we sent.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eFaster browsing on a growing catalog.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe added a quick view button that appears when hovering a product card and opens a compact product panel with images, variants, and add to cart. On mobile the button is always visible.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eQuick view button on hover\u003c\/li\u003e\n\u003cli\u003eCompact product panel with variants\u003c\/li\u003e\n\u003cli\u003eAdd to cart from the panel\u003c\/li\u003e\n\u003cli\u003eAlways visible on mobile\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155693727818,"sku":"TASK-0267","price":0.0,"currency_code":"USD","in_stock":false}],"url":"https:\/\/www.taskhusky.com\/products\/add-quick-view-and-quick-add-to-product-card-canopy","provider":"TaskHusky","version":"1.0","type":"link"}