Product Discovery Slots

The Product Discovery 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

Container	Slots
Facets	Facet, SelectedFacets, Facets, FacetBucket, FacetBucketLabel
SearchResults	ProductActions, ProductPrice, ProductName, ProductImage, NoResults, Header, Footer

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.

Facets slots

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

interface FacetsProps {
  slots?: {
    Facet?: SlotProps<{ data: SearchFacet }>;
    SelectedFacets?: SlotProps<{ data: SearchFacet[] }>;
    Facets?: SlotProps<{ data: SearchFacet[] }>;
    FacetBucket?: SlotProps<{ data: FacetBucket }>;
    FacetBucketLabel?: SlotProps<{ data: FacetBucket }>;
  };
}

Facet slot

The Facet slot allows you to customize the facet section of the Facets container.

Example

import { render as provider } from '@dropins/storefront-product-discovery/render.js';
import { Facets } from '@dropins/storefront-product-discovery/containers/Facets.js';

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

SelectedFacets slot

The SelectedFacets slot allows you to customize the selected facets section of the Facets container.

Example

import { render as provider } from '@dropins/storefront-product-discovery/render.js';
import { Facets } from '@dropins/storefront-product-discovery/containers/Facets.js';

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

Facets slot

The Facets slot allows you to customize the facets section of the Facets container.

Example

import { render as provider } from '@dropins/storefront-product-discovery/render.js';
import { Facets } from '@dropins/storefront-product-discovery/containers/Facets.js';

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

FacetBucket slot

The FacetBucket slot allows you to customize the facet bucket section of the Facets container.

Example

import { render as provider } from '@dropins/storefront-product-discovery/render.js';
import { Facets } from '@dropins/storefront-product-discovery/containers/Facets.js';

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

FacetBucketLabel slot

The FacetBucketLabel slot allows you to customize the facet bucket label section of the Facets container.

Example

import { render as provider } from '@dropins/storefront-product-discovery/render.js';
import { Facets } from '@dropins/storefront-product-discovery/containers/Facets.js';

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

SearchResults slots

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

interface SearchResultsProps {
  slots?: {
    ProductActions?: SlotProps<SlotDefaultContext>;
    ProductPrice?: SlotProps<SlotDefaultContext>;
    ProductName?: SlotProps<SlotDefaultContext>;
    ProductImage?: SlotProps<SlotDefaultContext & { defaultImageProps: ImageProps }>;
    NoResults?: SlotProps<{ error: string | null; variables: SearchVariables | null }>;
    Header?: SlotProps<{ products: Product[]; variables: SearchVariables | null }>;
    Footer?: SlotProps<{ products: Product[]; variables: SearchVariables | null }>;
  };
}

ProductActions slot

The ProductActions slot allows you to customize the product actions section of the SearchResults container.

Example

import { render as provider } from '@dropins/storefront-product-discovery/render.js';
import { SearchResults } from '@dropins/storefront-product-discovery/containers/SearchResults.js';

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

ProductPrice slot

The ProductPrice slot allows you to customize the product price section of the SearchResults container.

Example

import { render as provider } from '@dropins/storefront-product-discovery/render.js';
import { SearchResults } from '@dropins/storefront-product-discovery/containers/SearchResults.js';

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

ProductName slot

The ProductName slot allows you to customize the product name section of the SearchResults container.

Example

import { render as provider } from '@dropins/storefront-product-discovery/render.js';
import { SearchResults } from '@dropins/storefront-product-discovery/containers/SearchResults.js';

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

ProductImage slot

The ProductImage slot allows you to customize the product image section of the SearchResults container.

Example

import { render as provider } from '@dropins/storefront-product-discovery/render.js';
import { SearchResults } from '@dropins/storefront-product-discovery/containers/SearchResults.js';

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

NoResults slot

The NoResults slot allows you to customize the no results section of the SearchResults container.

Example

import { render as provider } from '@dropins/storefront-product-discovery/render.js';
import { SearchResults } from '@dropins/storefront-product-discovery/containers/SearchResults.js';

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

Header slot

The Header slot allows you to customize the header section of the SearchResults container.

Example

import { render as provider } from '@dropins/storefront-product-discovery/render.js';
import { SearchResults } from '@dropins/storefront-product-discovery/containers/SearchResults.js';

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

Footer slot

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

Example

import { render as provider } from '@dropins/storefront-product-discovery/render.js';
import { SearchResults } from '@dropins/storefront-product-discovery/containers/SearchResults.js';

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