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-beta3

Slot usage best practice

Do not use context methods inside other context methods (for example, appendChild() inside onChange()). See Slots best practices for details and examples.

Container	Slots
CartSummaryGrid	Thumbnail
CartSummaryList	Heading, EmptyCart, Footer, RowTotalFooter, Thumbnail, ProductAttributes, CartSummaryFooter, CartItem, UndoBanner, ItemTitle, ItemPrice, ItemQuantity, ItemTotal, ItemSku, ItemRemoveAction
CartSummaryTable	Item, Price, Quantity, Subtotal, Thumbnail, ProductTitle, Sku, Configurations, ItemAlert, ItemWarning, Actions, UndoBanner, EmptyCart
GiftOptions	SwatchImage
MiniCart	ProductList, ProductListFooter, PreCheckoutSection, Thumbnail, Heading, EmptyCart, Footer, RowTotalFooter, 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;
    RowTotalFooter?: SlotProps<{ item: CartModel['items'][number] }>;
    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);

RowTotalFooter slot

The RowTotalFooter slot lets you show custom content beneath each cart item’s total price. Use it to display promotions, special offers, or other relevant information based on your business logic.

Context

The slot receives the following context:

Property	Type	Description
item	CartModel['items'][number]	The cart item data for the current row

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: {
    RowTotalFooter: (ctx) => {
      // Display a promotional message based on item data
      const promoMessage = document.createElement('div');
      promoMessage.style.color = 'var(--color-positive-500)';
      promoMessage.style.fontSize = '0.875rem';
      promoMessage.innerText = 'Special offer applied!';
      ctx.appendChild(promoMessage);
    }
  }
})(block);

Example with conditional content

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

await provider.render(CartSummaryList, {
  slots: {
    RowTotalFooter: (ctx) => {
      // Only show message for discounted items
      if (ctx.item.discounted) {
        const savings = document.createElement('span');
        savings.style.color = 'var(--color-alert-800)';
        savings.innerText = 'You saved on this item!';
        ctx.appendChild(savings);
      }
    }
  }
})(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);

CartSummaryTable slots

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

interface CartSummaryTableProps {
  slots?: {
    Item?: SlotProps<{ item: CartModel['items'][number] }>;
    Price?: SlotProps<{ item: CartModel['items'][number] }>;
    Quantity?: SlotProps<{
      item: CartModel['items'][number];
      isUpdating: boolean;
      quantityInputValue: number;
      handleInputChange: (e: Event) => void;
      itemUpdateErrors: Map<string, string>;
    }>;
    Subtotal?: SlotProps<{ item: CartModel['items'][number] }>;
    Thumbnail?: SlotProps<{
      item: CartModel['items'][number];
      defaultImageProps: ImageProps;
      index: number;
    }>;
    ProductTitle?: SlotProps<{ item: CartModel['items'][number] }>;
    Sku?: SlotProps<{ item: CartModel['items'][number] }>;
    Configurations?: SlotProps<{ item: CartModel['items'][number] }>;
    ItemAlert?: SlotProps<{ item: CartModel['items'][number] }>;
    ItemWarning?: SlotProps<{ item: CartModel['items'][number] }>;
    Actions?: SlotProps<{
      item: CartModel['items'][number];
      itemsUpdating: Map<string, { isUpdating: boolean; updatedValue: number }>;
      setItemUpdating: (uid: string, state: boolean) => void;
      setItemUpdateError: (uid: string, error: string) => void;
    }>;
    UndoBanner?: SlotProps<{
      item: CartModel['items'][number];
      loading: boolean;
      error?: string;
      onUndo: () => void;
      onDismiss: () => void;
    }>;
    EmptyCart?: SlotProps;
  };
}

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;
    RowTotalFooter?: SlotProps<{ item: CartModel['items'][number] }>;
    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);

RowTotalFooter slot

The RowTotalFooter slot lets you show custom content beneath each cart item’s total price. Use it to display promotions, special offers, or other relevant information based on your business logic.

Context

The slot receives the following context:

Property	Type	Description
item	CartModel['items'][number]	The cart item data for the current row

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: {
    RowTotalFooter: (ctx) => {
      // Display a promotional message based on item data
      const promoMessage = document.createElement('div');
      promoMessage.style.color = 'var(--color-positive-500)';
      promoMessage.style.fontSize = '0.875rem';
      promoMessage.innerText = 'Special offer applied!';
      ctx.appendChild(promoMessage);
    }
  }
})(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);