User account styles

This topic introduces you to the CSS classes for each UI component used in the user account drop-in component and shows you how to override these classes to customize the user account component’s CSS styling to match your brand.

User account contains multiple components that provide its UI. If you plan to make several CSS changes, Adobe suggests creating CSS files for each drop-in component (in the blocks/commerce-account/ directory) and importing those into the commerce-account.css file as shown below. This practice makes it easier to maintain and update your CSS in the future.

@import 'account-loaders.css';
@import 'address-actions.css';
@import 'address-card.css';
@import 'address-form-wrapper.css';
@import 'address-modal.css';
@import 'change-password.css';
@import 'customer-information-card.css';
@import 'edit-cuatomer-information.css';
@import 'empty-list.css';
@import 'form.css';
@import 'orders-list-action.css';
@import 'orders-list-card.css';
@import 'orders-list-wrapper.css';

Big Picture

The quickest way to override user account CSS is to inspect the user account UI from your browser’s developer tools to discover the BEM class names you want to add to or override. This process is numbered in the image below.

Find CSS classes to override

Find CSS classes to override.

Inspect the element in the UI that you want to customize (right-click on the element and select “Inspect” from the menu).
Identify the CSS class(es) for the element. We use BEM naming, which makes it easy to know which component you’re changing (and which CSS file to use).
Copy the CSS class names to override to your custom CSS file.

How to override the default styles

Create a new CSS file in your project for the user account component. Name the file custom-account.css.
Copy the BEM class names displayed in the Element tab of the developer panel into your new file.
Add your custom CSS rules to the custom-account.css file to add or override the default styles.
Import the custom CSS file into the commerce-account.css file.
```
@import 'custom-account.css';
```
Save the file and refresh your browser to see the changes.

Example CSS overrides

The following example shows how to override two of the many classes for the user account component.

.checkout__heading {
  display: flex;
  justify-content: space-between;
}

.checkout__heading-title {
  line-height: 1.5;
  font-size: 1.5rem;
}

Account CSS classes

The CSS classes for each user account component are provided here.

AccountLoaders.css

/* https://cssguidelin.es/#bem-like-naming */

.account-account-loaders--card-loader {
  margin-bottom: var(--spacing-small);
}

.account-account-loaders--picker-loader div:first-child {
  max-width: 200px;
}

.account-account-loaders--picker-loader div:nth-child(3) {
  max-width: 400px;
}

AddressActions.css

/* https://cssguidelin.es/#bem-like-naming */

.account-actions-address {
  cursor: pointer;
  padding: var(--spacing-xsmall) var(--spacing-medium);
  border-radius: var(--shape-border-radius-2);
  border: var(--shape-border-width-2) solid var(--color-neutral-400);
  background-color: var(--color-neutral-50);
  width: 100%;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.account-actions-address--selectable {
  max-width: 100%;
  width: auto;
}

.account-actions-address__title {
  font: var(--type-button-2-font);
  letter-spacing: var(--type-button-2-letter-spacing);
}

.account-actions-address svg {
  stroke: var(--shape-icon-stroke-4);
  color: var(--color-neutral-800);
}

AddressCard.css

/* https://cssguidelin.es/#bem-like-naming */

.account-address-card {
  margin-bottom: var(--spacing-small);
}

.account-address-card .dropin-card__content {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--spacing-small) 0px;
  grid-template-areas:
    'description action'
    'labels action';
}

.account-address-card .account-address-card__action {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  cursor: pointer;
  grid-area: action;
}

.account-address-card .account-address-card__action--editbutton {
  margin-left: var(--spacing-small);
}

.account-address-card .account-address-card__action button {
  padding: 0;
}

.account-address-card .account-address-card__action button:hover {
  text-decoration: underline;
}

.account-address-card .account-address-card__description {
  grid-area: description;
  margin: 0;
  padding: 0;
}

.account-address-card .account-address-card__labels {
  display: flex;
  gap: 0 var(--spacing-xsmall);
  grid-area: labels;
}

