Custom Product Image Gallery for Magento 2

Custom Product Image Gallery for Magento 2 — replace the default product media gallery with a fast, configurable gallery supporting horizontal, vertical and grid thumbnail layouts, inner and lens image zoom, fullscreen lightbox, responsive navigation, full Hyva and Luma compatibility, and an optional soft dependency on Panth Advanced SEO for automatic image alt-text generation.

Panth Product Gallery gives merchants total control over how product images are presented on the product detail page. Choose between horizontal thumbnails (classic below-main-image strip), vertical thumbnails (side rail on desktop, strip on mobile), or a grid layout (Amazon/Etsy style). Enable inner zoom for hover magnification directly inside the main image, lens zoom for a floating magnifier window, or a fullscreen lightbox that opens the full-resolution image with swipe and keyboard navigation. Everything is responsive, touch-friendly, and tuned for Core Web Vitals on both Hyva (Alpine.js + Tailwind) and Luma (Knockout.js) storefronts. When Panth Advanced SEO is installed, the gallery automatically pulls AI-generated alt text into every <img> tag for better accessibility and SEO.

Get a free quote for your project in 24 hours — custom gallery layouts, PDP redesigns, Hyva migration, performance optimization, and Adobe Commerce Cloud.

Visit our website: kishansavaliya.com  |  Get a quote: kishansavaliya.com/get-quote

• Key Features
• Compatibility
• Installation
• Configuration
• Advanced SEO Integration
• FAQ
• Support
• About Panth Infotech
• Quick Links

Configurable Thumbnail Layouts

• Horizontal layout — traditional strip of thumbnails below the main image
• Vertical layout — thumbnails on the side rail (desktop), collapsing to a horizontal strip on mobile
• Grid layout — Amazon/Etsy-style multi-column grid showing all images at once
• Thumbnail count & size — configurable number of visible thumbnails and pixel dimensions
• Active state styling — border, shadow, and scale transitions for the selected thumbnail

Image Zoom Modes

• Inner zoom — magnify the image in place on hover, no overlay required
• Lens zoom — floating magnifier lens with a side preview window
• Fullscreen lightbox — click to open the full-resolution image in a modal with swipe, pinch-zoom, and keyboard navigation
• Zoom level control — adjustable zoom factor (1.5x to 4x)
• Touch-friendly — pinch-zoom and swipe gestures on mobile and tablet

Responsive Navigation

• Prev/next arrows with keyboard support (arrow keys, Escape to close)
• Dot indicators and image counter (e.g. "3 / 12")
• Swipe navigation on touch devices
• Auto-slide option with configurable interval
• Infinite loop or stop-at-ends behaviour

Theme Support

• Hyva compatible — Alpine.js components, Tailwind CSS utility classes, no jQuery
• Luma compatible — Knockout.js bindings that cleanly replace the default gallery.phtml
• Automatic theme detection — via Panth\Core\Helper\Theme, the correct template is served without any manual switching
• Child-theme safe — templates can be overridden from your own custom theme

SEO & Accessibility

• Alt text from Panth Advanced SEO — optional soft dependency; when installed, every image pulls its AI-generated alt text automatically
• Semantic HTML — proper <figure>, <img>, aria-label, and role attributes
• Keyboard navigable — full keyboard support (Tab, Enter, arrows, Escape)
• Lazy loading — loading="lazy" and decoding="async" on non-primary images
• Structured image URLs — preserves Magento media paths for CDN compatibility

Performance

• No jQuery on Hyva — pure Alpine.js, minimal JS payload
• CSS-only transitions where possible — hardware-accelerated transforms
• Lazy-loaded thumbnails — off-screen thumbs defer loading
• Optimized for Core Web Vitals — minimal CLS, fast LCP on the main image

Tested on:

• Magento 2.4.8-p4 with PHP 8.4 (Hyva 1.3.x)
• Magento 2.4.7 with PHP 8.3 (Luma)
• Magento 2.4.6 with PHP 8.2

Composer Installation (Recommended)

composer require mage2kishan/module-productgallery
bin/magento module:enable Panth_Core Panth_ProductGallery
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento setup:static-content:deploy -f
bin/magento cache:flush

Manual Installation via ZIP

