Personalization styles

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

Customization example

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

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

1
/* Target Personalization containers */
2
.personalization-container {
3
  /* Use the browser DevTools to find the specific classes you need */
4
}

Container classes

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