Skip to content
Adobe Commerce Storefront

Search is only available in production builds. Try building and previewing the site to test it out locally.

Wishlist styles

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

Customizing your Wishlist styles

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

Find CSS classes to override

Find CSS classes to override.
    1. Inspect the element in the UI that you want to customize (right-click on the element and select “Inspect” from the menu).
    1. 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 Wishlist component, so use your Wishlist.css file.

Example CSS overrides

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

wishlist.css
.wishlist-wishlist__heading-count {
    color: #3D3D3D;
}


.wishlist-product-item-name {
  width: 65%;
}

PDP Component CSS

The CSS classes for each PDP Component are provided here.

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


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


.wishlist-empty-wishlist__wrapper .dropin-card--secondary {
  display: grid;
  grid-auto-rows: min-content;
  justify-content: center;
  text-align: center;
  border: unset;
}


.wishlist-empty-wishlist .dropin-illustrated-message__heading {
  font: var(--type-headline-1-font);
}


.wishlist-empty-wishlist .dropin-illustrated-message__message {
  font: var(--type-body-1-default-font);
}


@container wishlist (width < 737px) {
  .wishlist-empty-wishlist__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) { } */
css ImageCarousel.css
.image-carousel {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-medium);
  padding: var(--spacing-medium);
}


.image-carousel .image-carousel-image {
  object-fit: contain;
  padding: var(--spacing-xxsmall) 0;
  width: 100%;
}


.image-switcher-area {
  margin-top: var(--spacing-small);
  text-align: center;
  width: 100%;
}


.image-switcher-area .image-switcher {
  cursor: pointer;
  border-radius: 50%;
  display: inline-flex;
  height: var(--spacing-xsmall);
  margin: 0 var(--spacing-xxsmall);
  width: var(--spacing-xsmall);
}


.image-switcher-area .image-switcher-active {
  background-color: var(--color-neutral-900);
  border: var(--shape-border-width-1) solid var(--color-brand-700);
}


.image-switcher-area .image-switcher-inactive {
  background-color: var(--color-neutral-600);
  border: var(--shape-border-width-1) solid var(--color-neutral-600);
}


/* Extra small devices (phones, 480px and down) */
@media only screen and (max-width: 480px) {
  .image-carousel {
    gap: var(--spacing-xxsmall);
  }


  .image-carousel .image-carousel-image {
    height: 250px;
  }
}


/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 480px) and (max-width: 600px) {
  .image-carousel {
    gap: var(--spacing-xsmall);
  }


  .image-carousel .image-carousel-image {
    height: 300px;
  }
}


@media only screen and (min-width: 600px) {
  .image-carousel {
    gap: var(--spacing-xsmall);
  }


  .image-carousel .image-carousel-image {
    height: 300px;
  }
}


/* Medium (portrait tablets and large phones, 768px and up) */
@media only screen and (min-width: 768px) {
  .image-carousel {
    gap: var(--spacing-small);
  }


  .image-carousel .image-carousel-image {
    height: 350px;
  }
}


/* Large (landscape tablets, 1024px and up) */
@media only screen and (min-width: 1024px) {
  .image-carousel {
    gap: var(--spacing-medium);
  }


  .image-carousel .image-carousel-image {
    height: 400px;
  }
}


/* XLarge (laptops/desktops, 1366px and up) */


/* XXlarge (large laptops and desktops, 1920px and up) */
css Login.css
/* https://cssguidelin.es/#bem-like-naming */


.wishlist-login__sign-in {
  grid-column-start: 2;
  color: var(--color-neutral-800);
  font: var(--type-body-1-default-font);
  letter-spacing: var(--type-body-2-default-letter-spacing);
  margin-top: var(--spacing-xxsmall);
  text-align: center;
}


a.wishlist-login__link {
  font: var(--type-body-1-strong-font);
  letter-spacing: var(--type-body-2-strong-letter-spacing);
  margin-left: var(--spacing-xxsmall);
  text-decoration: underline;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  color: var(--color-neutral-800);
}


a.wishlist-login__link:hover {
  color: var(--color-neutral-800);
  text-decoration: underline;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
}
css ProductItem.css
/* https://cssguidelin.es/#bem-like-naming */


.wishlist-product-item {
  background-color: var(--color-neutral-50);
  margin-bottom: var(--spacing-small)
}


.wishlist-product-item__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-small);
}


.wishlist-product-item__content .wishlist-product-item-image {
  background: var(--color-neutral-200);
  height: 100%;
  padding: 0;
  width: 100%;
}


