Wishlist Slots

The Wishlist 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
Wishlist	image

Wishlist slots

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

interface WishlistProps {
  slots?: {
    image?: SlotProps<{
    defaultImageProps: ImageProps;
    item: Item;
    }>;
  };
}

image slot

The image slot allows you to customize the image section of the Wishlist container.

Example

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

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