Skip to content
Adobe Commerce Storefront

Recommendations styles

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

Customization example

Add this to the CSS file of the specific commerce block where you’re using the Recommendations drop-in.

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

.recommendations-product-list {
  gap: var(--spacing-size-6);
  padding-bottom: var(--spacing-size-8);
  font-weight: 400;
  gap: var(--spacing-size-6);
  padding-bottom: var(--spacing-size-8);
  font-weight: 400;
}

Container classes

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

/* ProductList */
.dropin-button--primary {}
.dropin-price--default {}
.dropin-product-item-card {}
.dropin-product-item-card__price {}
.dropin-product-item-card__sku {}
.recommendations-carousel__content {}
.recommendations-product-list {}
.recommendations-product-list--empty {}
.recommendations-product-list__heading {}