{"title":"Product Card \u0026 Tile Customization","description":"\u003cp\u003eProduct Card \u0026amp; Tile Customization 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 177 product card \u0026amp; tile customization requests for merchants, including work on Prestige, Canopy, Turbo and Symmetry. Below are 5 real examples with the request, the approach and what shipped.\u003c\/p\u003e","products":[{"product_id":"image-hover-swap-prestige","title":"Image Hover Swap","description":"\u003cp class=\"task-lead\"\u003eAn apparel brand wanted next and previous arrows to appear when hovering over product images in the collection grid.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eI want next and previous arrows to appear on hover over the product image on the collection page. Customers should be able to flip through a product's images without opening it.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eProducts had multiple angles and the brand wanted shoppers to see them from the grid.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe added hover arrows on collection cards that cycle through a product's images. On touch devices, a swipe does the same thing. The first image still shows by default so the grid loads fast.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eHover arrows on collection product cards\u003c\/li\u003e\n\u003cli\u003eSwipe support on touch devices\u003c\/li\u003e\n\u003cli\u003eCycles through all product images\u003c\/li\u003e\n\u003cli\u003eFirst image loads by default for speed\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44154835468362,"sku":"TASK-0042","price":0.0,"currency_code":"USD","in_stock":false}]},{"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}]},{"product_id":"display-variant-swatches-on-card-turbo","title":"Display Variant Swatches on Card","description":"\u003cp class=\"task-lead\"\u003eA brand wanted material swatches on collection cards that filtered the product image when clicked.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eWhen you click a material under a product card on the collection page, the card image should switch to that material's photo. Working on a draft theme.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eMaterial choices customers wanted to see before clicking.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe added material swatches to collection cards that swap the card image on click and open the product with that material selected.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eMaterial swatches on collection cards\u003c\/li\u003e\n\u003cli\u003eCard image swaps on click\u003c\/li\u003e\n\u003cli\u003eProduct opens with that material selected\u003c\/li\u003e\n\u003cli\u003eBuilt on the draft theme\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155699658826,"sku":"TASK-0370","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"card-aspect-ratio-and-image-cropping-symmetry","title":"Card Aspect Ratio and Image Cropping","description":"\u003cp class=\"task-lead\"\u003eA brand updating their theme wanted product card images to use a consistent aspect ratio instead of varying by image.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eI'm updating to the latest theme version. Product card images are all different heights and the grid looks uneven. Make them a consistent ratio.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eAn uneven grid from inconsistent product photography.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe set product card images to a fixed aspect ratio with the image fitting within it, so the grid stays even regardless of the source image dimensions.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eConsistent card image aspect ratio\u003c\/li\u003e\n\u003cli\u003eImages fit within the ratio without distortion\u003c\/li\u003e\n\u003cli\u003eRatio selectable in the theme editor\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155701526602,"sku":"TASK-0388","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"hide-and-show-product-info-launch","title":"Hide and Show Product Info","description":"\u003cp class=\"task-lead\"\u003eA retailer wanted the vendor shown on product cards as a logo linking to the brand collection, not as plain text.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eThe theme lets us show the vendor on product cards as text. We want the vendor's logo instead, linking to that brand's collection.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eVendor text that could be a visual.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe replaced the vendor text on product cards with the vendor's logo, linked to the brand collection, with logos managed from a settings list.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eVendor logo on product cards\u003c\/li\u003e\n\u003cli\u003eLinks to the brand collection\u003c\/li\u003e\n\u003cli\u003eLogos managed from settings\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155707195466,"sku":"TASK-0412","price":0.0,"currency_code":"USD","in_stock":false}]}],"url":"https:\/\/www.taskhusky.com\/collections\/product-card-tile-customization.oembed","provider":"TaskHusky","version":"1.0","type":"link"}