ProductGallery

The ProductGallery container displays a gallery of product images and videos on the product details page.

The container receives initial product data during initialization to preload the component and, being event-driven, updates with data emitted to pdp/data within the event scope.

ProductGallery configurations

The ProductGallery container provides the following configuration options:

Option	Type	Req?	Description
controls	string	No	Type of controls for navigation. Options are thumbnailsRow, thumbnailsColumn, dots, or null. Defaults to dots.
loop	boolean	No	Whether to loop the images in the carousel. Defaults to true.
peak	boolean	No	Whether to enable the peak feature. Defaults to false.
gap	string	No	Gap size between images. Options are small, medium, large, or null. Defaults to null.
arrows	boolean	No	Whether to display navigation arrows. Defaults to true.
imageParams	object	No	Parameters for resolving image URLs.
thumbnailParams	object	No	Parameters for resolving thumbnail URLs.
zoom	boolean or object	No	Configuration for the zoom feature. If an object, it can have a closeButton property to show a close button. Defaults to false.
videos	boolean or object	No	Configuration for video support in the gallery. Set to true to enable videos (positioned after images) or pass an object with a position property. Defaults to false (disabled).
scope	string	No	Unique identifier for the PDP context. Only containers rendered with this scope will respond to product events.

Videos

The videos prop enables product video support in the gallery carousel. The following usage example shows the different configuration options: disabled (default), enabled, and placing your videos before or after your static images within the carousel.

Usage

// Disabled (default) — backward compatible
<ProductGallery />
<ProductGallery videos={false} />

// Enabled — videos appear after images
<ProductGallery videos />
<ProductGallery videos={true} />

// Videos appear before images
<ProductGallery videos={{ position: 'first' }} />

// Videos appear after images (explicit)
<ProductGallery videos={{ position: 'last' }} />

Supported video sources

The gallery supports multiple video sources and formats, rendering each based on its URL type.

Video source	Render method
Video file URLs — URLs that resolve directly to a video file (.mp4, .webm, .ogg, .mov, .avi, .mkv)	Native <video> element with playback controls
Video platform URLs (YouTube, Vimeo, etc.)	<iframe> with embedded player

Example

The following example demonstrates how to configure the ProductGallery container with video support.

return productRenderer.render(ProductGallery, {
  controls: 'thumbnailsRow',
  loop: true,
  peak: false,
  gap: 'medium',
  arrows: true,
  imageParams: {
    width: 800,
    height: 800,
  },
  thumbnailParams: {
    width: 150,
    height: 150,
  },
  zoom: {
    closeButton: true,
  },
  videos: true,
});