Order styles

The CSS classes for each UI component that provides the order drop-in component with its UI are provided here. Override these classes and add new classes to customize the look and feel of your cart to match your specific style requirements.

The drop-in component contains multiple components that provide its UI. If you plan to make several CSS changes to the drop-in, we suggest creating CSS files for each drop-in component and importing those into a custom order.css file as shown below. This practice makes it easier to maintain and update your CSS in the future.

@import 'commerce-order-returns.css';
@import 'commerce-order-status.css';
@import 'commerce-returns-list.css';

Styling drop-in components describes how to inspect the drop-in component in your browser’s developer tools to discover the BEM class names to be extended.

Example CSS overrides

Here’s an example of adding CSS class overrides to your default order CSS files:

.order-return-order-message .order-return-order-message__title {
  font: var(--type-headline-2-font);
  letter-spacing: var(--type-headline-2-letter-spacing);
}

.order-return-reason-form .dropin-cart-item {
  margin-bottom: var(--spacing-small);
}

.order-return-reason-form form .dropin-field {
  margin-bottom: var(--spacing-small);
}

Order component CSS

The CSS classes for each order component are provided here.

CustomerDetailsContent.css

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

.order-customer-details-content .dropin-card__content {
  gap: 0;
}

.order-customer-details-content__container {
  display: block;
  flex-direction: column;
}

.order-customer-details-content__container-shipping_address {
  margin: var(--spacing-medium) 0;
}

.order-customer-details-content__container-billing_address {
  margin: var(--spacing-medium) 0;
}

@media (min-width: 768px) {
  .order-customer-details-content__container {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto auto;
    grid-auto-flow: row;
  }

  .order-customer-details-content__container-email {
    grid-area: 1 / 1 / 2 / 2;
  }

  .order-customer-details-content__container--no-margin p {
    margin-bottom: 0  ;
  }

  .order-customer-details-content__container-shipping_address {
    grid-area: 2 / 1 / 3 / 2;
    margin: var(--spacing-medium) 0;
  }

  .order-customer-details-content__container-billing_address,
  .order-customer-details-content__container-return-information {
    grid-area: 2 / 2 / 3 / 3;
    margin: var(--spacing-medium) 0;
  }

  .order-customer-details-content__container-billing_address--fullwidth {
    grid-area: 2 / 1 / 3 / 3;
  }

  .order-customer-details-content__container-shipping_methods {
    grid-area: 3 / 1 / 4 / 2;
  }

  .order-customer-details-content__container-payment_methods {
    grid-area: 3 / 2 / 4 / 3;
  }

  .order-customer-details-content__container-payment_methods--fullwidth {
    grid-area: 3 / 1 / 4 / 3;
  }
}

.order-customer-details-content__container-title {
  font: var(--type-body-1-strong-font);
  letter-spacing: var(--type-body-1-strong-letter-spacing);
  margin: 0 0 var(--spacing-xsmall) 0;
}

.order-customer-details-content__container p {
  color: var(--color-neutral-800);
  font: var(--type-body-2-default-font);
  letter-spacing: var(--type-body-2-default-letter-spacing);
  margin-top: 0;
}

.order-customer-details-content__container-payment_methods p {
  display: grid;
  gap: 0;
  grid-template-columns: auto 1fr;
}

.order-customer-details-content__container-payment_methods
  p.order-customer-details-content__container-payment_methods--icon {
  gap: 0 var(--spacing-xsmall);
}

.order-customer-details-content__container-description p {
  margin: 0 var(--spacing-xsmall) 0 0;
  line-height: var(--spacing-big);
  padding: 0;
}

.order-customer-details-content__container-description p:nth-child(1),
.order-customer-details-content__container-description p:nth-child(3),
.order-customer-details-content__container-description p:nth-child(4),
.order-customer-details-content__container-description p:nth-child(6) {
  float: left;
}

.order-customer-details-content__container-return-information
  .order-customer-details-content__container-description
  p {
  float: none;
  display: block;
}

EmptyList.css

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

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

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

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

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

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

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

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

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

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

