Checkout styles

Customize the Checkout drop-in using CSS classes and design tokens. This page covers the Checkout-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 blocks/commerce-checkout/commerce-checkout.css to customize the Checkout drop-in.

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

1
.checkout-out-of-stock__title {
2
  color: var(--color-neutral-900);
3
  font: var(--type-body-2-strong-font);
4
  letter-spacing: var(--type-body-2-strong-letter-spacing);
5
  color: var(--color-brand-900);
6
  font: var(--type-body-2-strong-font);
7
  letter-spacing: var(--type-body-2-strong-letter-spacing);
8
}

Container classes

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

1
/* AddressValidation */
2
.checkout-address-validation {}
3
.checkout-address-validation__option {}
4
.checkout-address-validation__option-title {}
5
.checkout-address-validation__options {}
6
.checkout-address-validation__options--busy {}
7
.checkout-address-validation__subtitle {}
8
.checkout-address-validation__title {}
9

10
/* BillToShippingAddress */
11
.checkout-bill-to-shipping-address {}
12
.checkout-bill-to-shipping-address__error {}
13

14
/* EstimateShipping */
15
.cart-order-summary__shipping {}
16
.checkout-estimate-shipping {}
17
.checkout-estimate-shipping__caption {}
18
.checkout-estimate-shipping__label {}
19
.checkout-estimate-shipping__label--bold {}
20
.checkout-estimate-shipping__label--muted {}
21
.checkout-estimate-shipping__price {}
22
.checkout-estimate-shipping__price--bold {}
23
.checkout-estimate-shipping__price--muted {}
24
.dropin-skeleton {}
25

26
/* LoginForm */
27
.checkout-login-form__content {}
28
.checkout-login-form__customer-details {}
29
.checkout-login-form__customer-email {}
30
.checkout-login-form__customer-name {}
31
.checkout-login-form__heading {}
32
.checkout-login-form__heading-label {}
33
.checkout-login-form__link {}
34
.checkout-login-form__sign-in {}
35
.checkout-login-form__sign-out {}
36
.checkout-login-form__title {}
37
.dropin-field__hint {}
38

39
/* OutOfStock */
40
.checkout-out-of-stock {}
41
.checkout-out-of-stock__action {}
42
.checkout-out-of-stock__actions {}
43
.checkout-out-of-stock__item {}
44
.checkout-out-of-stock__items {}
45
.checkout-out-of-stock__message {}
46
.checkout-out-of-stock__title {}
47
.dropin-card {}
48
.dropin-card__content {}
49

50
/* PaymentMethods */
51
.checkout-payment-methods--full-width {}
52
.checkout-payment-methods__content {}
53
.checkout-payment-methods__error {}
54
.checkout-payment-methods__methods {}
55
.checkout-payment-methods__spinner {}
56
.checkout-payment-methods__title {}
57
.checkout-payment-methods__wrapper {}
58
.checkout-payment-methods__wrapper--busy {}
59
.checkout__content {}
60

61
/* PlaceOrder */
62
.checkout-place-order {}
63
.checkout-place-order__button {}
64

65
/* ServerError */
66
.checkout-server-error {}
67
.checkout-server-error__icon {}
68
.error-icon {}
69

70
/* ShippingMethods */
71
.checkout-shipping-methods__content {}
72
.checkout-shipping-methods__error {}
73
.checkout-shipping-methods__method {}
74
.checkout-shipping-methods__options--busy {}
75
.checkout-shipping-methods__options--toggleButton {}
76
.checkout-shipping-methods__spinner {}
77
.checkout-shipping-methods__title {}
78
.dropin-price {}
79
.dropin-radio-button__label {}
80
.dropin-toggle-button__content {}
81

82
/* TermsAndConditions */
83
.checkout-terms-and-conditions {}
84
.checkout-terms-and-conditions__error {}
85

86
/* MergedCartBanner */
87
.checkout__banner {}