User Account styles

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

Customization example

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

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

1
.account-actions-address {
2
  padding: var(--spacing-xsmall) var(--spacing-medium);
3
  border: var(--shape-border-width-2) solid var(--color-neutral-400);
4
  background-color: var(--color-neutral-50);
5
  padding: var(--spacing-small) var(--spacing-medium);
6
  border: var(--shape-border-width-2) solid var(--color-brand-400);
7
  background-color: var(--color-brand-50);
8
}

Container classes

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

1
/* AccountLoaders */
2
.account-account-loaders--card-loader {}
3
.account-account-loaders--picker-loader {}
4

5
/* AddressActions */
6
.account-actions-address {}
7
.account-actions-address--selectable {}
8
.account-actions-address__title {}
9

10
/* AddressCard */
11
.account-address-card {}
12
.account-address-card__action {}
13
.account-address-card__action--editbutton {}
14
.account-address-card__description {}
15
.account-address-card__labels {}
16
.dropin-card__content {}
17

18
/* AddressFormWrapper */
19
.account-address-form-wrapper {}
20
.account-address-form-wrapper__buttons {}
21
.account-address-form-wrapper__buttons--empty {}
22
.account-address-form-wrapper__notification {}
23
.account-address-form-wrapper__title {}
24

25
/* AddressModal */
26
.account-address-card {}
27
.account-address-modal {}
28
.account-address-modal--overlay {}
29
.account-address-modal__buttons {}
30
.account-address-modal__spinner {}
31
.dropin-card__content {}
32
.dropin-modal {}
33
.dropin-modal__body--full {}
34
.dropin-modal__body--medium {}
35
.dropin-modal__content {}
36
.dropin-modal__header-title {}
37
.dropin-modal__header-title-content {}
38

39
/* AddressValidation */
40
.account-address-validation {}
41
.account-address-validation__option {}
42
.account-address-validation__option-title {}
43
.account-address-validation__options {}
44
.account-address-validation__options--busy {}
45
.account-address-validation__subtitle {}
46
.account-address-validation__title {}
47

48
/* AddressesWrapper */
49
.account-actions-address {}
50
.account-actions-address--address {}
51
.account-address-card {}
52
.account-addresses-form__footer__wrapper {}
53
.account-addresses-header {}
54
.account-addresses-wrapper {}
55
.account-addresses-wrapper--select-view {}
56
.account-addresses-wrapper__label {}
57

58
/* ChangePassword */
59
.account-change-password {}
60
.account-change-password__actions {}
61
.account-change-password__fields {}
62
.account-change-password__fields-item {}
63
.account-change-password__notification {}
64
.account-change-password__title {}
65
.dropin-card__content {}
66

67
/* CustomerInformationCard */
68
.account-customer-information-card {}
69
.account-customer-information-card-short {}
70
.account-customer-information-card__actions {}
71
.account-customer-information-card__content {}
72
.account-customer-information-card__wrapper {}
73
.customer-information__title {}
74
.dropin-card__content {}
75

76
/* EditCustomerInformation */
77
.account-edit-customer-information {}
78
.account-edit-customer-information-form__field {}
79
.account-edit-customer-information__actions {}
80
.account-edit-customer-information__notification {}
81
.account-edit-customer-information__password {}
82
.account-edit-customer-information__title {}
83
.dropin-card__content {}
84

85
/* EmptyList */
86
.account-empty-list {}
87
.account-empty-list--minified {}
88
.dropin-card {}
89
.dropin-card__content {}
90

91
/* Form */
92
.account-form {}
93
.dropin-field {}
94

95
/* OrdersListAction */
96
.account-orders-list-action {}
97
.account-orders-list-action--minifiedView {}
98
.account-orders-list-action__card-wrapper {}
99
.dropin-card__content {}
100

101
/* OrdersListCard */
102
.account-orders-list-card {}
103
.account-orders-list-card--full {}
104
.account-orders-list-card__actions {}
105
.account-orders-list-card__content {}
106
.account-orders-list-card__content--product-name {}
107
.account-orders-list-card__content--quantity {}
108
.account-orders-list-card__content--return_number {}
109
.account-orders-list-card__content--track_number {}
110
.account-orders-list-card__images {}
111
.account-orders-list-card__images-3 {}
112
.dropin-card__content {}
113
.dropin-content-grid__content {}
114

115
/* OrdersListWrapper */
116
.account-orders-list {}
117
.account-orders-list-header {}
118
.account-orders-list__date-select {}
119
.dropin-picker {}