Recommendations Slots

The Recommendations 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: 1.1.1

Container	Slots
ProductList	Heading, Footer, Title, Sku, Price, Thumbnail

ProductList slots

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

interface ProductListProps {
  slots?: {
    Heading?: SlotProps;
    Footer?: SlotProps;
    Title?: SlotProps<{
    item: Item;
    productUrl: string;
    }>;
    Sku?: SlotProps<{
    item: Item;
    }>;
    Price?: SlotProps<{
    item: Item;
    }>;
    Thumbnail?: SlotProps<{
    item: any;
    defaultImageProps: ImageProps;
    }>;
  };
}

Heading slot

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

Example

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

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

Footer slot

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

Example

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

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

Title slot

The Title slot allows you to customize the title section of the ProductList container.

Example

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

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

Sku slot

The Sku slot allows you to customize the sku section of the ProductList container.

Example

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

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

Price slot

The Price slot allows you to customize the price section of the ProductList container.

Example

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

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

Thumbnail slot

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

Example

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

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