Styling Drop-In Components

Customize drop-in components using the design token system and CSS classes from the boilerplate. This guide covers the universal styling approach used across all drop-ins.

Drop-in-specific styles

Each drop-in has a dedicated styles page with practical customization examples. See the individual drop-in documentation:

• Cart styles
• Checkout styles
• Order styles
• Payment Services styles
• Personalization styles
• Product Details styles
• Product Discovery styles
• Recommendations styles
• User Account styles
• User Auth styles
• Wishlist styles

Where to add custom styles

Add your custom CSS in the appropriate location based on the scope of your changes:

Global styles and design token overrides

• Edit styles/styles.css to override design tokens or add site-wide styles
• These styles load immediately and affect all drop-ins

Block-specific styles

• Add styles to blocks/{block-name}/{block-name}.css
• For example: blocks/product-details/product-details.css
• These styles load only when the block is used
• See all available blocks in the boilerplate

Deferred global styles

• Add to styles/lazy-styles.css for non-critical styles that can load after page render
• Improves initial page load performance

Design tokens

The drop-in components use CSS custom properties (design tokens) defined in the styles/styles.css file from the boilerplate. These tokens ensure consistent styling across all drop-ins and make global theme changes easy to apply.

Override design tokens

Change the appearance of all drop-ins by overriding design tokens in your custom CSS:

:root {
  /* Brand colors */
  --color-brand-500: #0066cc;
  --color-brand-600: #0052a3;
  --color-brand-700: #003d7a;

  /* Typography */
  --type-base-font-family: 'Inter', system-ui, sans-serif;

  /* Spacing */
  --spacing-small: 12px;
  --spacing-medium: 20px;
}

Finding CSS classes

Use the browser DevTools to find specific class names for your customizations:

Inspect the UI of any drop-in component using your browser developer tools:

Find CSS classes to override.

1. Inspect the element you want to customize (right-click the element and select “Inspect” from the menu).
2. Identify the CSS class(es) for the element. We use BEM naming, which makes components and their elements easy to identify. For example, .pdp-product__title indicates the title element of the product component.
3. Copy the CSS class to your CSS file to override existing rules or add new rules. If the class uses design tokens (like var(--spacing-small)), override the token value instead of removing it. This keeps your customizations consistent with the design system.

Examples

These examples show common component customization patterns:

/* Adjust layout for a specific component */
.pdp-product__options {
  grid-column: 1 / span 3;
}

.pdp-product__quantity {
  grid-column: 1 / span 3;
}

/* Modify spacing using design tokens */
.pdp-product__buttons {
  gap: var(--spacing-small);
}

Responsive breakpoints

Drop-in components use these breakpoints:

• Mobile: up to 767px
• Tablet: 768px - 1023px
• Desktop: 1024px and up

Use a mobile-first approach when you add responsive styles:

/* Mobile styles (default) */
.my-component {
  padding: var(--spacing-small);
}

/* Desktop styles */
@media (min-width: 1024px) {
  .my-component {
    padding: var(--spacing-big);
  }
}

Design tokens reference

The following sections show all available design tokens with their default values for reference when customizing your storefront.

Colors

Color tokens define the palette for branding, UI elements, semantic states, and interactive components.

Brand Colors

--color-brand-300 #6d6d6d

--color-brand-500 #454545

--color-brand-600 #383838

--color-brand-700 #2b2b2b

Neutral Colors

--color-neutral-50 #fff

--color-neutral-100 #fafafa

--color-neutral-200 #f5f5f5

--color-neutral-300 #e8e8e8

--color-neutral-400 #d6d6d6

--color-neutral-500 #b8b8b8

--color-neutral-600 #8f8f8f

--color-neutral-700 #666

--color-neutral-800 #3d3d3d

--color-neutral-900 #292929

Semantic Colors

--color-positive-200 #eff5ef

--color-positive-500 #7fb078

--color-positive-800 #53824c

--color-informational-200 #eeeffb

--color-informational-500 #6978d9

--color-informational-800 #5d6dd6

--color-warning-200 #fdf3e9

--color-warning-500 #e79f5c

--color-warning-800 #cc7a2e

--color-alert-200 #ffebeb

--color-alert-500 #db7070

--color-alert-800 #c35050

Button Colors