1. Download the latest release ZIP from Packagist or the Adobe Commerce Marketplace
2. Extract the contents to app/code/Panth/ProductGallery/ in your Magento installation
3. Run the same commands as above starting from bin/magento module:enable

Verify Installation

bin/magento module:status Panth_ProductGallery
# Expected output: Module is enabled

After installation, navigate to:

Admin → Stores → Configuration → Panth Extensions → Product Gallery

All settings live at Stores → Configuration → Panth Extensions → Product Gallery.

General

Zoom

Navigation

Panth Product Gallery has a soft dependency on Panth Advanced SEO. When Advanced SEO is installed and enabled, the gallery automatically uses its AI-generated image alt text for every <img> tag — no manual alt text management required.

Without Advanced SEO, the gallery falls back to Magento's standard image label / product name pattern. You can still use the gallery fully without installing Advanced SEO; the integration is purely additive.

Does this replace Magento's default product gallery?

Yes, on the product detail page. When the module is enabled, the default gallery.phtml is replaced with the Panth gallery (one template for Hyva, another for Luma — chosen automatically).

Does it work with configurable product swatches?

Yes. When a customer picks a colour/size swatch, the gallery swaps to the correct variant images using Magento's standard gallery JSON payload.

Does it work with video (YouTube / Vimeo)?

Yes. Magento product video entries are rendered inline with a play-button thumbnail; clicking opens the video in the lightbox.

Is Hyva compatible?

Yes — fully. The module ships an Alpine.js implementation that does not depend on jQuery or Knockout, and installs automatically when the store theme is Hyva.

Does it affect Core Web Vitals?

Positively. The Hyva implementation uses a minimal JS payload and lazy-loads thumbnails, which typically improves LCP and reduces CLS versus the default gallery.

Can I override the template in my child theme?

Yes. Copy view/frontend/templates/product/view/gallery.phtml (Luma) or the equivalent file under the Hyva area into your own theme and customize freely.

Does it support multi-store and multi-language?

Yes. All configuration respects Magento's scope hierarchy (default → website → store view) and all user-facing strings are translatable via Magento's __() function.

Does it require Panth Advanced SEO?

No, it is an optional soft dependency. Advanced SEO only improves alt-text quality; the gallery works standalone.

Response time: 1-2 business days.

Need Custom Magento Development?

Looking for custom gallery layouts, PDP redesigns, Hyva migration, or performance optimization? Get a free quote in 24 hours:

Built and maintained by Kishan Savaliya — kishansavaliya.com — a Top Rated Plus Magento developer on Upwork with 10+ years of eCommerce experience.

Panth Infotech is a Magento 2 development agency specializing in high-quality, security-focused extensions and themes for both Hyva and Luma storefronts. Our extension suite covers SEO, performance, checkout, product presentation, customer engagement, and store management — over 34 modules built to MEQP standards and tested across Magento 2.4.4 to 2.4.8.

Browse the full extension catalog on the Adobe Commerce Marketplace or Packagist.

• Website: kishansavaliya.com
• Get a Quote: kishansavaliya.com/get-quote
• Upwork Profile (Top Rated Plus): upwork.com/freelancers/~016dd1767321100e21
• Upwork Agency: upwork.com/agencies/1881421506131960778
• Packagist: packagist.org/packages/mage2kishan/module-productgallery
• GitHub: github.com/mage2sk/module-productgallery
• Adobe Marketplace: commercemarketplace.adobe.com
• Email: kishansavaliyakb@gmail.com
• WhatsApp: +91 84012 70422

Ready to upgrade your Magento 2 product pages?

SEO Keywords: magento 2 product gallery, magento 2 image zoom, magento 2 lightbox, magento 2 product images, magento 2 gallery widget, magento 2 thumbnail layout, hyva product gallery, luma product gallery, magento 2 product image slider, magento 2 fullscreen image, magento 2 zoom extension, magento 2 product media gallery, magento 2 inner zoom, magento 2 lens zoom, magento 2 product page gallery, magento 2 PDP gallery, magento 2 responsive gallery, magento 2 mobile gallery, magento 2 image alt text, magento 2 SEO gallery, panth product gallery, panth infotech, hire magento developer, top rated plus upwork, kishan savaliya magento, mage2kishan, mage2sk, magento 2.4.8 gallery, php 8.4 magento module, hyva gallery alpine js, luma gallery knockout, magento 2 product image customization