Cart Slots

The Cart 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: 3.0.0-beta1

Container	Slots
CartSummaryGrid	Thumbnail
CartSummaryList	Heading, EmptyCart, Footer, Thumbnail, ProductAttributes, CartSummaryFooter, CartItem, UndoBanner, ItemTitle, ItemPrice, ItemQuantity, ItemTotal, ItemSku, ItemRemoveAction
GiftOptions	SwatchImage
MiniCart	ProductList, ProductListFooter, PreCheckoutSection, Thumbnail, Heading, EmptyCart, Footer, ProductAttributes, CartSummaryFooter, CartItem, UndoBanner, ItemTitle, ItemPrice, ItemQuantity, ItemTotal, ItemSku, ItemRemoveAction
OrderSummary	EstimateShipping, Coupons, GiftCards

CartSummaryGrid slots

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

interface CartSummaryGridProps {
  slots?: {
    Thumbnail?: SlotProps<{
    item: CartModel['items'][number],
    defaultImageProps: ImageProps
    }>;
  };
}

Thumbnail slot

The Thumbnail slot allows you to customize the thumbnail section of the CartSummaryGrid container.

Example

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

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

CartSummaryList slots

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

interface CartSummaryListProps {
  slots?: {
    Heading?: SlotProps;
    EmptyCart?: SlotProps;
    Footer?: SlotProps;
    Thumbnail?: SlotProps<{
    item: CartModel['items'][number];
    defaultImageProps: ImageProps;
    }>;
    ProductAttributes?: SlotProps;
    CartSummaryFooter?: SlotProps;
    CartItem?: SlotProps;
    UndoBanner?: SlotProps<{
    item: CartModel['items'][0];
    loading: boolean;
    error?: string;
    onUndo: () => void;
    onDismiss: () => void;
    }>;
    ItemTitle?: SlotProps<{ item: CartModel['items'][number] }>;
    ItemPrice?: SlotProps<{ item: CartModel['items'][number] }>;
    ItemQuantity?: SlotProps<{
    item: CartModel['items'][number];
    enableUpdateItemQuantity: boolean;
    handleItemQuantityUpdate: (
    item: CartModel['items'][number],
    quantity: number
    ) => void;
    itemsLoading: Set<string>;
    handleItemsError: (uid: string, message?: string) => void;
    handleItemsLoading: (uid: string, state: boolean) => void;
    onItemUpdate?: ({ item }: { item: CartModel['items'][number] }) => void;
    }>;
    ItemTotal?: SlotProps<{ item: CartModel['items'][number] }>;
    ItemSku?: SlotProps<{ item: CartModel['items'][number] }>;
    ItemRemoveAction?: SlotProps<{
    item: CartModel['items'][number];
    enableRemoveItem: boolean;
    handleItemQuantityUpdate: (
    item: CartModel['items'][number],
    quantity: number
    ) => void;
    handleItemsError: (uid: string, message?: string) => void;
    handleItemsLoading: (uid: string, state: boolean) => void;
    onItemUpdate?: ({ item }: { item: CartModel['items'][number] }) => void;
    itemsLoading: Set<string>;
    }>;
  };
}

Heading slot

The Heading slot allows you to customize the heading section of the CartSummaryList container.

Example

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

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

EmptyCart slot

The EmptyCart slot allows you to customize the empty cart section of the CartSummaryList container.

Example

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

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

Footer slot

The Footer slot allows you to customize the footer section of the CartSummaryList container.

Example

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

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

Thumbnail slot

The Thumbnail slot allows you to customize the thumbnail section of the CartSummaryList container.

Example

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

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

ProductAttributes slot

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

Example

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

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

CartSummaryFooter slot

The CartSummaryFooter slot allows you to customize the cart summary footer section of the CartSummaryList container.

Example

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

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

CartItem slot

The CartItem slot allows you to customize the cart item section of the CartSummaryList container.

Example

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

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

ItemTitle slot

The ItemTitle slot allows you to customize the item title section of the CartSummaryList container.

Example

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

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

ItemPrice slot

The ItemPrice slot allows you to customize the item price section of the CartSummaryList container.

Example

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

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

ItemTotal slot

The ItemTotal slot allows you to customize the item total section of the CartSummaryList container.

Example

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

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

ItemSku slot

The ItemSku slot allows you to customize the item sku section of the CartSummaryList container.

Example

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

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

GiftOptions slots

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

