Skip to content
Adobe Commerce Storefront
Docs Playgrounds Videos

PDP containers

The product details page (PDP) drop-in component has a single container called ProductDetails. The container’s configuration options are provided below.

Configuration options

The product details page provides the following configuration options:

OptionTypeReq?Description
skustringYesThe unique identifier for the product.
hideSkubooleanNoOptional boolean to hide the SKU display.
hideQuantitybooleanNoHides the quantity selector if set to true.
hideSelectedOptionValuebooleanNoHides the selected values of the option.
hideShortDescriptionbooleanNoHides the short description if set to true.
hideDescriptionbooleanNoHides the description if set to true.
hideAttributesbooleanNoHides the attributes if set to true.
hideURLParamsbooleanNoDisables synchronization of options with URL parameters if true.
productDataProductModelNoOptional initial product data to preload the component.
slotsobjectNoAn object containing slot overrides for customizing various parts of the component display.
carouselCarouselConfigNoConfiguration for the product image carousel display.
onAddToCartfunctionNoCallback function triggered upon adding the product to the cart.
zoomTypestringNoSpecifies the type of zoom functionality for a product image. Options: "zoom" or "overlay".
closeButtonbooleanNoIndicates whether a close button should be displayed.

SKU

The sku property is the only required configuration. It’s a string that uniquely identifies the product. This value is used to fetch ProductModel data from the backend.

Hide options

The hide options (hideSku, hideQuantity, and the others) let you hide the parts of the product details UI that are not relevant for your storefront. These properties are optional and default to false.

Product Data

The productData property is an optional object that contains the initial product data to preload the component. The object should follow the ProductModel interface:

interface ProductModel {
  name: string;
  sku: string;
  addToCartAllowed: boolean;
  inStock: boolean | null;
  shortDescription?: string;
  metaDescription?: string;
  metaKeyword?: string;
  metaTitle?: string;
  description?: string;
  images?: Image[];
  prices: Prices;
  attributes?: Attribute[];
  options?: Option[];
  optionUIDs?: string[];
  url?: string;
  urlKey?: string;
  externalId?: string;
  externalParentId?: string;
  variantSku?: string;
}

View the Example configuration section for an example of how to use this property.

Slots

Slots allow for the customization of component parts. Each slot accepts a SlotProps object with a context containing data, values, and a valid state. Custom actions and content can be added through these slots. Visit the Slots page for slot details and usage information.

The Carousel settings available for configuration are defined in the CarouselConfig interface:

interface CarouselConfig {
  controls?: {
    desktop?: 'thumbnailsRow' | 'thumbnailsColumn' | 'dots' | null;
    mobile?: 'dots' | 'thumbnailsRow' | null;
  };
  arrowsOnMainImage?: boolean;
  loopable?: boolean;
  peak?: {
    desktop?: boolean;
    mobile?: boolean;
  };
  gap?: 'small' | 'medium' | 'large' | null;
  thumbnailsLoadingMode?: 'lazy' | 'eager';
  imageParams?: ResolveImageUrlOptions;
  thumbnailParams?: ResolveImageUrlOptions;
}
OptionTypeReq?Description
controlsstringNoLayout options: thumbnailsRow, thumbnailsColumn, or dots.
arrowOnMainImagebooleanNoWhether to display the carousel arrows on the main image.
loopablebooleanNoWhether the carousel should loop continously or stop at the end.
peakobjectNoWhether to show part of the next image on mobile and desktop.
gapstringNoThe space between the image and the next one.
thumbnailsLoadingModestringNoThe loading mode for the thumbnails: lazy or eager.
imageParamsobjectNoCan be used to set the width, height, auto, quality, crop, and fit properties of carousel images.
thumbnailParamsobjectNoCan be used to the set width, height, auto, quality, crop, and fit properties of the carousel thumbnails.

The Example configuration section shows a usage example for carousel.

onAddToCart

Triggered when the Add to Cart button is clicked. Receives an object with sku, quantity, and optionally optionsUIDs reflecting the user’s selection.

// values: Values { sku: string, quantity: number, optionsUIDs: string[] }
onAddToCart: (values) => void;

zoomType

This property can take one of two string values: zoom or overlay. It is used to enhance product image viewing by providing zoom or overlay functionality:

  • overlay (default): Provides a larger, distraction-free view of a product image. The clicked image is opened in full screen.
  • zoom: Provides a close-up view of the product’s image in the gallery. The clicked image is not opened in full screen.

closeButton

This property is a boolean that can only be used in combination with the zoomType property. The default value is false. If true, the close button is shown; if false or not provided, the close button is not shown.

Example configuration

The following example demonstrates how to configure the product details container:

return productRenderer.render(ProductDetails, {
  sku: yourGetSkuFetchFunction(),
  hideSku: false,
  initialData: {
    name: 'Product Name',
    sku: '12345',
    addToCartAllowed: false;
    inStock: true,
    shortDescription: 'Short description of the product.',
    description: 'Long description of the product.',
    images: [
      { url: 'https://via.placeholder.com/150', label: 'Product image', width: 150, height: 150},
      { url: 'https://via.placeholder.com/150', label: 'Product image', width: 150, height: 150},
    ],
  },
  hideQuantity: false,
  hideShortDescription: false,
  hideDescription: false,
  hideAttributes: false,
  hideURLParams: false,
  carousel: {
    controls: {
      desktop: 'thumbnailsRow', // | 'thumbnailsColumn' | 'dots' | null,
      mobile: 'dots', // | 'thumbnailsRow' | null,
    }
    arrowsOnMainImage: true,
    loopable: true,
    peak: {
      mobile: true,
      desktop: true,
    }
    thumbnailsLoadingMode: 'lazy', // 'lazy' | 'eager';
    imageParams: ResolveImageUrlOptions,
    thumbnailParams: ResolveImageUrlOptions,
  },
  zoomType: 'zoom',
  closeButton: true,
  slots: {
    // See all PDP slots in the next section
    Title: { },
    SKU: { },
  },
  onAddToCart: (values) => console.log('Added to cart', values),
});