Drop-in components

Styling drop-in components

Overriding and adding CSS classes for drop-in components provides the next level of customizing your storefront drop-in components. By modifying a drop-in component’s built-in CSS classes and adding additional classes, you can quickly change the built-in classes to meet your specifications. You’ll find best-practices for styling here.

The CSS classes for each UI component that provides the product details drop-in component with its UI are provided here. Override these classes and add new classes to customize the look and feel of your PDP drop-in component to match your specific style requirements.

Drop-in components contain several components that provide its UI. If you plan to make several CSS changes to the drop-in component, we suggest creating individual CSS files for each component in your drop-in component and import those into an aggregate drop-in.css file as shown below. This practice makes it easier to maintain and update your CSS as your changes accumulate.

This example shows how to import several CSS files into a single drop-in.css file:

@import 'carousel.css';
@import 'gallery-grid.css';
@import 'overlay.css';
@import 'price-range.css';
@import 'product.css';
@import 'swatches.css';

Step-by-step

The quickest way to override the CSS classes used in the drop-in component is to inspect the drop-in component’s UI from your browser’s developer tools. The following example shows a product details component with the classes applied to the UI components that compose the drop-in:

Find CSS classes to override

Find CSS classes to override.

Inspect the element in the UI that you want to customize (right-click on the element and select “Inspect” from the menu).
Identify the CSS class(es) for the element. We use BEM naming, which makes it easy to know which component you’re changing (and which CSS file to use). This class styles the Product component, so use your product.css file.
Copy the CSS class to your product.css file to override the existing rules or add new rules to the class. But wait! Look closely 🧐 at the .pdp-product__title class. It’s using two design tokens. And when you see a design token within a CSS rule, don’t remove the token. Instead, change the token’s value (where it’s defined) OR create a new token along-side this existing one to ensure maintenance and updates continue to benefit from global design token usage.

Example overrides

Here’s an example of adding CSS class overrides to your product.css file:

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

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

.pdp-product__buttons {
  grid-gap: 0.5rem;
}