Cart styles

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

Customization example

Add this to blocks/commerce-cart/commerce-cart.css to customize the Cart drop-in.

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

.cart-estimate-shipping {
  gap: var(--spacing-xsmall);
  color: var(--color-neutral-800);
  gap: var(--spacing-small);
  color: var(--color-brand-800);
}

Container classes

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

/* CartSummaryGrid */
.cart-cart-summary-grid {}
.cart-cart-summary-grid__content {}
.cart-cart-summary-grid__content--empty {}
.cart-cart-summary-grid__empty-cart {}
.cart-cart-summary-grid__item-container {}

/* CartSummaryList */
.cart-cart-summary-list {}
.cart-cart-summary-list-accordion {}
.cart-cart-summary-list-accordion__section {}
.cart-cart-summary-list-footer__action {}
.cart-cart-summary-list__background--secondary {}
.cart-cart-summary-list__content {}
.cart-cart-summary-list__content--empty {}
.cart-cart-summary-list__empty-cart {}
.cart-cart-summary-list__heading {}
.cart-cart-summary-list__heading--full-width {}
.cart-cart-summary-list__heading-divider {}
.cart-cart-summary-list__out-of-stock-message {}
.dropin-cart-item__quantity {}

/* CartSummaryTable */
.cart-cart-summary-table {}
.cart-cart-summary-table__body {}
.cart-cart-summary-table__cell-item {}
.cart-cart-summary-table__cell-price {}
.cart-cart-summary-table__cell-qty {}
.cart-cart-summary-table__cell-qty-input {}
.cart-cart-summary-table__cell-qty-updater {}
.cart-cart-summary-table__cell-qty-updater--disabled {}
.cart-cart-summary-table__cell-qty-updater--error {}
.cart-cart-summary-table__cell-subtotal {}
.cart-cart-summary-table__header {}
.cart-cart-summary-table__header-price {}
.cart-cart-summary-table__header-qty {}
.cart-cart-summary-table__header-subtotal {}
.cart-cart-summary-table__item-actions {}
.cart-cart-summary-table__item-footer {}
.cart-cart-summary-table__item-price {}
.cart-cart-summary-table__item-price-tax-label {}
.cart-cart-summary-table__item-subtotal {}
.cart-cart-summary-table__item-subtotal-tax-label {}
.cart-cart-summary-table__mobile-label {}
.cart-cart-summary-table__row {}
.cart-cart-summary-table__row--error {}
.cart-cart-summary-table__row--updating {}
.cart-cart-summary-table__skeleton {}
.elsie-skeleton-row {}

/* Item */
.cart-cart-summary-table__item {}
.cart-cart-summary-table__item-configuration {}
.cart-cart-summary-table__item-configuration-label {}
.cart-cart-summary-table__item-configuration-value {}
.cart-cart-summary-table__item-configurations {}
.cart-cart-summary-table__item-details {}
.cart-cart-summary-table__item-image-wrapper {}
.cart-cart-summary-table__item-name {}
.cart-cart-summary-table__item-qty {}
.cart-cart-summary-table__item-quantity-alert-icon {}
.cart-cart-summary-table__item-quantity-alert-text {}
.cart-cart-summary-table__item-quantity-alert-wrapper {}
.cart-cart-summary-table__item-quantity-warning-icon {}
.cart-cart-summary-table__item-quantity-warning-text {}
.cart-cart-summary-table__item-quantity-warning-wrapper {}
.cart-cart-summary-table__item-remove-button {}
.cart-cart-summary-table__sku {}

/* Coupons */
.cart-coupons__accordion-section {}
.cart-gift-cards {}
.coupon-code-form__action {}
.coupon-code-form__applied {}
.coupon-code-form__applied-item {}
.coupon-code-form__codes {}
.coupon-code-form__error {}
.dropin-accordion-section__content-container {}
.dropin-accordion-section__title-container {}
.dropin-input-container {}
.dropin-tag-container {}

/* EmptyCart */
.cart-empty-cart {}
.cart-empty-cart__wrapper {}
.dropin-card {}
.dropin-card--secondary {}