interface GiftOptionsProps {
  slots?: {
    SwatchImage?: SlotProps<{
    item: Item | ProductGiftOptionsConfig
    imageSwatchContext: ImageNodeRenderProps['imageSwatchContext']
    defaultImageProps: ImageProps
    }>;
  };
}

SwatchImage slot

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

Example

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

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

MiniCart slots

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

interface MiniCartProps {
  slots?: {
    ProductList?: SlotProps;
    ProductListFooter?: SlotProps;
    PreCheckoutSection?: SlotProps;
    Thumbnail?: SlotProps<{
    item: CartModel['items'][number];
    defaultImageProps: ImageProps;
    }>;
    Heading?: SlotProps;
    EmptyCart?: SlotProps;
    Footer?: SlotProps;
    ProductAttributes?: SlotProps;
    CartSummaryFooter?: SlotProps;
    CartItem?: SlotProps;
    UndoBanner?: SlotProps<{
    item: CartModel['items'][0];
    loading: boolean;
    error?: string;
    onUndo: () => void;
    onDismiss: () => void;
    }>;
    ItemTitle?: SlotProps<{ item: CartModel['items'][number] }>;
    ItemPrice?: SlotProps<{ item: CartModel['items'][number] }>;
    ItemQuantity?: SlotProps<{
    item: CartModel['items'][number];
    enableUpdateItemQuantity: boolean;
    handleItemQuantityUpdate: (
    item: CartModel['items'][number],
    quantity: number
    ) => void;
    itemsLoading: Set<string>;
    handleItemsError: (uid: string, message?: string) => void;
    handleItemsLoading: (uid: string, state: boolean) => void;
    onItemUpdate?: ({ item }: { item: CartModel['items'][number] }) => void;
    }>;
    ItemTotal?: SlotProps<{ item: CartModel['items'][number] }>;
    ItemSku?: SlotProps<{ item: CartModel['items'][number] }>;
    ItemRemoveAction?: SlotProps<{
    item: CartModel['items'][number];
    enableRemoveItem: boolean;
    handleItemQuantityUpdate: (
    item: CartModel['items'][number],
    quantity: number
    ) => void;
    handleItemsError: (uid: string, message?: string) => void;
    handleItemsLoading: (uid: string, state: boolean) => void;
    onItemUpdate?: ({ item }: { item: CartModel['items'][number] }) => void;
    itemsLoading: Set<string>;
    }>;
  };
}

ProductList slot

The ProductList slot allows you to customize the product list section of the MiniCart container.

Example

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

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

ProductListFooter slot

The ProductListFooter slot allows you to customize the product list footer section of the MiniCart container.

Example

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

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

PreCheckoutSection slot

The PreCheckoutSection slot allows you to customize the pre checkout section section of the MiniCart container.

Example

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

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

Thumbnail slot

The Thumbnail slot allows you to customize the thumbnail section of the MiniCart container.

Example

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

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

Heading slot

The Heading slot allows you to customize the heading section of the MiniCart container.

Example

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

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

EmptyCart slot

The EmptyCart slot allows you to customize the empty cart section of the MiniCart container.

Example

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

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

Footer slot

The Footer slot allows you to customize the footer section of the MiniCart container.

Example

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

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

ProductAttributes slot

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

Example

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

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

CartSummaryFooter slot

The CartSummaryFooter slot allows you to customize the cart summary footer section of the MiniCart container.

Example

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

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

CartItem slot

The CartItem slot allows you to customize the cart item section of the MiniCart container.

Example

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

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

ItemTitle slot

The ItemTitle slot allows you to customize the item title section of the MiniCart container.

Example

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

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

ItemPrice slot

The ItemPrice slot allows you to customize the item price section of the MiniCart container.

Example

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

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

ItemTotal slot

The ItemTotal slot allows you to customize the item total section of the MiniCart container.

Example

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

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

ItemSku slot

The ItemSku slot allows you to customize the item sku section of the MiniCart container.

Example

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

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

OrderSummary slots

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

interface OrderSummaryProps {
  slots?: {
    EstimateShipping?: SlotProps;
    Coupons?: SlotProps;
    GiftCards?: SlotProps;
  };
}

EstimateShipping slot

The EstimateShipping slot allows you to customize the estimate shipping section of the OrderSummary container.

Example

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

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

Coupons slot

The Coupons slot allows you to customize the coupons section of the OrderSummary container.

Example

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

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

GiftCards slot

The GiftCards slot allows you to customize the gift cards section of the OrderSummary container.

Example

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

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