Checkout styles

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

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

@import 'bill-to-shipping-address.css';
@import 'estimate-shipping.css';
@import 'fields-form.css';
@import 'heading.css';
@import 'login-form.css';
@import 'order-confirmation-header.css';
@import 'out-of-stock.css';
@import 'overlay-loader.css';
@import 'payment-methods.css';
@import 'place-order.css';
@import 'server-error.css';
@import 'shipping-methods.css';

Big Picture

The quickest way to override checkout CSS is to inspect the checkout 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 checkout styles

Create a new CSS file in your project for the checkout component. Name the file custom-checkout.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-checkout.css file to add or override the default styles.
Import the custom CSS file into the commerce-checkout.css file.
```
@import 'custom-checkout.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 checkout1 component.

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

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

Checkout CSS classes

The CSS classes for each checkout component are provided here.

BillToShippingAddress.css

/********************************************************************
* ADOBE CONFIDENTIAL
* __________________
*
*  Copyright 2024 Adobe
*  All Rights Reserved.
*
* NOTICE:  All information contained herein is, and remains
* the property of Adobe and its suppliers, if any. The intellectual
* and technical concepts contained herein are proprietary to Adobe
* and its suppliers and are protected by all applicable intellectual
* property laws, including trade secret and copyright laws.
* Dissemination of this information or reproduction of this material
* is strictly forbidden unless prior written permission is obtained
* from Adobe.
*******************************************************************/

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

.checkout-bill-to-shipping-address label {
  font: var(--type-body-2-default-font);
  letter-spacing: var(--type-body-2-default-letter-spacing);
  gap: 0;
}

EstimateShipping.css

/********************************************************************
* ADOBE CONFIDENTIAL
* __________________
*
*  Copyright 2024 Adobe
*  All Rights Reserved.
*
* NOTICE:  All information contained herein is, and remains
* the property of Adobe and its suppliers, if any. The intellectual
* and technical concepts contained herein are proprietary to Adobe
* and its suppliers and are protected by all applicable intellectual
* property laws, including trade secret and copyright laws.
* Dissemination of this information or reproduction of this material
* is strictly forbidden unless prior written permission is obtained
* from Adobe.
*******************************************************************/

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

.checkout-estimate-shipping {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xxsmall);
  align-items: center;
  color: var(--color-neutral-800);
}

.checkout-estimate-shipping__label,
.checkout-estimate-shipping__price {
  font: var(--type-body-1-default-font);
  letter-spacing: var(--type-body-1-default-letter-spacing);
}

.checkout-estimate-shipping__label--muted {
  font: var(--type-body-2-default-font);
  letter-spacing: var(--type-body-2-default-letter-spacing);
  color: var(--color-neutral-700);
}

.checkout-estimate-shipping__price--muted {
  font: var(--type-body-2-default-font);
  letter-spacing: var(--type-body-2-default-letter-spacing);
}

.checkout-estimate-shipping__price {
  text-align: right;
}

.checkout-estimate-shipping__label--bold,
.checkout-estimate-shipping__price--bold {
  font: var(--type-body-1-emphasized-font);
  letter-spacing: var(--type-body-1-emphasized-letter-spacing);
}

.checkout-estimate-shipping__caption {
  font: var(--type-details-caption-2-font);
  letter-spacing: var(--type-details-caption-2-letter-spacing);
  color: var(--color-neutral-700);
}

.cart-order-summary__shipping .dropin-skeleton {
  grid-template-columns: 1fr;
}

/* Medium (portrait tablets and large phones, 768px and up) */
/* @media only screen and (min-width: 768px) { } */

/* Large (landscape tablets, 1024px and up) */
/* @media only screen and (min-width: 1024px) { } */

/* XLarge (laptops/desktops, 1366px and up) */
/* @media only screen and (min-width: 1366px) { } */

/* XXlarge (large laptops and desktops, 1920px and up) */
/* @media only screen and (min-width: 1920px) { } */

Heading.css

/********************************************************************
* ADOBE CONFIDENTIAL
* __________________
*
*  Copyright 2024 Adobe
*  All Rights Reserved.
*
* NOTICE:  All information contained herein is, and remains
* the property of Adobe and its suppliers, if any. The intellectual
* and technical concepts contained herein are proprietary to Adobe
* and its suppliers and are protected by all applicable intellectual
* property laws, including trade secret and copyright laws.
* Dissemination of this information or reproduction of this material
* is strictly forbidden unless prior written permission is obtained
* from Adobe.
*******************************************************************/

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

/* .dropin-heading { } */

/* Extra small devices (phones, 600px and down) */
/* @media only screen and (max-width: 600px) { } */

/* Small devices (portrait tablets and large phones, 600px and up) */
/* @media only screen and (min-width: 600px) { } */

/* Medium devices (landscape tablets, 768px and up) */
/* @media only screen and (min-width: 768px) { } */

/* Large devices (laptops/desktops, 992px and up) */
/* @media only screen and (min-width: 992px) { } */

/* Extra large devices (large laptops and desktops, 1200px and up) */
/* @media only screen and (min-width: 1200px) { } */

LoginForm.css

/********************************************************************
* ADOBE CONFIDENTIAL
* __________________
*
*  Copyright 2024 Adobe
*  All Rights Reserved.
*
* NOTICE:  All information contained herein is, and remains
* the property of Adobe and its suppliers, if any. The intellectual
* and technical concepts contained herein are proprietary to Adobe
* and its suppliers and are protected by all applicable intellectual
* property laws, including trade secret and copyright laws.
* Dissemination of this information or reproduction of this material
* is strictly forbidden unless prior written permission is obtained
* from Adobe.
*******************************************************************/

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

.checkout-login-form__heading {
  display: grid;
  grid-template-columns: 1fr max-content;
  grid-auto-rows: max-content;
}

.checkout-login-form__content {
  grid-auto-rows: max-content;
}

.checkout-login-form__customer-details {
  display: grid;
  grid-auto-flow: row;
  gap: var(--spacing-xxsmall);
}

.checkout-login-form__customer-name {
  font: var(--type-body-1-strong-font);
  letter-spacing: var(--type-body-1-default-letter-spacing);
}

.checkout-login-form__customer-email {
  font: var(--type-body-2-default-font);
  letter-spacing: var(--type-body-2-default-letter-spacing);
  color: var(--color-neutral-700);
}

.checkout-login-form__title {
  grid-column-start: 1;
  color: var(--color-neutral-800);
  font: var(--type-headline-2-default-font);
  letter-spacing: var(--type-headline-2-default-letter-spacing);
  margin: 0 0 var(--spacing-medium) 0;
}

.checkout-login-form__sign-in,
.checkout-login-form__sign-out {
  grid-column-start: 2;
  color: var(--color-neutral-800);
  font: var(--type-body-2-default-font);
  letter-spacing: var(--type-body-2-default-letter-spacing);
  justify-self: flex-end;
  margin-top: var(--spacing-xxsmall);
}

a.checkout-login-form__link {
  font: var(--type-body-2-strong-font);
  margin-left: var(--spacing-xxsmall);
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (min-width: 320px) and (max-width: 768px) {
  .checkout-login-form__heading {
    grid-template-columns: repeat(1, 1fr [col-start]);
    grid-template-rows: 1fr;
  }

  .checkout-login-form__sign-in,
  .checkout-login-form__sign-out {
    grid-column-start: 1;
    align-self: flex-start;
    justify-self: flex-start;
    margin-top: 0;
    margin-bottom: var(--spacing-medium);
  }
}

/* Extra small devices (phones, 600px and down) */
/* @media only screen and (max-width: 600px) { } */

/* Small devices (portrait tablets and large phones, 600px and up) */
/* @media only screen and (min-width: 600px) { } */

/* Medium devices (landscape tablets, 768px and up) */
/* @media only screen and (min-width: 768px) { } */

/* Large devices (laptops/desktops, 992px and up) */
/* @media only screen and (min-width: 992px) { } */

/* Extra large devices (large laptops and desktops, 1200px and up) */
/* @media only screen and (min-width: 1200px) { } */

OrderConfirmationHeader.css

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

.order-confirmation-header {
  text-align: center;
  padding: var(--spacing-xxbig);
}

.order-confirmation-header__icon {
  margin-bottom: var(--spacing-small);
}

.order-confirmation-header__title {
  color: var(--color-neutral-800);
  font: var(--type-headline-1-font);
  letter-spacing: var(--type-headline-1-letter-spacing);
  margin: 0;
}

.order-confirmation-header__title:first-letter {
  text-transform: uppercase;
}

.order-confirmation-header__order {
  color: var(--color-neutral-700);
  font: var(--type-details-overline-font);
  letter-spacing: var(--type-details-overline-letter-spacing);
  margin: var(--spacing-xxsmall) 0 0 0;
}

.order-confirmation-header .success-icon {
  color: var(--color-positive-500);
}

.order-confirmation-create-account {
  display: grid;
  gap: var(--spacing-small);
  margin-top: var(--spacing-large);
}

.order-confirmation-create-account__message {
  font: var(--type-body-2-default-font);
  letter-spacing: var(--type-body-2-default-letter-spacing);
  margin: 0;
}

.order-confirmation-create-account__button {
  display: flex;
  margin: 0 auto;
  text-align: center;
}

/* Medium (portrait tablets and large phones, 768px and up) */
/* @media only screen and (min-width: 768px) { } */

/* Large (landscape tablets, 1024px and up) */
/* @media only screen and (min-width: 1024px) { } */

/* XLarge (laptops/desktops, 1366px and up) */
/* @media only screen and (min-width: 1366px) { } */

/* XXlarge (large laptops and desktops, 1920px and up) */
/* @media only screen and (min-width: 1920px) { } */

OutOfStock.css

/********************************************************************
* ADOBE CONFIDENTIAL
* __________________
*
*  Copyright 2024 Adobe
*  All Rights Reserved.
*
* NOTICE:  All information contained herein is, and remains
* the property of Adobe and its suppliers, if any. The intellectual
* and technical concepts contained herein are proprietary to Adobe
* and its suppliers and are protected by all applicable intellectual
* property laws, including trade secret and copyright laws.
* Dissemination of this information or reproduction of this material
* is strictly forbidden unless prior written permission is obtained
* from Adobe.
*******************************************************************/

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

.checkout-out-of-stock.dropin-card    {
  border-color: var(--color-warning-500);
}
.checkout-out-of-stock .dropin-card__content {
  gap: var(--spacing-small);
  padding: var(--spacing-small);
}

.checkout-out-of-stock__title {
  color: var(--color-neutral-900);
  font: var(--type-body-2-strong-font);
  margin: 0;
  display: flex;
  gap: var(--spacing-xxsmall);
  align-items: center;
  justify-content: left;
  text-align: center;
}

.checkout-out-of-stock__message {
  color: var(--color-neutral-800);
  font: var(--type-body-2-default-font);
  margin: 0;
}

.checkout-out-of-stock__items {
  display: grid;
  grid-template-columns: repeat(5, 100px);
  grid-gap: var(--spacing-small);
  list-style: none;
  padding: 0;
  margin: 0;
}

.checkout-out-of-stock__item img {
  width: 100%;
  height: auto;
}

.checkout-out-of-stock__actions {
  display: flex;
  gap: var(--spacing-small);
  justify-content: flex-end;
}

a.checkout-out-of-stock__action {
  font: var(--type-details-caption-1-font);
}

.checkout-out-of-stock__action {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.checkout-out-of-stock__action:hover {
  --textColor: var(--color-brand-700);
  text-decoration: solid underline var(--textColor);
  text-underline-offset: 6px;
}

/* Medium (portrait tablets and large phones, 768px and up) */
/* @media only screen and (min-width: 768px) { } */

/* Large (landscape tablets, 1024px and up) */
/* @media only screen and (min-width: 1024px) { } */

/* XLarge (laptops/desktops, 1366px and up) */
/* @media only screen and (min-width: 1366px) { } */

/* XXlarge (large laptops and desktops, 1920px and up) */
/* @media only screen and (min-width: 1920px) { } */

OverlayLoader.css

/********************************************************************
* ADOBE CONFIDENTIAL
* __________________
*
*  Copyright 2024 Adobe
*  All Rights Reserved.
*
* NOTICE:  All information contained herein is, and remains
* the property of Adobe and its suppliers, if any. The intellectual
* and technical concepts contained herein are proprietary to Adobe
* and its suppliers and are protected by all applicable intellectual
* property laws, including trade secret and copyright laws.
* Dissemination of this information or reproduction of this material
* is strictly forbidden unless prior written permission is obtained
* from Adobe.
*******************************************************************/

.checkout-overlay-loader {
  align-items: center;
  background: var(--color-neutral-50);
  display: flex;
  height: 100vh;
  justify-content: center;
  left: 0;
  opacity: 0.5;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
}

PaymentMethods.css

/********************************************************************
* ADOBE CONFIDENTIAL
* __________________
*
*  Copyright 2024 Adobe
*  All Rights Reserved.
*
* NOTICE:  All information contained herein is, and remains
* the property of Adobe and its suppliers, if any. The intellectual
* and technical concepts contained herein are proprietary to Adobe
* and its suppliers and are protected by all applicable intellectual
* property laws, including trade secret and copyright laws.
* Dissemination of this information or reproduction of this material
* is strictly forbidden unless prior written permission is obtained
* from Adobe.
*******************************************************************/

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

.checkout-payment-methods__title {
  font: var(--type-headline-2-default-font);
  letter-spacing: var(--type-headline-2-default-letter-spacing);
  margin: 0 0 var(--spacing-medium) 0;
}

.checkout-payment-methods__wrapper {
  position: relative;
  display: grid;
}

.checkout-payment-methods__methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-medium);
}

.checkout-payment-methods__content {
  margin-top: var(--spacing-medium);
}

.checkout-payment-methods--full-width {
  grid-template-columns: 1fr;
}

/* Loading */
.checkout-payment-methods--loading {
  opacity: 0.4;
  pointer-events: none;
}

.checkout-payment-methods__spinner {
  margin: 0 auto;
  position: absolute;
  z-index: 999;
  left: 0;
  right: 0;
  top: calc(50% - (var(--size) / 2));
  bottom: 0;
}

.checkout__content [data-slot="PaymentMethods"]:empty {
  display: none;
}

/*********** Media queries ***********/
/* Extra small devices (phones, 600px and down) */
@media only screen and (min-width: 320px) and (max-width: 768px) {
  .checkout-payment-methods__methods {
    grid-template-columns: 1fr;
  }
}

/* Medium (portrait tablets and large phones, 768px and up) */
/* @media only screen and (min-width: 768px) { } */

/* Large (landscape tablets, 1024px and up) */
/* @media only screen and (min-width: 1024px) { } */

/* XLarge (laptops/desktops, 1366px and up) */
/* @media only screen and (min-width: 1366px) { } */

/* XXlarge (large laptops and desktops, 1920px and up) */
/* @media only screen and (min-width: 1920px) { } */

PlaceOrder.css

/********************************************************************
* ADOBE CONFIDENTIAL
* __________________
*
*  Copyright 2024 Adobe
*  All Rights Reserved.
*
* NOTICE:  All information contained herein is, and remains
* the property of Adobe and its suppliers, if any. The intellectual
* and technical concepts contained herein are proprietary to Adobe
* and its suppliers and are protected by all applicable intellectual
* property laws, including trade secret and copyright laws.
* Dissemination of this information or reproduction of this material
* is strictly forbidden unless prior written permission is obtained
* from Adobe.
*******************************************************************/

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

.checkout-place-order {
  display: grid;
  padding-bottom: var(--spacing-big);
}

.checkout-place-order__button {
  align-self: flex-end;
  justify-self: flex-end;
}

@media only screen and (min-width:320px) and (max-width: 768px) {
  .checkout-place-order {
    background-color: var(--color-neutral-200);
    padding: var(--spacing-medium) var(--spacing-medium) var(--spacing-big) var(--spacing-medium);
  }

  .checkout-place-order__button {
    align-self: center;
    justify-self: stretch;
  }
}

/* Medium (portrait tablets and large phones, 768px and up) */
/* @media only screen and (min-width: 768px) { } */

/* Large (landscape tablets, 1024px and up) */
/* @media only screen and (min-width: 1024px) { } */

/* XLarge (laptops/desktops, 1366px and up) */
/* @media only screen and (min-width: 1366px) { } */

/* XXlarge (large laptops and desktops, 1920px and up) */
/* @media only screen and (min-width: 1920px) { } */

ServerError.css

/********************************************************************
* ADOBE CONFIDENTIAL
* __________________
*
*  Copyright 2024 Adobe
*  All Rights Reserved.
*
* NOTICE:  All information contained herein is, and remains
* the property of Adobe and its suppliers, if any. The intellectual
* and technical concepts contained herein are proprietary to Adobe
* and its suppliers and are protected by all applicable intellectual
* property laws, including trade secret and copyright laws.
* Dissemination of this information or reproduction of this material
* is strictly forbidden unless prior written permission is obtained
* from Adobe.
*******************************************************************/

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

.checkout-server-error {
    position: relative;
    text-align: center;
    display: grid;
}

.checkout-server-error__icon .error-icon {
  color: var(--color-alert-500);
}

.checkout-server-error a {
  font: var(--type-body-2-strong-font);
  letter-spacing: var(--type-body-2-strong-letter-spacing);
}

/* Medium (portrait tablets and large phones, 768px and up) */
/* @media only screen and (min-width: 768px) { } */

/* Large (landscape tablets, 1024px and up) */
/* @media only screen and (min-width: 1024px) { } */

/* XLarge (laptops/desktops, 1366px and up) */
/* @media only screen and (min-width: 1366px) { } */

/* XXlarge (large laptops and desktops, 1920px and up) */
/* @media only screen and (min-width: 1920px) { } */

ShippingMethods.css

/********************************************************************
* ADOBE CONFIDENTIAL
* __________________
*
*  Copyright 2024 Adobe
*  All Rights Reserved.
*
* NOTICE:  All information contained herein is, and remains
* the property of Adobe and its suppliers, if any. The intellectual
* and technical concepts contained herein are proprietary to Adobe
* and its suppliers and are protected by all applicable intellectual
* property laws, including trade secret and copyright laws.
* Dissemination of this information or reproduction of this material
* is strictly forbidden unless prior written permission is obtained
* from Adobe.
*******************************************************************/

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

.checkout-shipping-methods__title {
  color: var(--color-neutral-800);
  font: var(--type-body-1-default-font);
  letter-spacing: var(--type-body-1-default-letter-spacing);
  margin: 0 0 var(--spacing-medium) 0;
}

.checkout-shipping-methods__content {
  position: relative;
  display: block;
}

.checkout-shipping-methods__method {
  margin-bottom: var(--spacing-medium);
  width: fit-content;
  cursor: pointer;
  font: var(--type-body-2-default-font);
  letter-spacing: var(--type-body-2-default-letter-spacing);
}

.checkout-shipping-methods__method:last-child {
  margin-bottom: 0;
}

.dropin-radio-button__label .dropin-price {
  color: var(--color-neutral-800);
  font-weight: normal;
}

/* Loading */
.checkout-shipping-methods__options--loading {
  opacity: 0.4;
  pointer-events: none;
}

.checkout-shipping-methods__spinner {
  margin: 0 auto;
  position: absolute;
  z-index: 999;
  left: 0;
  right: 0;
  top: calc(50% - (var(--size) / 2));
  bottom: 0;
}

/* Extra small devices (phones, 600px and down) */
/* @media only screen and (max-width: 600px) { } */

/* Small devices (portrait tablets and large phones, 600px and up) */
/* @media only screen and (min-width: 600px) { } */

/* Medium devices (landscape tablets, 768px and up) */
/* @media only screen and (min-width: 768px) { } */

/* Large devices (laptops/desktops, 992px and up) */
/* @media only screen and (min-width: 992px) { } */

/* Extra large devices (large laptops and desktops, 1200px and up) */
/* @media only screen and (min-width: 1200px) { } */