User Account Slots

The User Account 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.2.0

Container	Slots
AddressForm	AddressFormActions, AddressFormInputs
Addresses	None
CustomerInformation	CustomerData
OrdersList	OrdersListAction, OrdersListCard, OrderItemImage
PaymentMethods	None

AddressForm slots

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

interface AddressFormProps {
  slots?: {
    AddressFormActions?: SlotProps<AddressFormActionsContext>;
    AddressFormInputs?: SlotProps<AddressFormInputsContext>;
  };
}

AddressFormActions slot

The AddressFormActions slot allows you to customize the address form actions section of the AddressForm container.

Example

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

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

AddressFormInputs slot

The AddressFormInputs slot allows you to customize the address form inputs section of the AddressForm container.

Example

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

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

Addresses slots

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

interface AddressesProps {
  slots?: {
    [key: string]: SlotProps;
  };
}

CustomerInformation slots

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

interface CustomerInformationProps {
  slots?: {
    CustomerData?: SlotProps<CustomerDataContext>;
  };
}

CustomerData slot

The CustomerData slot allows you to customize the customer data section of the CustomerInformation container.

Example

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

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

PaymentMethods slots

The PaymentMethods container does not provide slots. Customize the layout and copy through dictionary keys, container props, and styles.

OrdersList slots

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

interface OrdersListProps {
  slots?: {
    OrdersListAction?: SlotProps<OrdersListActionContext>;
    OrdersListCard?: SlotProps<OrdersListCardContext>;
    OrderItemImage?: SlotProps<{
    data: OrderItem;
    defaultImageProps: ImageProps;
    }>;
  };
}

OrdersListAction slot

The OrdersListAction slot allows you to customize the orders list action section of the OrdersList container.

Example

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

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

OrdersListCard slot

The OrdersListCard slot allows you to customize the orders list card section of the OrdersList container.

Example

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

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

OrderItemImage slot

The OrderItemImage slot allows you to customize the order item image section of the OrdersList container.

Example

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

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