Skip to content
Adobe Commerce Storefront

Wishlist styles

Customize the Wishlist drop-in using CSS classes and design tokens. This page covers the Wishlist-specific container classes and customization examples. For comprehensive information about design tokens, responsive breakpoints, and styling best practices, see Styling Drop-In Components.

Version: 2.0.1

Customization example

Add this to blocks/commerce-wishlist/commerce-wishlist.css to customize the Wishlist drop-in.

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

.wishlist-login__sign-in {
  color: var(--color-neutral-800);
  font: var(--type-body-1-default-font);
  letter-spacing: var(--type-body-2-default-letter-spacing);
  color: var(--color-brand-800);
  font: var(--type-body-1-default-font);
  letter-spacing: var(--type-body-2-default-letter-spacing);
}

Container classes

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

/* EmptyWishlist */
.dropin-card {}
.dropin-card--secondary {}
.dropin-illustrated-message__heading {}
.dropin-illustrated-message__message {}
.wishlist-empty-wishlist {}
.wishlist-empty-wishlist__wrapper {}


/* ImageCarousel */
.image-carousel {}
.image-carousel-image {}
.image-switcher {}
.image-switcher-active {}
.image-switcher-area {}
.image-switcher-inactive {}


/* Login */
.wishlist-login__link {}
.wishlist-login__sign-in {}


/* ProductItem */
.strikethrough {}
.wishlist-product-item {}
.wishlist-product-item-button__remove {}
.wishlist-product-item-discounted-price {}
.wishlist-product-item-image {}
.wishlist-product-item-move-to-cart {}
.wishlist-product-item-name {}
.wishlist-product-item-option__attribute {}
.wishlist-product-item-option__label {}
.wishlist-product-item-options {}
.wishlist-product-item-price {}
.wishlist-product-item-tax {}
.wishlist-product-item__content {}
.wishlist-product-item__title {}


/* Wishlist */
.dropin-skeleton {}
.dropin-skeleton-row {}
.wishlist-wishlist {}
.wishlist-wishlist__content {}
.wishlist-wishlist__content--empty {}
.wishlist-wishlist__heading {}
.wishlist-wishlist__heading-count {}
.wishlist-wishlist__heading-text {}