Product Details Slots

The Product Details drop-in exposes slots 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

The slots for the ProductAttributes container allow you to customize its appearance and behavior.

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

Attributes slot

The Attributes slot allows you to customize the attributes section of the ProductAttributes container.

Example

import { render as provider } from '@dropins/storefront-pdp/render.js';
import { ProductAttributes } from '@dropins/storefront-pdp/containers/ProductAttributes.js';

await provider.render(ProductAttributes, {
  slots: {
    Attributes: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom Attributes';
      ctx.appendChild(element);
    }
  }
})(block);

ProductDetails slots

The slots for the ProductDetails container allow you to customize its appearance and behavior.

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>;
  };
}

Title slot

The Title slot allows you to customize the title section of the ProductDetails container.

Example

import { render as provider } from '@dropins/storefront-pdp/render.js';
import { ProductDetails } from '@dropins/storefront-pdp/containers/ProductDetails.js';

await provider.render(ProductDetails, {
  slots: {
    Title: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom Title';
      ctx.appendChild(element);
    }
  }
})(block);

SKU slot

The SKU slot allows you to customize the s k u section of the ProductDetails container.

Example

import { render as provider } from '@dropins/storefront-pdp/render.js';
import { ProductDetails } from '@dropins/storefront-pdp/containers/ProductDetails.js';

await provider.render(ProductDetails, {
  slots: {
    SKU: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom SKU';
      ctx.appendChild(element);
    }
  }
})(block);

RegularPrice slot

The RegularPrice slot allows you to customize the regular price section of the ProductDetails container.

Example

import { render as provider } from '@dropins/storefront-pdp/render.js';
import { ProductDetails } from '@dropins/storefront-pdp/containers/ProductDetails.js';

await provider.render(ProductDetails, {
  slots: {
    RegularPrice: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom RegularPrice';
      ctx.appendChild(element);
    }
  }
})(block);

SpecialPrice slot

The SpecialPrice slot allows you to customize the special price section of the ProductDetails container.

Example

import { render as provider } from '@dropins/storefront-pdp/render.js';
import { ProductDetails } from '@dropins/storefront-pdp/containers/ProductDetails.js';

await provider.render(ProductDetails, {
  slots: {
    SpecialPrice: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom SpecialPrice';
      ctx.appendChild(element);
    }
  }
})(block);

Options slot

The Options slot allows you to customize the options section of the ProductDetails container.

Example

import { render as provider } from '@dropins/storefront-pdp/render.js';
import { ProductDetails } from '@dropins/storefront-pdp/containers/ProductDetails.js';

await provider.render(ProductDetails, {
  slots: {
    Options: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom Options';
      ctx.appendChild(element);
    }
  }
})(block);

Quantity slot

The Quantity slot allows you to customize the quantity section of the ProductDetails container.

Example

import { render as provider } from '@dropins/storefront-pdp/render.js';
import { ProductDetails } from '@dropins/storefront-pdp/containers/ProductDetails.js';

await provider.render(ProductDetails, {
  slots: {
    Quantity: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom Quantity';
      ctx.appendChild(element);
    }
  }
})(block);

ShortDescription slot

The ShortDescription slot allows you to customize the short description section of the ProductDetails container.

Example

import { render as provider } from '@dropins/storefront-pdp/render.js';
import { ProductDetails } from '@dropins/storefront-pdp/containers/ProductDetails.js';

await provider.render(ProductDetails, {
  slots: {
    ShortDescription: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom ShortDescription';
      ctx.appendChild(element);
    }
  }
})(block);

Description slot

The Description slot allows you to customize the description section of the ProductDetails container.

Example

import { render as provider } from '@dropins/storefront-pdp/render.js';
import { ProductDetails } from '@dropins/storefront-pdp/containers/ProductDetails.js';

await provider.render(ProductDetails, {
  slots: {
    Description: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom Description';
      ctx.appendChild(element);
    }
  }
})(block);

Attributes slot

The Attributes slot allows you to customize the attributes section of the ProductDetails container.

Example

