Order styles

Customize the Order drop-in using CSS classes and design tokens. This page covers the Order-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.4.0

Customization example

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

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

1
.order-order-actions__wrapper {
2
  gap: 0 var(--spacing-small);
3
  margin-bottom: var(--spacing-small);
4
  margin-top: var(--spacing-medium);
5
  gap: 0 var(--spacing-medium);
6
  margin-bottom: var(--spacing-medium);
7
  margin-top: var(--spacing-large);
8
}

Container classes

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

1
/* CustomerDetailsContent */
2
.dropin-card__content {}
3
.order-customer-details-content {}
4
.order-customer-details-content__container {}
5
.order-customer-details-content__container--no-margin {}
6
.order-customer-details-content__container-billing_address {}
7
.order-customer-details-content__container-billing_address--fullwidth {}
8
.order-customer-details-content__container-description {}
9
.order-customer-details-content__container-email {}
10
.order-customer-details-content__container-payment_methods {}
11
.order-customer-details-content__container-payment_methods--fullwidth {}
12
.order-customer-details-content__container-payment_methods--icon {}
13
.order-customer-details-content__container-return-information {}
14
.order-customer-details-content__container-shipping_address {}
15
.order-customer-details-content__container-shipping_methods {}
16
.order-customer-details-content__container-title {}
17

18
/* EmptyList */
19
.dropin-card {}
20
.dropin-card__content {}
21
.order-empty-list {}
22
.order-empty-list--empty-box {}
23
.order-empty-list--minified {}
24

25
/* OrderActions */
26
.order-order-actions__wrapper {}
27
.order-order-actions__wrapper--empty {}
28

29
/* OrderCancel */
30
.dropin-modal__body--medium {}
31
.dropin-modal__header {}
32
.dropin-modal__header-close-button {}
33
.dropin-modal__header-title {}
34
.order-order-cancel__button-container {}
35
.order-order-cancel__modal {}
36
.order-order-cancel__text {}
37
.order-order-cancel__title {}
38

39
/* OrderCostSummaryContent */
40
.dropin-accordion-section {}
41
.dropin-accordion-section__content-container {}
42
.dropin-card__content {}
43
.dropin-price {}
44
.order-cost-summary-content {}
45
.order-cost-summary-content__accordion {}
46
.order-cost-summary-content__accordion-row {}
47
.order-cost-summary-content__accordion-total {}
48
.order-cost-summary-content__description {}
49
.order-cost-summary-content__description--discount {}
50
.order-cost-summary-content__description--gift-wrapping {}
51
.order-cost-summary-content__description--header {}
52
.order-cost-summary-content__description--printed-card {}
53
.order-cost-summary-content__description--shipping {}
54
.order-cost-summary-content__description--subheader {}
55
.order-cost-summary-content__description--subtotal {}
56
.order-cost-summary-content__description--total {}
57
.order-cost-summary-content__description--total-free {}
58

59
/* OrderHeader */
60
.order-header {}
61
.order-header-create-account {}
62
.order-header-create-account__button {}
63
.order-header-create-account__message {}
64
.order-header__icon {}
65
.order-header__order {}
66
.order-header__title {}
67
.success-icon {}
68

69
/* OrderLoaders */
70
.order-order-loaders--card-loader {}
71

72
/* OrderProductListContent */
73
.cart-summary-item__title--strikethrough {}
74
.dropin-card__content {}
75
.dropin-cart-item__alert {}
76
.order-confirmation-cart-summary-item {}
77
.order-order-product-list-content {}
78
.order-order-product-list-content__items {}
79

80
/* OrderSearchForm */
81
.dropin-card__content {}
82
.order-order-search-form {}
83
.order-order-search-form__button-container {}
84
.order-order-search-form__title {}
85
.order-order-search-form__wrapper {}
86
.order-order-search-form__wrapper__item--email {}
87
.order-order-search-form__wrapper__item--lastname {}
88
.order-order-search-form__wrapper__item--number {}
89

90
/* OrderStatusContent */
91
.dropin-card__content {}
92
.order-order-status-content {}
93
.order-order-status-content__wrapper {}
94
.order-order-status-content__wrapper-description {}
95
.order-order-status-content__wrapper-description--actions-slot {}
96

97
/* ReturnOrderMessage */
98
.order-return-order-message {}
99
.order-return-order-message__subtitle {}
100
.order-return-order-message__title {}
101

102
/* ReturnOrderProductList */
103
.cart-summary-item__title--strikethrough {}
104
.dropin-cart-item__alert {}
105
.dropin-cart-item__footer {}
106
.dropin-incrementer {}
107
.dropin-incrementer--medium {}
108
.dropin-incrementer__button-container {}
109
.order-create-return {}
110
.order-create-return_notification {}
111
.order-return-order-product-list {}
112
.order-return-order-product-list__item {}
113
.order-return-order-product-list__item--blur {}
114

115
/* ReturnReasonForm */
116
.dropin-cart-item {}
117
.dropin-field {}
118
.order-return-reason-form {}
119
.order-return-reason-form__actions {}
120

121
/* ReturnsListContent */
122
.dropin-accordion-section__content-container {}
123
.dropin-card__content {}
124
.dropin-content-grid {}
125
.dropin-content-grid__content {}
126
.dropin-divider {}
127
.dropin-divider--secondary {}
128
.order-returns-list-content {}
129
.order-returns-list-content__actions {}
130
.order-returns-list-content__card {}
131
.order-returns-list-content__card-wrapper {}
132
.order-returns-list-content__cards-grid {}
133
.order-returns-list-content__cards-list {}
134
.order-returns-list-content__descriptions {}
135
.order-returns-list-content__images {}
136
.order-returns-list-content__images-3 {}
137
.order-returns-list-content__return-status {}
138
.order-returns__header--full-size {}
139
.order-returns__header--minified {}
140

141
/* ShippingStatusCard */
142
.dropin-accordion-section__content-container {}
143
.dropin-card__content {}
144
.dropin-content-grid {}
145
.dropin-content-grid__content {}
146
.dropin-divider {}
147
.dropin-divider--secondary {}
148
.order-shipping-status-card {}
149
.order-shipping-status-card--count-steper {}
150
.order-shipping-status-card--return-order {}
151
.order-shipping-status-card__header {}
152
.order-shipping-status-card__header--content {}
153
.order-shipping-status-card__images {}
154

155
/* OrderCancelForm */
156
.order-order-cancel-reasons-form__button-container {}
157
.order-order-cancel-reasons-form__text {}