/* General styling for address card text */
.account-address-card .account-address-card__description p {
  font: var(--type-body-1-default-font);
  letter-spacing: var(--type-body-1-default-letter-spacing);
  line-height: var(--spacing-xbig);
  color: var(--color-neutral-800);
  padding: 0;
  margin: 0 var(--spacing-xsmall) 0 0;
}

/* Styling for first two items */
.account-address-card .account-address-card__description p:nth-child(1),
.account-address-card .account-address-card__description p:nth-child(2) {
  margin: 0 var(--spacing-xsmall) var(--spacing-xsmall) 0;
  color: var(--color-neutral-800);
  font: var(--type-button-2-font);
  font-weight: 500;
  cursor: default;
}

/* Styling for line wrapping */
.account-address-card .account-address-card__description p:nth-child(1),
.account-address-card .account-address-card__description p:nth-child(3),
.account-address-card .account-address-card__description p:nth-child(4),
.account-address-card .account-address-card__description p:nth-child(6) {
  float: left;
}

AddressFormWrapper.css

/* https://cssguidelin.es/#bem-like-naming */
.account-address-form-wrapper {
  box-sizing: border-box;
  background-color: var(--color-neutral-50);
}

.account-address-form-wrapper__notification {
  margin-bottom: var(--spacing-medium);
}

.account-address-form-wrapper__title {
  color: var(--color-neutral-800);
  font: var(--type-headline-2-strong-font);
  letter-spacing: var(--type-headline-2-strong-letter-spacing);
  margin-bottom: var(--spacing-medium);
}

.account-address-form-wrapper__buttons {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 0 var(--spacing-medium);
  margin-top: var(--spacing-medium);
}

.account-address-form-wrapper__buttons--empty {
  gap: 0;
  margin: 0;
  padding: 0;
  display: inline-block;
}

.account-address-form-wrapper__buttons button {
  min-width: 142px;
}

AddressModal.css

/* https://cssguidelin.es/#bem-like-naming */
.account-address-modal {
  position: relative;
  padding: var(--spacing-xbig) var(--spacing-xxbig) var(--spacing-xxbig)
    var(--spacing-xxbig);
  width: 100%;
  margin: auto;
  max-width: 721px;
}

.dropin-modal__body--medium > .dropin-modal__header-title,
.dropin-modal__body--full > .dropin-modal__header-title,
.account-address-modal .dropin-modal__content {
  margin: 0;
  align-items: center;
}

.account-address-modal .dropin-modal__header-title-content h3 {
  font: var(--type-headline-1-font);
  letter-spacing: var(--type-headline-1-letter-spacing);
  margin: 0;
  padding: 0;
}

.account-address-modal .account-address-modal__spinner {
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--color-neutral-200);
  opacity: 0.8;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.account-address-modal p {
  color: var(--color-neutral-800);
  font: var(--type-body-2-strong-font);
  letter-spacing: var(--type-body-2-strong-letter-spacing);
  margin-bottom: var(--spacing-medium);
}

.account-address-modal .account-address-modal__buttons {
  display: flex;
  align-items: center;
  justify-content: right;
  gap: 0 var(--spacing-small);
}

ChangePassword.css

/* https://cssguidelin.es/#bem-like-naming */

.account-change-password .dropin-card__content {
  gap: 0;
}

.account-change-password__title {
  margin-bottom: var(--spacing-medium);
}

.account-change-password .account-change-password__notification {
  margin-bottom: var(--spacing-medium);
}

.account-change-password
  .account-change-password__fields
  .account-change-password__fields-item {
  margin-bottom: var(--spacing-medium);
}

.account-change-password
  .account-change-password__fields
  .account-change-password__fields-item:last-child {
  margin-bottom: 0;
}

.account-change-password .account-change-password__actions {
  display: flex;
  justify-content: right;
  align-items: center;
  gap: 0 var(--grid-3-gutters);
  margin-top: var(--spacing-xlarge);
}

.account-change-password .account-change-password__actions button {
  min-width: 144px;
}

CustomerInformationCard.css

/* https://cssguidelin.es/#bem-like-naming */

.customer-information__title {
  margin-bottom: var(--spacing-medium);
}

.account-customer-information-card-short {
  margin-bottom: var(--spacing-small);
}

.account-customer-information-card .dropin-card__content {
  gap: 0;
}

