Personalization Slots

The Personalization drop-in exposes 1 slot in 1 container 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.0.1

Container	Slots
TargetedBlock	Content

TargetedBlock slots

interface TargetedBlockProps

slots?: {
  Content: SlotProps
};

Content example

This example from the Targeted Block block shows how to customize the Content slot:

import { render as provider } from '@dropins/storefront-personalization/render.js';
import TargetedBlock from '@dropins/storefront-personalization/containers/TargetedBlock.js';
// Note: `content` should be defined in your block context (typically a DOM element or fragment to render)

provider.render(TargetedBlock, {
  slots: {
    Content: (ctx) => {
      const container = document.createElement('div');
      container.append(content);
      ctx.replaceWith(container);
    }
  }
})(document.querySelector('.targeted-block'));

---