Skip to content

Search is only available in production builds. Try building and previewing the site to test it out locally.

ProductGallery

The ProductGallery container displays a gallery of product images 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
controlsstringNo Type of controls for navigation. Options are thumbnailsRow, thumbnailsColumn, dots, or null. Defaults to dots.
loopbooleanNo Whether to loop the images in the carousel. Defaults to true.
peakbooleanNo Whether to enable the peak feature. Defaults to false.
gapstringNo Gap size between images. Options are small, medium, large, or null. Defaults to null.
arrowsbooleanNo Whether to display navigation arrows. Defaults to true.
imageParamsobjectNo Parameters for resolving image URLs.
thumbnailParamsobjectNo Parameters for resolving thumbnail URLs.
zoomobject or booleanNo Configuration for the zoom feature. If an object, it can have a closeButton property to show a close button. Defaults to false.
scopestringNo Unique identifier for the PDP context. Only containers rendered with this scope will respond to product events.

Example

The following example demonstrates how to configure the ProductGallery container:

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