.account-customer-information-card__wrapper {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
}

.account-customer-information-card .account-customer-information-card__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0 var(--grid-2-gutters);
}

.account-customer-information-card
  .account-customer-information-card__actions
  button {
  cursor: pointer;
  margin: 0;
  padding: 0;
}

.account-customer-information-card__content p {
  font: var(--type-body-1-default-font);
  margin: 0 var(--spacing-xsmall) 0 0;
  line-height: var(--spacing-xbig);
  padding: 0;
}

.account-customer-information-card__content p:nth-child(1),
.account-customer-information-card__content p:nth-child(2) {
  font: var(--type-body-1-strong-font);
  font-weight: 500;
  margin: 0 var(--spacing-xsmall) var(--spacing-xsmall) 0;
}

.account-customer-information-card__content p:nth-child(1) {
  float: left;
}

EditCustomerInformation.css

/* https://cssguidelin.es/#bem-like-naming */

.account-edit-customer-information__title {
  margin-bottom: var(--spacing-medium);
}

.account-edit-customer-information .dropin-card__content {
  gap: 0;
}

.account-edit-customer-information
  .account-edit-customer-information__notification {
  margin-bottom: var(--spacing-medium);
}

.account-edit-customer-information
  .account-edit-customer-information-form__field:nth-child(n + 3),
.account-edit-customer-information
  .account-edit-customer-information__password {
  grid-column: span 2;
}

.account-edit-customer-information .account-edit-customer-information__actions {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 0 var(--grid-2-gutters);
  grid-column: span 2;
}

.account-edit-customer-information
  .account-edit-customer-information__actions
  button {
  min-width: 144px;
}

EmptyList.css

/* https://cssguidelin.es/#bem-like-naming */
.account-empty-list {
  margin-bottom: var(--spacing-small);
}

.account-empty-list.account-empty-list--minified {
  border: none;
}

.account-empty-list .dropin-card {
  border: none;
}

.account-empty-list .dropin-card__content {
  gap: 0;
  padding: var(--spacing-xxbig);
}

.account-empty-list.account-empty-list--minified .dropin-card__content {
  flex-direction: row;
  align-items: center;
  padding: var(--spacing-big) var(--spacing-small);
}

.account-empty-list .dropin-card__content svg {
  width: 64px;
  height: 64px;
  margin-bottom: var(--spacing-medium);
}

.account-empty-list.account-empty-list--minified .dropin-card__content svg {
  margin: 0 var(--spacing-small) 0 0;
  width: 32px;
  height: 32px;
}

.account-empty-list .dropin-card__content svg path {
  fill: var(--color-neutral-800);
}

.account-empty-list.account-empty-list--minified .dropin-card__content svg path {
  fill: var(--color-neutral-500);
}

.account-empty-list .dropin-card__content p {
  font: var(--type-headline-1-font);
  letter-spacing: var(--type-headline-1-letter-spacing);
  color: var(--color-neutral-800);
}

.account-empty-list.account-empty-list--minified .dropin-card__content p {
  font: var(--type-body-1-strong-font);
  color: var(--color-neutral-800);
}

Form.css

.account-form {
  display: grid;
  flex-direction: column;
  gap: var(--spacing-medium);
}

@media (min-width: 768px) {
  .account-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .account-form > .dropin-field:nth-child(1),
  .account-form > .dropin-field:nth-child(2) {
    grid-column: span 1;
  }

  .account-form > .dropin-field:nth-child(3),
  .account-form > .dropin-field:nth-child(4),
  .account-form > .dropin-field:nth-child(5) {
    grid-column: span 2;
  }

  .account-form > .dropin-field:nth-child(6),
  .account-form > .dropin-field:nth-child(7) {
    grid-column: span 1;
  }

  .account-form > .dropin-field:nth-child(8),
  .account-form > .dropin-field:nth-child(9) {
    grid-column: span 1;
  }

  .account-form > .dropin-field:nth-child(n + 10) {
    grid-column: span 2;
  }
}