.wishlist-product-item__content .wishlist-product-item__title {
  color: var(--color-neutral-800);
  font: var(--type-body-2-strong-font);
  letter-spacing: var(--type-body-2-strong-letter-spacing);
  margin: 0;
  position: relative;
}


.wishlist-product-item-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 85%;
}


a.wishlist-product-item-name:active,
a.wishlist-product-item-name:hover,
a.wishlist-product-item-name {
  color: var(--color-neutral-800);
  cursor: pointer;
  font: var(--type-body-2-strong-font);
  letter-spacing: var(--type-body-2-strong-letter-spacing);
}




.wishlist-product-item__content .wishlist-product-item-button__remove {
  position: absolute;
  right: 0;
  top: -10px;
}


.wishlist-product-item__content .wishlist-product-item-options {
  font: var(--type-body-2-default-font);
}


.wishlist-product-item__content .wishlist-product-item-option__attribute {
  text-transform: capitalize;
}


.wishlist-product-item__content .wishlist-product-item-option__label {
  font: var(--type-body-2-strong-font);
}


.wishlist-product-item__content .wishlist-product-item-price {
  display: inline;
  font: var(--type-body-2-default-font);
}


.strikeout {
  text-decoration: line-through;
}


.wishlist-product-item__content .wishlist-product-item-discounted-price {
  display: inline;
  margin-left: var(--spacing-xsmall);
  color: var(--color-alert-800);
}


.wishlist-product-item-move-to-cart {
  display: grid;
  grid-area: product-add-to-cart;
  justify-content: end;
}


.wishlist-product-item-tax {
  color: var(--color-neutral-500);
}


.wishlist-product-item-tax span {
  margin-right: var(--spacing-xsmall);
}
css Wishlist.css
/* https://cssguidelin.es/#bem-like-naming */


.wishlist-wishlist {
  container-type: inline-size;
  container-name: wishlist-grid;
  max-width: inherit;
}


/* Container for the wishlist grid */
.wishlist-wishlist__content {
  display: grid;
  gap: var(--spacing-medium);
  margin: auto;
  padding: var(--spacing-medium) 0;
}


/* Heading */
.wishlist-wishlist__heading {
  color: var(--color-neutral-800);
  display: grid;
  font: var(--type-headline-1-font);
  letter-spacing: var(--type-headline-1-letter-spacing);
  padding: var(--spacing-small) 0;
  row-gap: var(--spacing-xsmall);
}


.wishlist-wishlist__heading-count {
  color: #6D6D6D;
  margin-left: var(--spacing-xxsmall);
  letter-spacing: normal;
  font: var(--type-details-caption-2-font);
}


/* Empty wishlist message */
.wishlist-wishlist__content.wishlist-wishlist__content--empty {
  border: var(--shape-border-width-2) solid var(--color-neutral-400);
  border-radius: var(--shape-border-radius-2);
  grid-template-columns: repeat(1, 1fr);
  padding: var(--spacing-xxbig);
  margin: var(--spacing-xxbig) auto;
}


/* Extra small devices (phones, 480px and down) */
@media only screen and (max-width: 480px) {
  .wishlist-wishlist__content, .dropin-skeleton {
    grid-template-columns: repeat(1, 1fr);
  }
  .dropin-skeleton-row:nth-child(n+2) {
    display: none;
  }
}


@media only screen and (min-width: 480px) and (max-width: 600px) {
  .wishlist-wishlist__content, .dropin-skeleton {
    grid-template-columns: repeat(2, 1fr);
  }
  .dropin-skeleton-row:nth-child(n+3) {
    display: none;
  }
}


/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .wishlist-wishlist__content, .dropin-skeleton {
    grid-template-columns: repeat(2, 1fr);
  }
  .dropin-skeleton-row:nth-child(n+3) {
    display: none;
  }
}


/* Medium (portrait tablets and large phones, 768px and up) */
@media only screen and (min-width: 768px) {
  .wishlist-wishlist__content, .dropin-skeleton  {
    grid-template-columns: repeat(3, 1fr);
  }
  .dropin-skeleton-row:nth-child(n) {
    display: block;
  }
}


/* Large (landscape tablets, 1024px and up) */


/* XLarge (laptops/desktops, 1366px and up) */


/* XXlarge (large laptops and desktops, 1920px and up) */

Summary

You can customize the wishlist component 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 Wishlist 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! 🎨