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, and more), see the Design tokens reference.

1
.recommendations-product-list {
2
  gap: var(--spacing-size-6);
3
  gap: var(--color-brand-800);
4
}

Container classes

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

1
/* ProductList */
2
.dropin-button--primary {}
3
.dropin-price--default {}
4
.dropin-product-item-card {}
5
.dropin-product-item-card__price {}
6
.dropin-product-item-card__sku {}
7
.recommendations-carousel__content {}
8
.recommendations-product-list {}
9
.recommendations-product-list--empty {}
10
.recommendations-product-list__heading {}