.account-form [class$='-hidden'] {
  position: absolute;
  opacity: 0;
  height: 0;
  width: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

OrdersListAction.css

/* https://cssguidelin.es/#bem-like-naming */

.account-orders-list-action {
  margin: 0;
  padding: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
  text-decoration: none;
}

.account-orders-list-action--minifiedView {
  width: 100%;
  text-align: left;
  font: var(--type-body-1-default-font);
}

.account-orders-list-action.account-orders-list-action--minifiedView:hover {
  text-decoration: none;
}

.account-orders-list-action--minifiedView
  .account-orders-list-action__card-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-neutral-800);
  height: calc(88px - var(--spacing-small) * 2);
}

.account-orders-list-action__card-wrapper > p {
  font: var(--type-button-2-font);
  letter-spacing: var(--type-button-2-letter-spacing);
}

.account-orders-list-action__card-wrapper svg,
.account-orders-list-action svg {
  color: var(--color-neutral-800);
}

.account-orders-list-action--minifiedView .dropin-card__content {
  padding: var(--spacing-small) var(--spacing-medium);
}

.account-orders-list-action--minifiedView p {
  font: var(--type-body-1-strong-font);
}

OrdersListCard.css

/* https://cssguidelin.es/#bem-like-naming */

.account-orders-list-card {
  height: 100%;
  margin-bottom: var(--spacing-small);
}

.account-orders-list-card .dropin-card__content {
  padding: var(--spacing-medium);
  display: grid;
  grid-template-areas:
    'content actions'
    'imageList actions';
  gap: 0;
  max-height: 100%;
}

.account-orders-list-card .account-orders-list-card__content {
  grid-area: content;
  margin-bottom: var(--spacing-small);
}

.account-orders-list-card__content--quantity {
  font-weight: 500;
  color: var(--color-neutral-800);
}

.account-orders-list-card__content--track_number,
.account-orders-list-card__content--return_number {
  font: var(--type-body-1-strong-font);
  letter-spacing: var(--type-body-1-strong-letter-spacing);
  cursor: pointer;
}

.account-orders-list-card .account-orders-list-card__content > div:first-child {
  font-weight: 500;
}

.account-orders-list-card .account-orders-list-card__content p,
.account-orders-list-card .account-orders-list-card__content div {
  padding: 0;
  text-align: left;
  font: var(--type-body-1-default-font);
  margin: 0 0 var(--spacing-small) 0;
  color: var(--color-neutral-800);
}

.account-orders-list-card p.account-orders-list-card__content--product-name {
  margin: 0;
}

.account-orders-list-card .account-orders-list-card__content p:last-child {
  margin: 0;
}

.account-orders-list-card .account-orders-list-card__content div {
  font: var(--type-button-2-font);
  margin-bottom: var(--spacing-small);
}

.account-orders-list-card .account-orders-list-card__actions {
  grid-area: actions;
}

.account-orders-list-card .account-orders-list-card__images {
  overflow: auto;
}

.account-orders-list-card
  .account-orders-list-card__images
  .dropin-content-grid__content {
  grid-template-columns: repeat(6, max-content) !important;
}

.account-orders-list-card
  .account-orders-list-card__images-3
  .dropin-content-grid__content {
  grid-template-columns: repeat(3, max-content) !important;
}

.account-orders-list-card .account-orders-list-card__images img {
  object-fit: contain;
  width: 65px;
  height: 65px;
}

.account-orders-list-card .account-orders-list-card__actions {
  position: relative;
  align-self: center;
  margin-left: auto;
}

@media (min-width: 768px) {
  .account-orders-list-card.account-orders-list-card--full
    .dropin-card__content {
    max-height: 100%;
  }
}

OrdersListWrapper.css

/* https://cssguidelin.es/#bem-like-naming */
.account-orders-list-header {
  margin-bottom: var(--spacing-medium);
}

.account-orders-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.account-orders-list__date-select {
  margin-bottom: var(--spacing-xbig);
}

.account-orders-list__date-select span {
  display: inline-block;
  font: var(--type-details-caption-1-font);
  letter-spacing: var(--type-details-caption-1-letter-spacing);
  margin-bottom: var(--spacing-xsmall);
}

.account-orders-list__date-select .dropin-picker {
  max-width: 224px;
}