.order-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);
}

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

OrderActions.css

.order-order-actions__wrapper {
  display: flex;
  justify-content: space-between;
  gap: 0 var(--spacing-small);
  margin-bottom: var(--spacing-small);
  margin-top: var(--spacing-medium);
}

.order-order-actions__wrapper button {
  width: 100%;
  font: var(--type-body-1-strong-font);
  letter-spacing: var(--type-body-1-default-letter-spacing);
  cursor: pointer;
}

.order-order-actions__wrapper--empty {
  display: none;
}

OrderCancel.css

.order-order-cancel__modal {
  margin: auto;
}

.order-order-cancel__modal .dropin-modal__header {
  display: grid;
  grid-template-columns: 1fr auto;
}

.order-order-cancel__title {
  color: var(--color-neutral-900);
  font: var(--type-headline-2-strong-font);
  letter-spacing: var(--type-headline-2-strong-letter-spacing);
}

.order-order-cancel__text {
  color: var(--color-neutral-800);
  font: var(--type-details-caption-1-font);
  letter-spacing: var(--type-details-caption-1-letter-spacing);
  padding-bottom: var(--spacing-xsmall);
}

.order-order-cancel__modal .dropin-modal__header-close-button {
  align-self: center;
}

.order-order-cancel__button-container {
  display: grid;
  margin-top: var(--spacing-xbig);
  justify-content: end;
}

@media only screen and (min-width: 768px) {
  .dropin-modal__body--medium.order-order-cancel__modal > .dropin-modal__header-title {
    margin: 0 var(--spacing-xxbig) var(--spacing-medium);
  }
}

OrderCostSummaryContent.css

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

.order-cost-summary-content {
}

.order-cost-summary-content .dropin-card__content {
  gap: 0;
}

.order-cost-summary-content__description {
  margin-bottom: var(--spacing-xsmall);
}

.order-cost-summary-content__description
  .order-cost-summary-content__description--header,
