Product Details styles

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

Version: 1.3.5

Customization example

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

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

1
.pdp-price-range__label {
2
  font: var(--type-headline-2-strong-font);
3
  letter-spacing: var(--type-body-1-strong-letter-spacing);
4
  margin-left: 5px;
5
  font: var(--type-headline-2-strong-font);
6
  letter-spacing: var(--type-body-1-strong-letter-spacing);
7
  margin-left: 8px;
8
}

Container classes

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

1
/* Carousel */
2
.dropin-button--tertiary--disabled {}
3
.pdp-carousel {}
4
.pdp-carousel--arrows {}
5
.pdp-carousel--main-image-controls {}
6
.pdp-carousel--thumbnailsColumn {}
7
.pdp-carousel--thumbnailsRow {}
8
.pdp-carousel-thumbnail__span {}
9
.pdp-carousel__button {}
10
.pdp-carousel__button--next {}
11
.pdp-carousel__button--prev {}
12
.pdp-carousel__button--thumbnailsColumn {}
13
.pdp-carousel__button--thumbnailsRow {}
14
.pdp-carousel__button__icon--next {}
15
.pdp-carousel__button__icon--prev {}
16
.pdp-carousel__button__icon--thumbnailsColumn--prev {}
17
.pdp-carousel__button__icon--thumbnailsRow--next {}
18
.pdp-carousel__button__icon--thumbnailsRow--prev {}
19
.pdp-carousel__controls {}
20
.pdp-carousel__controls--thumbnailsColumn {}
21
.pdp-carousel__controls--thumbnailsRow {}
22
.pdp-carousel__controls__button {}
23
.pdp-carousel__controls__button--active {}
24
.pdp-carousel__controls__container--no-arrows {}
25
.pdp-carousel__controls__container--thumbnailsColumn {}
26
.pdp-carousel__controls__container--thumbnailsRow {}
27
.pdp-carousel__controls__wrapper {}
28
.pdp-carousel__controls__wrapper--thumbnailsColumn {}
29
.pdp-carousel__controls__wrapper--thumbnailsRow {}
30
.pdp-carousel__slide {}
31
.pdp-carousel__slide--hidden {}
32
.pdp-carousel__slide--horizontal {}
33
.pdp-carousel__slide--last {}
34
.pdp-carousel__slide--orphan {}
35
.pdp-carousel__thumbnail--selected {}
36
.pdp-carousel__thumbnail__container {}
37
.pdp-carousel__thumbnail__content {}
38
.pdp-carousel__thumbnail__span {}
39
.pdp-carousel__wrapper {}
40
.pdp-carousel__wrapper--horizontal {}
41
.pdp-carousel__wrapper--peak {}
42
.pdp-carousel__wrapper--scrollbar {}
43

44
/* GalleryGrid */
45
.pdp-gallery-grid {}
46
.pdp-gallery-grid__item {}
47

48
/* GiftCardOptions */
49
.pdp-gift-card-options {}
50
.pdp-gift-card-options__grid {}
51
.pdp-gift-card-options__label {}
52
.pdp-gift-card-options__option-field {}
53
.pdp-gift-card-options__option-field--full-width {}
54
.pdp-gift-card-options__row {}
55
.pdp-product__gift-card-options-container {}
56

57
/* Header */
58
.pdp-header {}
59
.pdp-header__sku {}
60
.pdp-header__title {}
61

62
/* Overlay */
63
.pdp-overlay {}
64
.pdp-overlay--centered {}
65
.pdp-overlay__close-button {}
66
.pdp-overlay__content {}
67

68
/* Price */
69
.pdp-price {}
70
.pdp-price__amount {}
71
.pdp-price__amount--grey {}
72
.pdp-price__amount-special {}
73

74
/* PriceRange */
75
.dropin-price {}
76
.pdp-price-range {}
77
.pdp-price-range__label {}
78

79
/* Product */
80
.pdp-carousel__controls__container--thumbnailsColumn {}
81
.pdp-carousel__controls__container--thumbnailsRow {}
82
.pdp-overlay__content {}
83
.pdp-product {}
84
.pdp-product__actions {}
85
.pdp-product__actions--out-of-stock {}
86
.pdp-product__attributes {}
87
.pdp-product__breadcrumbs {}
88
.pdp-product__buttons {}
89
.pdp-product__column-body {}
90
.pdp-product__column-container {}
91
.pdp-product__content {}
92
.pdp-product__content-column {}
93
.pdp-product__description {}
94
.pdp-product__gallery-column {}
95
.pdp-product__gallery-content {}
96
.pdp-product__header {}
97
.pdp-product__images--carousel {}
98
.pdp-product__images--carousel--thumbnails {}
99
.pdp-product__images__placeholder {}
100
.pdp-product__options {}
101
.pdp-product__out-of-stock__text {}
102
.pdp-product__overlay {}
103
.pdp-product__overlay__carousel {}
104
.pdp-product__price {}
105
.pdp-product__price--grey {}
106
.pdp-product__price-special {}
107
.pdp-product__prices {}
108
.pdp-product__quantity {}
109
.pdp-product__short_description {}
110
.pdp-product__sku {}
111
.pdp-product__title {}
112

113
/* Swatches */
114
.pdp-swatches {}
115
.pdp-swatches__field {}
116
.pdp-swatches__field__label {}
117
.pdp-swatches__options {}
118

119
/* Zoom */
120
.pdp-zoom {}
121
.pdp-zoom--no-effects {}
122
.pdp-zoom--zoomed {}
123
.pdp-zoom__close-button {}