Product Details Slots

The Product Details drop-in exposes 19 slots in 4 containers for customizing specific UI sections. Use slots to replace or extend container components. For default properties available to all slots, see Extending drop-in components.

Version: 1.3.5

Container	Slots
ProductAttributes	Attributes
ProductDetails	Title, SKU, RegularPrice, SpecialPrice, Options, Quantity, Actions, ShortDescription, Description, Attributes, Breadcrumbs, GalleryContent, InfoContent, Content
ProductGallery	CarouselThumbnail, CarouselMainImage
ProductOptions	Swatches, SwatchImage

ProductAttributes slots

interface ProductAttributesProps

slots?: {
  Attributes?: SlotProps<DefaultSlotContext>;
};

---

ProductDetails slots

interface ProductDetailsProps

slots?: {
  Title?: SlotProps<DefaultSlotContext>;
  SKU?: SlotProps<DefaultSlotContext>;
  RegularPrice?: SlotProps<DefaultSlotContext>;
  SpecialPrice?: SlotProps<DefaultSlotContext>;
  Options?: SlotProps<DefaultSlotContext>;
  Quantity?: SlotProps<DefaultSlotContext>;
  Actions?: SlotProps<
    DefaultSlotContext & {
    appendButton: SlotMethod<
    Omit<ButtonProps, 'icon'> & {
    text?: string;
    icon?: IconType;
  }
    >;
  }
    >;
  ShortDescription?: SlotProps<DefaultSlotContext>;
  Description?: SlotProps<DefaultSlotContext>;
  Attributes?: SlotProps<DefaultSlotContext>;
  Breadcrumbs?: SlotProps<
    DefaultSlotContext & {
    setSeparator: SlotMethod<IconType>;
    appendLink: SlotMethod<
    HTMLAttributes<HTMLAnchorElement> & { text?: string }
    >;
    appendHTMLElement: SlotMethod<HTMLElement>;
  }
    >;
  GalleryContent?: SlotProps<DefaultSlotContext>;
  InfoContent?: SlotProps<DefaultSlotContext>;
  Content?: SlotProps<DefaultSlotContext>;
};

---

ProductGallery slots

interface ProductGalleryProps

slots?: {
  CarouselThumbnail?: SlotProps<
    DefaultSlotContext & { defaultImageProps: ImageProps }
    >;
  CarouselMainImage?: SlotProps<
    DefaultSlotContext & { defaultImageProps: ImageProps }
    >;
};

CarouselThumbnail example

This example from the Product Details block shows how to customize the CarouselThumbnail slot:

import { render as provider } from '@dropins/storefront-pdp/render.js';
import ProductGallery from '@dropins/storefront-pdp/containers/ProductGallery.js';
import { tryRenderAemAssetsImage } from '@dropins/tools/lib/aem/assets.js';
// Note: `imageSlotConfig` should be defined in your block context (helper function for image slot configuration)

provider.render(ProductGallery, {
  slots: {
    CarouselThumbnail: (ctx) => {
      tryRenderAemAssetsImage(ctx, {
        ...imageSlotConfig(ctx),
        wrapper: document.createElement('span'),
      });
    }
  }
})(document.querySelector('.product-gallery'));

CarouselMainImage example

This example from the Product Details block shows how to customize the CarouselMainImage slot:

import { render as provider } from '@dropins/storefront-pdp/render.js';
import ProductGallery from '@dropins/storefront-pdp/containers/ProductGallery.js';
import { tryRenderAemAssetsImage } from '@dropins/tools/lib/aem/assets.js';
// Note: `imageSlotConfig` should be defined in your block context (helper function for image slot configuration)

provider.render(ProductGallery, {
  slots: {
    CarouselMainImage: (ctx) => {
      tryRenderAemAssetsImage(ctx, {
        ...imageSlotConfig(ctx),
      });
    }
  }
})(document.querySelector('.product-gallery'));

---

ProductOptions slots

interface ProductOptionsProps

slots?: {
  Swatches?: SlotProps<{ data: ProductModel | null; optionsUIDs: string[] }>;
  SwatchImage?: SlotProps<{
    data: ProductModel | null;
    optionsUIDs: string[];
    imageSwatchContext: ImageNodeRenderProps['imageSwatchContext'];
    defaultImageProps: ImageProps;
  }>;
};

SwatchImage example

This example from the Product Details block shows how to customize the SwatchImage slot:

import { render as provider } from '@dropins/storefront-pdp/render.js';
import ProductOptions from '@dropins/storefront-pdp/containers/ProductOptions.js';
import { tryRenderAemAssetsImage } from '@dropins/tools/lib/aem/assets.js';
// Note: `imageSlotConfig` should be defined in your block context (helper function for image slot configuration)

provider.render(ProductOptions, {
  slots: {
    SwatchImage: (ctx) => {
      tryRenderAemAssetsImage(ctx, {
        ...imageSlotConfig(ctx),
        wrapper: document.createElement('span'),
      });
    }
  }
})(document.querySelector('.product-options'));

---