.order-cost-summary-content__description
  .order-cost-summary-content__description--subheader {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.order-cost-summary-content__description
  .order-cost-summary-content__description--header
  span {
  color: var(--color-neutral-800);
  font: var(--type-body-1-default-font);
  letter-spacing: var(--type-body-1-default-letter-spacing);
}

.order-cost-summary-content__description--subheader {
  margin-top: var(--spacing-xxsmall);
}

.order-cost-summary-content__description--subheader span {
  font: var(--type-details-caption-2-font);
  letter-spacing: var(--type-details-caption-2-letter-spacing);
  color: var(--color-brand-700);
}

.order-cost-summary-content__description--subtotal
  .order-cost-summary-content__description--subheader,
.order-cost-summary-content__description--shipping
  .order-cost-summary-content__description--subheader {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0 var(--spacing-xxsmall);
}

.order-cost-summary-content__description--subtotal
  .order-cost-summary-content__description--subheader
  .dropin-price,
.order-cost-summary-content__description--shipping
  .order-cost-summary-content__description--subheader
  .dropin-price {
  font: var(--type-details-overline-font);
}

.order-cost-summary-content__description--discount
  .order-cost-summary-content__description--header
  span:last-child {
  color: var(--color-alert-800);
}

.order-cost-summary-content__description--discount
  .order-cost-summary-content__description--subheader
  span:first-child {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 0 var(--spacing-xsmall);
}

.order-cost-summary-content__description--discount
  .order-cost-summary-content__description--subheader
  span:first-child
  span {
  font: var(--type-details-caption-1-font);
  letter-spacing: var(--type-details-caption-1-letter-spacing);
  color: var(--color-neutral-700);
}

.order-cost-summary-content__description--discount
  .order-cost-summary-content__description--subheader
  .dropin-price {
  font: var(--type-details-caption-1-font);
  letter-spacing: var(--type-details-caption-1-letter-spacing);
  color: var(--color-alert-800);
}

.order-cost-summary-content__description--total {
  margin-top: var(--spacing-medium);
}

.order-cost-summary-content__description--total
  .order-cost-summary-content__description--header
  span {
  font: var(--type-body-1-emphasized-font);
  letter-spacing: var(--type-body-1-emphasized-letter-spacing);
}

.order-cost-summary-content__accordion
  .dropin-accordion-section
  .dropin-accordion-section__content-container {
  gap: var(--spacing-small);
  margin: var(--spacing-small) 0;
}

.order-cost-summary-content__accordion-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.order-cost-summary-content__accordion-row p {
  font: var(--type-body-2-default-font);
  letter-spacing: var(--type-body-2-default-letter-spacing);
}

.order-cost-summary-content__accordion-row p:first-child {
  color: var(--color-neutral-700);
}

.order-cost-summary-content__accordion
  .order-cost-summary-content__accordion-row.order-cost-summary-content__accordion-total
  p:first-child {
  font: var(--type-body-1-default-font);
  letter-spacing: var(--type-body-1-default-letter-spacing);
}

OrderLoaders.css

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

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

OrderProductListContent.css

.order-order-product-list-content {
}

.order-order-product-list-content__items {
  display: grid;
  gap: var(--spacing-medium);
  list-style: none;
  margin: 0 0 var(--spacing-medium) 0;
  padding: 0;
}

.order-order-product-list-content .dropin-card__content {
  gap: 0;
}

.order-order-product-list-content__items .dropin-card__content {
  gap: var(--spacing-xsmall);
}

.order-order-product-list-content .dropin-cart-item__alert {
  margin-top: var(--spacing-xsmall);
}

.order-order-product-list-content .cart-summary-item__title--strikethrough {
  text-decoration: line-through;
  color: var(--color-neutral-500);
  font: var(--type-body-1-default-font);
  letter-spacing: var(--type-body-1-default-letter-spacing);
}

/* Medium (portrait tablets and large phones, 768px and up) */
@media only screen and (min-width: 320px) and (max-width: 768px) {
  .order-confirmation-cart-summary-item {
    margin-bottom: var(--spacing-medium);
  }
}

OrderSearchForm.css

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

.order-order-search-form {
  gap: var(--spacing-small);
  border-color: transparent;
}

.order-order-search-form .dropin-card__content {
  padding: var(--spacing-big) var(--spacing-xxbig) var(--spacing-xxbig)
    var(--spacing-xxbig);
}

.order-order-search-form p {
  color: var(--color-neutral-700);
  font: var(--type-body-2-default-font);
  letter-spacing: var(--type-body-2-default-letter-spacing);
  margin: 0;
}

.order-order-search-form__title {
  color: var(--color-neutral-800);
  font: var(--type-headline-2-strong-font);
  letter-spacing: var(--type-headline-2-strong-letter-spacing);
  margin: 0;
}

.order-order-search-form__wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas:
    'email'
    'lastname'
    'number'
    'button';
  gap: var(--spacing-medium);
}

.order-order-search-form__wrapper__item--email {
  grid-area: email;
}

.order-order-search-form__wrapper__item--lastname {
  grid-area: lastname;
}

.order-order-search-form__wrapper__item--number {
  grid-area: number;
}

.order-order-search-form__button-container {
  display: flex;
  justify-content: flex-end;
  grid-area: button;
}

.order-order-search-form form button {
  align-self: flex-end;
  justify-self: flex-end;
  margin-top: var(--spacing-small);
}

@media (min-width: 768px) {
  .order-order-search-form__wrapper {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      'email lastname'
      'number number'
      'button button';
  }
}

OrderStatusContent.css

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

.order-order-status-content .dropin-card__content {
  gap: 0;
}

.order-order-status-content__wrapper
  .order-order-status-content__wrapper-description
  p {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font: var(--type-body-1-default-font);
  letter-spacing: var(--type-body-1-default-letter-spacing);
}

.order-order-status-content__wrapper-description {
  margin-bottom: var(--spacing-medium);
}

.order-order-status-content__wrapper-description--actions-slot {
  margin-bottom: 0;
}

ReturnOrderMessage.css

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