--color-button-active var(--color-brand-700)

--color-button-focus var(--color-neutral-400)

--color-button-hover var(--color-brand-600)

--color-action-button-active var(--color-neutral-50)

--color-action-button-hover var(--color-neutral-300)

Opacity

--color-opacity-16 rgb(255 255 255 / 16%)

--color-opacity-24 rgb(255 255 255 / 24%)

Spacing

Spacing tokens provide consistent padding, margins, and gaps across all components.

--spacing-xxsmall: 4px
--spacing-xsmall: 8px
--spacing-small: 16px
--spacing-medium: 24px
--spacing-big: 32px
--spacing-xbig: 40px
--spacing-xxbig: 48px
--spacing-large: 64px
--spacing-xlarge: 72px
--spacing-xxlarge: 96px
--spacing-huge: 120px
--spacing-xhuge: 144px
--spacing-xxhuge: 192px

Typography

Typography tokens define font families, sizes, weights, line heights, and letter spacing for text elements.

Font Families

--type-base-font-family: adobe-clean, roboto, roboto-fallback, system-ui, sans-serif
--type-fixed-font-family: adobe-clean, "Roboto Mono", menlo, consolas, "Liberation Mono", monospace, system-ui, sans-serif

Type Scales

--type-display-1-font: normal normal 300 6rem/7.2rem var(--type-base-font-family)
--type-display-1-letter-spacing: 0.04em
--type-display-2-font: normal normal 300 4.8rem/5.6rem var(--type-base-font-family)
--type-display-2-letter-spacing: 0.04em
--type-display-3-font: normal normal 300 3.4rem/4rem var(--type-base-font-family)
--type-display-3-letter-spacing: 0.04em
--type-headline-1-font: normal normal 400 2.4rem/3.2rem var(--type-base-font-family)
--type-headline-1-letter-spacing: 0.04em
--type-headline-2-default-font: normal normal 300 2rem/2.4rem var(--type-base-font-family)
--type-headline-2-default-letter-spacing: 0.04em
--type-headline-2-strong-font: normal normal 700 2rem/2.4rem var(--type-base-font-family)
--type-headline-2-strong-letter-spacing: 0.04em
--type-body-1-default-font: normal normal 300 1.6rem/2.4rem var(--type-base-font-family)
--type-body-1-default-letter-spacing: 0.04em
--type-body-1-strong-font: normal normal 700 1.6rem/2.4rem var(--type-base-font-family)
--type-body-1-strong-letter-spacing: 0.04em
--type-body-1-emphasized-font: normal normal 700 1.6rem/2.4rem var(--type-base-font-family)
--type-body-1-emphasized-letter-spacing: 0.04em
--type-body-2-default-font: normal normal 300 1.4rem/2rem var(--type-base-font-family)
--type-body-2-default-letter-spacing: 0.04em
--type-body-2-strong-font: normal normal 700 1.4rem/2rem var(--type-base-font-family)
--type-body-2-strong-letter-spacing: 0.04em
--type-body-2-emphasized-font: normal normal 700 1.4rem/2rem var(--type-base-font-family)
--type-body-2-emphasized-letter-spacing: 0.04em
--type-button-1-font: normal normal 400 2rem/2.6rem var(--type-base-font-family)
--type-button-1-letter-spacing: 0.08em
--type-button-2-font: normal normal 400 1.6rem/2.4rem var(--type-base-font-family)
--type-button-2-letter-spacing: 0.08em
--type-details-caption-1-font: normal normal 400 1.2rem/1.6rem var(--type-base-font-family)
--type-details-caption-1-letter-spacing: 0.08em
--type-details-caption-2-font: normal normal 300 1.2rem/1.6rem var(--type-base-font-family)
--type-details-caption-2-letter-spacing: 0.08em
--type-details-overline-font: normal normal 400 1.2rem/2rem var(--type-base-font-family)
--type-details-overline-letter-spacing: 0.16em

Shapes & Borders

Shape tokens control the visual appearance of borders, shadows, and icon strokes.

Border Radius

--shape-border-radius-1: 3px
--shape-border-radius-2: 8px
--shape-border-radius-3: 24px

Border Width

--shape-border-width-1: 1px
--shape-border-width-2: 1.5px
--shape-border-width-3: 2px
--shape-border-width-4: 4px