import { render as provider } from '@dropins/storefront-pdp/render.js';
import { ProductDetails } from '@dropins/storefront-pdp/containers/ProductDetails.js';

await provider.render(ProductDetails, {
  slots: {
    Attributes: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom Attributes';
      ctx.appendChild(element);
    }
  }
})(block);

Breadcrumbs slot

The Breadcrumbs slot allows you to customize the breadcrumbs section of the ProductDetails container.

Example

import { render as provider } from '@dropins/storefront-pdp/render.js';
import { ProductDetails } from '@dropins/storefront-pdp/containers/ProductDetails.js';

await provider.render(ProductDetails, {
  slots: {
    Breadcrumbs: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom Breadcrumbs';
      ctx.appendChild(element);
    }
  }
})(block);

GalleryContent slot

The GalleryContent slot allows you to customize the gallery content section of the ProductDetails container.

Example

import { render as provider } from '@dropins/storefront-pdp/render.js';
import { ProductDetails } from '@dropins/storefront-pdp/containers/ProductDetails.js';

await provider.render(ProductDetails, {
  slots: {
    GalleryContent: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom GalleryContent';
      ctx.appendChild(element);
    }
  }
})(block);

InfoContent slot

The InfoContent slot allows you to customize the info content section of the ProductDetails container.

Example

import { render as provider } from '@dropins/storefront-pdp/render.js';
import { ProductDetails } from '@dropins/storefront-pdp/containers/ProductDetails.js';

await provider.render(ProductDetails, {
  slots: {
    InfoContent: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom InfoContent';
      ctx.appendChild(element);
    }
  }
})(block);

Content slot

The Content slot allows you to customize the content section of the ProductDetails container.

Example

import { render as provider } from '@dropins/storefront-pdp/render.js';
import { ProductDetails } from '@dropins/storefront-pdp/containers/ProductDetails.js';

await provider.render(ProductDetails, {
  slots: {
    Content: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom Content';
      ctx.appendChild(element);
    }
  }
})(block);

ProductGallery slots

The slots for the ProductGallery container allow you to customize its appearance and behavior.

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

CarouselThumbnail slot

The CarouselThumbnail slot allows you to customize the carousel thumbnail section of the ProductGallery container.

Example

import { render as provider } from '@dropins/storefront-pdp/render.js';
import { ProductGallery } from '@dropins/storefront-pdp/containers/ProductGallery.js';

await provider.render(ProductGallery, {
  slots: {
    CarouselThumbnail: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom CarouselThumbnail';
      ctx.appendChild(element);
    }
  }
})(block);

CarouselMainImage slot

The CarouselMainImage slot allows you to customize the carousel main image section of the ProductGallery container.

Example

import { render as provider } from '@dropins/storefront-pdp/render.js';
import { ProductGallery } from '@dropins/storefront-pdp/containers/ProductGallery.js';

await provider.render(ProductGallery, {
  slots: {
    CarouselMainImage: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom CarouselMainImage';
      ctx.appendChild(element);
    }
  }
})(block);

ProductOptions slots

The slots for the ProductOptions container allow you to customize its appearance and behavior.

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

Swatches slot

The Swatches slot allows you to customize the swatches section of the ProductOptions container.

Example

import { render as provider } from '@dropins/storefront-pdp/render.js';
import { ProductOptions } from '@dropins/storefront-pdp/containers/ProductOptions.js';

await provider.render(ProductOptions, {
  slots: {
    Swatches: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom Swatches';
      ctx.appendChild(element);
    }
  }
})(block);

SwatchImage slot

The SwatchImage slot allows you to customize the swatch image section of the ProductOptions container.

Example

import { render as provider } from '@dropins/storefront-pdp/render.js';
import { ProductOptions } from '@dropins/storefront-pdp/containers/ProductOptions.js';

await provider.render(ProductOptions, {
  slots: {
    SwatchImage: (ctx) => {
      // Your custom implementation
      const element = document.createElement('div');
      element.innerText = 'Custom SwatchImage';
      ctx.appendChild(element);
    }
  }
})(block);