.order-return-order-message p {
  margin: 0;
  padding: 0;
}

.order-return-order-message a {
  max-width: 162px;
  padding: var(--spacing-xsmall);
}

.order-return-order-message .order-return-order-message__title {
  font: var(--type-headline-1-font);
  letter-spacing: var(--type-headline-1-letter-spacing);
  color: var(--color-neutral-800);
  margin-bottom: var(--spacing-small);
}

.order-return-order-message .order-return-order-message__subtitle {
  font: var(--type-body-2-default-font);
  letter-spacing: var(--type-body-2-default-letter-spacing);
  margin-bottom: var(--spacing-xlarge);
}

ReturnOrderProductList.css

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

.order-create-return .order-create-return_notification {
  margin-bottom: var(--spacing-medium);
}

.order-return-order-product-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.order-return-order-product-list .order-return-order-product-list__item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  margin-bottom: var(--spacing-medium);
  position: relative;
}

.order-return-order-product-list__item--blur::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--color-opacity-24);
  z-index: 1;
}

.order-return-order-product-list
  > .order-return-order-product-list__item:last-child {
  display: flex;
  justify-content: flex-end;
}

.order-return-order-product-list
  > .order-return-order-product-list__item
  .dropin-cart-item__alert {
  margin-top: var(--spacing-xsmall);
}

.order-return-order-product-list
  > .order-return-order-product-list__item
  .cart-summary-item__title--strikethrough {
  text-decoration: line-through;
  color: var(--color-neutral-500);
  font: var(--type-body-1-default-font);
  letter-spacing: var(--type-body-1-default-letter-spacing);
}

.order-create-return
  .dropin-cart-item__footer
  .drop-incrementer.drop-incrementer--medium {
  max-width: 160px;
}

.order-return-order-product-list .drop-incrementer__button-container {
  margin: 0;
}

/* Medium (portrait tablets and large phones, 768px and up) */
@media only screen and (min-width: 320px) and (max-width: 768px) {
  .order-return-order-product-list > .order-return-order-product-list__item {
    margin-bottom: var(--spacing-medium);
  }
}

ReturnReasonForm.css

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

.order-create-return .order-create-return_notification {
  margin-bottom: var(--spacing-medium);
}

.order-return-order-product-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.order-return-order-product-list .order-return-order-product-list__item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  margin-bottom: var(--spacing-medium);
  position: relative;
}

.order-return-order-product-list__item--blur::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--color-opacity-24);
  z-index: 1;
}

.order-return-order-product-list
  > .order-return-order-product-list__item:last-child {
  display: flex;
  justify-content: flex-end;
}

.order-return-order-product-list
  > .order-return-order-product-list__item
  .dropin-cart-item__alert {
  margin-top: var(--spacing-xsmall);
}

.order-return-order-product-list
  > .order-return-order-product-list__item
  .cart-summary-item__title--strikethrough {
  text-decoration: line-through;
  color: var(--color-neutral-500);
  font: var(--type-body-1-default-font);
  letter-spacing: var(--type-body-1-default-letter-spacing);
}

.order-create-return
  .dropin-cart-item__footer
  .drop-incrementer.drop-incrementer--medium {
  max-width: 160px;
}

.order-return-order-product-list .drop-incrementer__button-container {
  margin: 0;
}

/* Medium (portrait tablets and large phones, 768px and up) */
@media only screen and (min-width: 320px) and (max-width: 768px) {
  .order-return-order-product-list > .order-return-order-product-list__item {
    margin-bottom: var(--spacing-medium);
  }
}

ReturnsListContent.css

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

.order-returns-list-content .order-returns__header--minified {
  margin-bottom: var(--spacing-small);
}

.order-returns-list-content .order-returns__header--full-size {
  margin-bottom: 0;
}

.order-returns-list-content__cards-list {
  margin-bottom: var(--spacing-small);
}

.order-returns-list-content__cards-list .dropin-card__content {
  gap: 0;
}

