Cart styles

The CSS classes for each UI component that provides the cart 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 cart contains several components that provide its UI. If you plan to make several CSS changes to the dropin-in component, we suggest creating CSS files for each drop-in component (in the cart directory) and importing those into the cart.css file as shown below. This practice makes it easier to maintain and update your CSS in the future.

@import 'cart.css';
@import 'empty-cart.css';
@import 'mini-cart.css';

Customizing your cart styles

The quickest way to override the cart CSS is to inspect the cart UI from your browser’s developer tools.

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). This class styles the Cart component, so use your cart.css file.
Copy the CSS class to your cart.css file to override the existing rules or add new rules to the class. But wait! Look closely 🧐 at the .cart-cart__heading class. It’s using two design tokens. And when you see a design token within a CSS rule, don’t remove the token. Instead, change the token’s value (where it’s defined) OR create a new token along-side this existing one to ensure maintenance and updates continue to benefit from global design token usage.

Example CSS overrides

Here’s an example of adding CSS class overrides to your cart.css file:

.cart-cart__heading {
  color: var(--color-positive-800);
}

.cart-empty-cart__wrapper {
  text-align: center;
}

.cart-mini-cart__footer {
  row-gap: var(--spacing-small);
}

Cart component CSS

The CSS classes for each cart component are provided here.

cart.css

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

.cart-cart {
  container-type: inline-size;
  container-name: cart;
}

.cart-cart__wrapper {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-gap: var(--spacing-medium);
}

.cart-cart__heading {
  display: grid;
  row-gap: var(--spacing-xsmall);
  padding: var(--spacing-medium);
  padding-bottom: 0px;
  font: var(--type-headline-1-font);
  letter-spacing: var(--type-headline-1-letter-spacing);
  color: var(--color-neutral-800);
}

.cart-cart__heading-divider {
  width: 100%;
  margin: var(--spacing-xxsmall) 0 0 0;
}

.cart-cart__content {
  display: grid;
  grid-template-columns: 1fr;
  padding: 0 var(--spacing-medium);
}

.cart-cart__empty-cart {
  justify-self: center;
  align-self: center;
  width: 100%;
  max-width: 800px;
}

.cart-cart__price-summary {
  padding: var(--spacing-small) var(--spacing-medium);
  background-color: var(--color-neutral-200);
}

.dropin-price-summary__shipping--zip,
.dropin-price-summary__shipping--state {
  background-color: var(--color-neutral-50);
}

@container cart (width >= 1024px) {
  .cart-cart__wrapper {
    grid-template-columns: repeat(var(--grid-3-columns), 1fr);
    grid-column-gap: var(--grid-3-gutters);
    margin: 0 var(--grid-3-margins);
  }

  .cart-cart__heading {
    padding: var(--spacing-medium) 0 0 0;
  }

  .cart-cart__content {
    padding: 0px;
  }

  .cart-cart__heading,
  .cart-cart__content {
    grid-column: 1 / span 8;
  }

  .cart-cart__price-summary {
    grid-row: 1 / span 3;
    grid-column: 9 / span 4;
    padding: var(--spacing-medium);
    height: min-content;
  }

  .cart-cart__heading--full-width,
  .cart-cart__content--empty,
  .cart-cart__content--full-width {
    grid-column: 1 / span 12;
  }
}

/* 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) { } */

empty-cart.css

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

.cart-empty-cart {
  container-type: inline-size;
  container-name: cart;
}

.cart-empty-cart__wrapper .dropin-card--secondary {
  display: grid;
  grid-auto-rows: min-content;
  justify-content: center;
  text-align: center;
}

@container cart (width < 737px) {
  .cart-empty-cart__wrapper .dropin-card {
    border: unset;
    border-style: hidden;
  }
}

/* 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) { } */

mini-cart.css

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

.cart-mini-cart {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--spacing-small) var(--spacing-small) var(--spacing-medium);
  box-sizing: border-box;
}

.cart-mini-cart__empty-cart {
  width: 100%;
  max-width: 800px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
}

.cart-mini-cart__heading {
  display: grid;
  row-gap: var(--spacing-xsmall);
  font: var(--type-headline-2-default-font);
  letter-spacing: var(--type-headline-2-default-letter-spacing);
}

.cart-mini-cart__heading-divider {
  width: 100%;
  margin: var(--spacing-xxsmall) 0 0 0;
}

.cart-mini-cart__products {
  flex: 1;
  overflow-y: auto;
  max-height: 100%;
  padding-top: var(--spacing-medium);
  padding-bottom: var(--spacing-medium);
}

.cart-mini-cart__products .dropin-cart-item__configurations li {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cart-mini-cart__footer {
  display: grid;
  grid-auto-flow: row;
  gap: var(--spacing-small);
  padding-top: var(--spacing-small);
  row-gap: var(--spacing-xsmall);
}

.cart-mini-cart__footer__estimated-total {
  font: var(--type-body-1-emphasized-font);
  letter-spacing: var(--type-body-1-emphasized-letter-spacing);
  display: grid;
  grid-template: max-content / 1fr auto;
  gap: var(--spacing-xsmall);
}

.cart-mini-cart__footer__estimated-total-excluding-taxes {
  font: var(--type-body-2-default-font);
  letter-spacing: var(--type-body-2-default-letter-spacing);
  display: grid;
  grid-template: max-content / 1fr auto;
  gap: var(--spacing-xsmall);
  color: var(--color-neutral-700);
}

.cart-mini-cart__footer__ctas {
  display: grid;
  grid-auto-flow: row;
  gap: var(--spacing-xsmall);
  padding-top: var(--spacing-small);
}

/* 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) { } */

Summary

You can customize the cart by overriding the CSS classes provided for each component. Create a CSS file for each component to make it easier to maintain and update your cart CSS. Use the BEM naming convention and your browser’s dev tools to identify and copy the class to your corresponding component CSS file and override it as needed. Happy styling! 🎨