Product Discovery styles

Customize the Product Discovery drop-in using CSS classes and design tokens. This page covers the Product Discovery-specific container classes and customization examples. For comprehensive information about design tokens, responsive breakpoints, and styling best practices, see Styling Drop-In Components.

Version: 2.1.0

Customization example

Add this to the CSS file of the specific commerce block where you’re using the Product Discovery drop-in.

For a complete list of available design tokens (colors, spacing, typography, etc.), see the Design tokens reference.

1
.product-discovery-facet {
2
  padding-block: var(--spacing-small);
3
  padding-block: var(--spacing-medium);
4
}

Container classes

The Product Discovery drop-in uses BEM-style class naming. Use the browser DevTools to inspect elements and find specific class names.

1
/* Facet */
2
.dropin-price--bold {}
3
.dropin-price--small {}
4
.dropin-price-range {}
5
.dropin-radio-button__label {}
6
.product-discovery-facet {}
7
.product-discovery-facet--last {}
8
.product-discovery-facet__bucket {}
9
.product-discovery-facet__header {}
10

11
/* FacetList */
12
.dropin-divider {}
13
.dropin-price--bold {}
14
.dropin-price--small {}
15
.dropin-price-range {}
16
.dropin-radio-button {}
17
.product-discovery-facet-list {}
18
.product-discovery-facet-list__facet-options {}
19
.product-discovery-facet-list__facet-options--hidden {}
20
.product-discovery-facet-list__selected-filters {}
21

22
/* ProductList */
23
.dropin-product-item-card {}
24
.dropin-product-item-card__skeleton__image {}
25
.product-discovery-product-list {}
26
.product-discovery-product-list__container {}
27
.product-discovery-product-list__grid {}
28

29
/* SearchAlertMessage */
30
.product-discovery-search-alert-message {}
31
.product-discovery-search-alert-message__content {}
32
.product-discovery-search-alert-message__wrapper {}