.order-returns-list-content__cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0px 0px;
  grid-template-areas:
    'descriptions descriptions actions'
    'images images actions';
}

.order-returns-list-content__descriptions {
  grid-area: descriptions;
}

.order-returns-list-content__descriptions p {
  margin: 0 0 var(--spacing-small) 0;
  padding: 0;
  box-sizing: border-box;
  font: var(--type-body-1-default-font);
  letter-spacing: var(--type-body-1-default-letter-spacing);
  color: var(--color-neutral-800);
}

.order-returns-list-content__descriptions p a {
  display: inline-block;
  font: var(--type-button-2-font);
  letter-spacing: var(--type-button-2-letter-spacing);
  color: var(--color-brand-800);
}

.order-returns-list-content__descriptions p a:hover {
  color: var(--color-brand-800);
}

.order-returns-list-content__descriptions
  .order-returns-list-content__return-status {
  font: var(--type-button-2-font);
  font-weight: 500;
  color: var(--color-neutral-800);
}

.order-returns-list-content .order-returns-list-content__actions {
  margin: 0;
  padding: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
  text-decoration: none;
}

.order-returns-list-content .order-returns-list-content__actions:hover {
  text-decoration: none;
  color: var(--color-brand-500);
}

.order-returns-list-content__card .dropin-card__content {
  padding: var(--spacing-small) var(--spacing-medium);
}

.order-returns-list-content__card .order-returns-list-content__card-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-neutral-800);
  height: calc(88px - var(--spacing-small) * 2);
}

.order-returns-list-content__card-wrapper > p {
  font: var(--type-button-2-font);
  letter-spacing: var(--type-button-2-letter-spacing);
}

.order-returns-list-content__card-wrapper svg {
  color: var(--color-neutral-800);
}

.order-returns-list-content__images {
  margin-top: var(--spacing-small);
  grid-area: images;
}

.order-returns-list-content__actions {
  grid-area: actions;
  align-self: center;
}

.order-returns-list-content .order-returns-list-content__images {
  overflow: auto;
}

.order-returns-list-content
  .order-returns-list-content__images
  .dropin-content-grid__content {
  grid-template-columns: repeat(6, max-content) !important;
}

.order-returns-list-content
  .order-returns-list-content__images-3
  .dropin-content-grid__content {
  grid-template-columns: repeat(3, max-content) !important;
}

.order-returns-list-content .order-returns-list-content__images img {
  object-fit: contain;
  width: 85px;
  height: 114px;
}

ShippingStatusCard.css

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

.order-shipping-status-card .dropin-card__content {
  gap: 0;
}

.order-shipping-status-card--count-steper {
  font: var(--type-headline-2-strong-font);
  letter-spacing: var(--type-headline-2-strong-letter-spacing);
}

.order-shipping-status-card__header {
  display: grid;
  grid-template-columns: 1fr auto;
  justify-items: self-start;
  align-items: center;
  margin-bottom: var(--spacing-xsmall);
}

.order-shipping-status-card__header button {
  max-height: 40px;
}

.order-shipping-status-card__header--content p,
.order-shipping-status-card--return-order p {
  margin: 0;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font: var(--type-body-1-default-font);
  letter-spacing: var(--type-body-1-default-letter-spacing);
  margin-bottom: var(--spacing-xsmall);
}

.order-shipping-status-card--return-order p a {
  display: inline-block;
  font: var(--type-button-2-font);
  letter-spacing: var(--type-button-2-letter-spacing);
  color: var(--color-brand-800);
}

.order-shipping-status-card--return-order p a:hover {
  text-decoration: none;
  color: var(--color-brand-800);
}

.order-shipping-status-card
  .order-shipping-status-card__images
  .dropin-content-grid__content {
  grid-template-columns: repeat(6, max-content) !important;
}

.order-shipping-status-card.order-shipping-status-card--return-order
  .dropin-content-grid.order-shipping-status-card__images {
  overflow: auto !important;
}

.order-shipping-status-card .order-shipping-status-card__images img {
  object-fit: contain;
  width: 85px;
  height: 114px;
}