Product Detail

Product Image Gallery

Product detail image gallery with main stage, thumbnail strip, and fullscreen lightbox.

Overview

ProductImageGallery is the PDP gallery. It pairs a main image stage with a ThumbnailsSlider for quick navigation between media, and opens the cross-image Lightbox for fullscreen viewing.

Auto-import tag: <LProductImageGallery>.

Key Business & UX Benefits

Rich media exploration with thumbnail strip and fullscreen lightbox raises shopper engagement on the PDP, the single strongest predictor of add-to-cart.
Cross-image lightbox lets shoppers compare details (texture, fit, color shifts) without leaving the page, which lowers returns from wrong-look purchases.
The images prop accepts any commerce backend's Media[] shape, so onboarding new catalogs needs no UI rework.

Usage

ProductImageGallery Default

<ProductImageGallery :images="product.images" />

Feature List

Main image stage paired with a ThumbnailsSlider so shoppers jump between media without scrolling
Cross-image Lightbox opens to fullscreen for close-up inspection of texture, fit, or color
Accepts an images Media[] prop so any commerce backend's media shape plugs straight in
Drops into the ProductDetail gallery slot or any custom PDP layout from the same component
Handles mixed media (images and videos) in one collection without per-type wiring

API Reference

Prop	Default	Type
`images`	`[]`	`Media[]`
`hasPadding`	`false`	`boolean`
`lightboxTitle`		`string`
`lightboxSubtitle`		`string`
`aspectRatio`	`1/1`	`string \| number`

Edit this pageorReport an issue

Product Detail

Two-column gallery and content layout for product detail pages.

Product Title

PDP product title block with brand line, product name, and optional brand logo.