Skip to content
Adobe Commerce Storefront
Docs Playgrounds Videos

PDP Container

The PDP dropin has a single container called ProductDetails. The container’s configuration options are provided below.

Configurations

The Product Details container 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.
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.

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.

ProductData

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;
  description?: string;
  images?: Image[];
  prices: Prices;
  attributes?: Attribute[];
  options?: Option[];
  optionUIDs?: string[];
  url?: string;
  urlKey?: string;
  externalId?: 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;

Example configuration

The following example demonstrates how to configure the Product Details container:

return productRenderer.render(ProductDetails, {
  sku: yourGetSkuFetchFunction(),
  hideSku: false,
  productData: {
    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,
  },
  slots: {
    // See all PDP slots in the next section
    Title: { },
    SKU: { },
  },
  onAddToCart: (values) => console.log('Added to cart', values),
});