Shadows

--shape-shadow-1: 0 0 16px 0 rgb(0 0 0 / 16%)
--shape-shadow-2: 0 2px 16px 0 rgb(0 0 0 / 16%)
--shape-shadow-3: 0 2px 3px 0 rgb(0 0 0 / 16%)

Icon Stroke

--shape-icon-stroke-1: 1px
--shape-icon-stroke-2: 1.5px
--shape-icon-stroke-3: 2px
--shape-icon-stroke-4: 4px

Grid System

--grid-1-columns: 4
--grid-1-margins: 0
--grid-1-gutters: 16px
--grid-2-columns: 12
--grid-2-margins: 0
--grid-2-gutters: 16px
--grid-3-columns: 12
--grid-3-margins: 0
--grid-3-gutters: 24px
--grid-4-columns: 12
--grid-4-margins: 0
--grid-4-gutters: 24px
--grid-5-columns: 12
--grid-5-margins: 0
--grid-5-gutters: 24px

Advanced customization

Inspect CSS variables in use

Use the browser DevTools to discover which CSS variables (design tokens) a component is using:

1. Right-click on any element and select “Inspect”
2. In the Styles panel, look for properties using var() syntax
3. Click the variable name (e.g., var(--spacing-medium)) to see its computed value
4. In the Computed tab, filter by “spacing”, “color”, etc. to see all applied tokens

Example: Inspecting a button might show

padding: var(--spacing-small);    /* Resolves to: 16px */
background: var(--color-brand-500); /* Resolves to: #454545 */

How tokens flow through components

Design tokens control the visual appearance of components by mapping to specific CSS properties. Understanding this flow helps you predict what changes when you override a token.

The flow:

1. A design token is defined in the boilerplate: --spacing-small: 16px
2. A component uses it in a CSS property: gap: var(--spacing-small);
3. The browser resolves it to the actual value: gap: 16px
4. The visual effect appears: 16px of spacing between grid items

Real-world example: Cart grid spacing

The grid component for the Cart drop-in uses --spacing-small to control the gap between product images:

.cart-cart-summary-grid__content {
  display: grid;
  gap: var(--spacing-small);  /* Controls spacing between rows and columns */
  grid-template-columns: repeat(6, 1fr);
}

┌─────────┐ ←──16px──→ ┌─────────┐ ←──16px──→ ┌─────────┐
│ Product │            │ Product │            │ Product │
│  Image  │            │  Image  │            │  Image  │
└─────────┘            └─────────┘            └─────────┘
     ↓                      ↓                      ↓
   16px                   16px                   16px
     ↓                      ↓                      ↓
┌─────────┐            ┌─────────┐            ┌─────────┐
│ Product │            │ Product │            │ Product │
│  Image  │            │  Image  │            │  Image  │
└─────────┘            └─────────┘            └─────────┘
     ↓                      ↓                      ↓
   16px                   16px                   16px
     ↓                      ↓                      ↓
┌─────────┐            ┌─────────┐            ┌─────────┐
│ Product │            │ Product │            │ Product │
│  Image  │            │  Image  │            │  Image  │
└─────────┘            └─────────┘            └─────────┘

gap: var(--spacing-small) = 16px

The gap property controls spacing between grid items in both directions.

When you override --spacing-small, you directly change how tightly or loosely the product images are packed together. A smaller value (8px) creates a denser grid, while a larger value (24px) creates more breathing room.

Common token-to-property mappings

• --spacing-* tokens → gap, padding, margin properties → Controls whitespace
• --color-* tokens → background, color, border-color properties → Controls visual identity
• --shape-border-radius-* tokens → border-radius property → Controls corner roundness
• --type-* tokens → font, font-size, line-height properties → Controls typography

Scoped token overrides

Override design tokens for specific components only, rather than globally:

/* Global override - affects all drop-ins */
:root {
  --spacing-small: 12px;
}

/* Scoped override - only affects Cart drop-in */
.cart-cart-summary-grid {
  --spacing-small: 16px;
  /* This component now uses 16px, others still use the global value */
}

/* Scoped to a specific element state */
.dropin-button:hover {
  --color-brand-500: #0066cc;
  background: var(--color-brand-500); /* Uses the hover value */
}