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