Commmerce Docs
← Web Components

Web Components · Product Detail (PDP)

<mmm-pdp-gallery>

Product image gallery with thumbnails, swipe, and zoom.

What it is

The hero gallery on a product detail page. Supports image, video, and 360° sources. Thumbnails sync with the main view; mobile swipe is built-in.

When to use

  • Hero on every PDP
  • Lookbook detail pages
  • Lightbox-only galleries via attribute

Attributes

AttributeTypeDefaultDescription
data-product-idstringcontextInherited from the surroundingor.
data-layoutstringthumbs-bottomthumbs-bottom, thumbs-left, or stacked.
data-zoombooleantrueEnable click-to-zoom and pinch-zoom.
data-aspectstring4:5Aspect ratio for the main view.
idstring—Unique element identifier.
classstring—Custom CSS class list.
hiddenbooleanfalseHide the element without removing it from the DOM.

Examples

Default

Thumbnails below, zoom on click.

<mmm-pdp-gallery></mmm-pdp-gallery>

Stacked vertical

All media stacked vertically — good for editorial PDPs.

<mmm-pdp-gallery data-layout="stacked"></mmm-pdp-gallery>