{"title":"Product Image Gallery \u0026 Zoom \u0026 Lightbox","description":"\u003cp\u003eProduct Image Gallery \u0026amp; Zoom \u0026amp; Lightbox 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 217 product image gallery \u0026amp; zoom \u0026amp; lightbox requests for merchants, including work on Pacific, Prestige, Dawn and Atlantic. Below are 7 real examples with the request, the approach and what shipped.\u003c\/p\u003e","products":[{"product_id":"lightbox-and-modal-image-popup-pacific","title":"Lightbox and Modal Image Popup","description":"\u003cp class=\"task-lead\"\u003eA jewelry brand wanted product images to open in a full-screen lightbox so customers could inspect detail before buying.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eThis is a high-end jewelry site. Customers need to see the detail. I want images to open in a lightbox with zoom, and to be able to move between images without closing it.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eHigh-value products need close inspection. The theme's gallery didn't enlarge enough.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe added a lightbox to product images that opens full-screen with zoom, arrows to move between images, and swipe on mobile. It uses the full-resolution images so detail holds up.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eFull-screen lightbox on product images\u003c\/li\u003e\n\u003cli\u003eZoom within the lightbox\u003c\/li\u003e\n\u003cli\u003eArrow and swipe navigation between images\u003c\/li\u003e\n\u003cli\u003eFull-resolution images used\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155511570506,"sku":"TASK-0072","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"image-zoom-on-hover-and-click-prestige","title":"Image Zoom on Hover and Click","description":"\u003cp class=\"task-lead\"\u003eA jewelry brand had a punch list of product page changes: breadcrumbs, price placement, and image zoom.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eAdd breadcrumbs to the product page. Move the price from the top to under the title. Add zoom on the product images. Screenshots attached.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eThree small changes that together made the product page feel finished.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe added breadcrumbs above the product, moved the price under the title, and added hover zoom on desktop with pinch zoom on mobile for the product images.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eBreadcrumbs on product pages\u003c\/li\u003e\n\u003cli\u003ePrice repositioned under the title\u003c\/li\u003e\n\u003cli\u003eHover zoom on desktop\u003c\/li\u003e\n\u003cli\u003ePinch zoom on mobile\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155678589002,"sku":"TASK-0138","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"image-slider-and-carousel-on-product-page-dawn","title":"Image Slider and Carousel on Product Page","description":"\u003cp class=\"task-lead\"\u003eA brand wanted the product image slider replaced with one that had bullets and arrows instead of thumbnails.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eI want a product image slider with bullets and arrows, not thumbnails. Sample attached. It should swap to the variant image when a variant is selected.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eThumbnails took space. Bullets and arrows didn't.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe replaced the product gallery with a slider that uses bullets and arrows, swipes on mobile, and jumps to the correct image when a variant is selected.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eProduct image slider with bullets and arrows\u003c\/li\u003e\n\u003cli\u003eSwipe on mobile\u003c\/li\u003e\n\u003cli\u003eJumps to variant image on selection\u003c\/li\u003e\n\u003cli\u003eThumbnails removed\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155687075914,"sku":"TASK-0220","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"thumbnail-gallery-position-atlantic","title":"Thumbnail Gallery Position","description":"\u003cp class=\"task-lead\"\u003eA brand wanted the product thumbnails moved to a vertical strip beside the main image instead of below it.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eTwo improvements to the product page thumbnail gallery: thumbnails vertical on the left side of the main image, and scrollable when there are many.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eA gallery layout preference.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe moved the thumbnails to a vertical scrollable strip on the left of the main image, and set them to move beneath the main image on mobile.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eVertical thumbnail strip beside the main image\u003c\/li\u003e\n\u003cli\u003eScrollable for many images\u003c\/li\u003e\n\u003cli\u003eThumbnails beneath on mobile\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155700478026,"sku":"TASK-0385","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"multi-image-display-canopy","title":"Multi-Image Display","description":"\u003cp class=\"task-lead\"\u003eA brand wanted the lightbox zoom removed on desktop so product images showed inline at full size instead.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eOn desktop, disable the popup lightbox when clicking an image. Show all images inline at full size, stacked, so customers just scroll.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eA lightbox that interrupted browsing.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe removed the lightbox on desktop and set the product gallery to display all images stacked at full size, with the thumbnail strip retained for jumping between them.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eLightbox disabled on desktop\u003c\/li\u003e\n\u003cli\u003eImages stacked at full size\u003c\/li\u003e\n\u003cli\u003eThumbnail strip for navigation\u003c\/li\u003e\n\u003cli\u003eMobile gallery unchanged\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155720237130,"sku":"TASK-0459","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"image-alt-text-and-seo-pacific","title":"Image Alt Text and SEO","description":"\u003cp class=\"task-lead\"\u003eA brand using image alt text to embed videos in the gallery needed it working after a theme update, and alt text corrected for SEO.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eThe theme lets you embed videos in product images through the alt text. It stopped working after the update. And our alt text needs cleaning up for SEO.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eA dual-purpose alt text setup that broke.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe restored the video embed behavior on the updated theme and audited product image alt text so it describes images properly for search engines.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eVideo embed via alt text restored\u003c\/li\u003e\n\u003cli\u003eAlt text audited and corrected\u003c\/li\u003e\n\u003cli\u003eSEO-friendly descriptions\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155725283402,"sku":"TASK-0488","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"swipe-between-images-on-mobile-mobilia","title":"Swipe Between Images on Mobile","description":"\u003cp class=\"task-lead\"\u003eA brand wanted swipe between product images on mobile and a lightbox on desktop.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eOn product pages, swipe between images on mobile, and a lightbox on desktop when you click an image.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eDifferent gallery behavior per device.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe set the product gallery to swipe on mobile with dots indicating position, and open a lightbox on desktop with arrows between images.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eSwipe between images on mobile\u003c\/li\u003e\n\u003cli\u003ePosition dots on mobile\u003c\/li\u003e\n\u003cli\u003eLightbox on desktop with arrows\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155725316170,"sku":"TASK-0489","price":0.0,"currency_code":"USD","in_stock":false}]}],"url":"https:\/\/www.taskhusky.com\/collections\/product-image-gallery-zoom-lightbox.oembed","provider":"TaskHusky","version":"1.0","type":"link"}