{"product_id":"button-hover-effect-atlantic","title":"Button Hover Effect","description":"\u003cp class=\"task-lead\"\u003eA brand wanted an add-to-cart button to appear on hover over product cards on collection pages.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eI'm looking to display an add to cart button as a hover effect when mousing over a product on collections. Quick, without opening the product.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eOne-click adding from the grid.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe added a hover state to product cards with an add-to-cart button that adds single-variant products directly and opens a selector for products with variants.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eAdd-to-cart button on card hover\u003c\/li\u003e\n\u003cli\u003eDirect add for single-variant products\u003c\/li\u003e\n\u003cli\u003eSelector for multi-variant products\u003c\/li\u003e\n\u003cli\u003eVisible without hover on touch devices\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155696414794,"sku":"TASK-0321","price":0.0,"currency_code":"USD","in_stock":false}],"url":"https:\/\/www.taskhusky.com\/products\/button-hover-effect-atlantic","provider":"TaskHusky","version":"1.0","type":"link"}