/* EstimateShipping */
.cart-estimate-shipping {}
.cart-estimate-shipping--edit {}
.cart-estimate-shipping--hide {}
.cart-estimate-shipping--loading {}
.cart-estimate-shipping--state {}
.cart-estimate-shipping--zip {}
.cart-estimate-shippingLink {}
.cart-estimate-shipping__caption {}
.cart-estimate-shipping__label {}
.cart-estimate-shipping__label--bold {}
.cart-estimate-shipping__label--muted {}
.cart-estimate-shipping__link {}
.cart-estimate-shipping__price {}
.cart-estimate-shipping__price--bold {}
.cart-estimate-shipping__price--muted {}

/* GiftOptions */
.cart-gift-options-readonly__checkboxes {}
.cart-gift-options-readonly__form {}
.cart-gift-options-readonly__header {}
.cart-gift-options-view {}
.cart-gift-options-view--loading {}
.cart-gift-options-view--order {}
.cart-gift-options-view--product {}
.cart-gift-options-view--readonly {}
.cart-gift-options-view__field-gift-wrap {}
.cart-gift-options-view__footer {}
.cart-gift-options-view__icon--success {}
.cart-gift-options-view__modal {}
.cart-gift-options-view__modal-content {}
.cart-gift-options-view__modal-grid {}
.cart-gift-options-view__modal-wrapper {}
.cart-gift-options-view__spinner {}
.cart-gift-options-view__top {}
.cart-gift-options-view__top--hidden {}
.dropin-accordion-section__content-container {}
.dropin-accordion-section__flex {}
.dropin-accordion-section__heading {}
.dropin-accordion-section__title {}
.dropin-accordion-section__title-container {}
.dropin-button {}
.dropin-card {}
.dropin-card--primary {}
.dropin-card__content {}
.dropin-checkbox__label {}
.dropin-checkbox__label--medium {}
.dropin-content-grid {}
.dropin-content-grid__content {}
.dropin-divider {}
.dropin-field {}
.dropin-iconButton {}
.dropin-modal {}
.dropin-modal--dim {}
.dropin-modal__body--centered {}
.dropin-modal__content {}
.dropin-modal__header {}
.dropin-modal__header-title {}
.dropin-modal__header-title-content {}
.dropin-price {}
.dropin-textarea {}
.dropin-textarea--error {}
.dropin-textarea__label--floating {}
.dropin-textarea__label--floating--error {}
.dropin-textarea__label--floating--text {}

/* MiniCart */
.cart-cart-summary-list__heading {}
.cart-mini-cart {}
.cart-mini-cart__empty-cart {}
.cart-mini-cart__footer {}
.cart-mini-cart__footer__ctas {}
.cart-mini-cart__footer__estimated-total {}
.cart-mini-cart__footer__estimated-total-excluding-taxes {}
.cart-mini-cart__heading {}
.cart-mini-cart__heading-divider {}
.cart-mini-cart__preCheckoutSection {}
.cart-mini-cart__productListFooter {}
.cart-mini-cart__products {}
.dropin-cart-item__configurations {}

/* OrderSummary */
.cart-order-summary {}
.cart-order-summary--loading {}
.cart-order-summary__applied-gift-cards {}
.cart-order-summary__caption {}
.cart-order-summary__content {}
.cart-order-summary__coupon__code {}
.cart-order-summary__coupons {}
.cart-order-summary__discount {}
.cart-order-summary__divider-primary {}
.cart-order-summary__divider-secondary {}
.cart-order-summary__entry {}
.cart-order-summary__gift-cards {}
.cart-order-summary__heading {}
.cart-order-summary__label {}
.cart-order-summary__price {}
.cart-order-summary__primary {}
.cart-order-summary__primaryAction {}
.cart-order-summary__secondary {}
.cart-order-summary__shipping--edit {}
.cart-order-summary__shipping--hide {}
.cart-order-summary__shipping--state {}
.cart-order-summary__shipping--zip {}
.cart-order-summary__shippingLink {}
.cart-order-summary__spinner {}
.cart-order-summary__taxEntry {}
.cart-order-summary__taxes {}
.cart-order-summary__total {}
.dropin-accordion {}
.dropin-accordion-section__content-container {}
.dropin-divider {}

/* OrderSummaryLine */
.cart-order-summary__label {}
.cart-order-summary__label--bold {}
.cart-order-summary__label--muted {}
.cart-order-summary__price {}
.cart-order-summary__price--bold {}
.cart-order-summary__price--muted {}