Product Recommendations styles
The CSS classes for each UI component that provides the recommendations drop-in component with its UI are provided here. Override these classes and add new classes to customize the look and feel of your recommendations to match your specific style requirements.
Customizing your recommendations styles
The quickest way to override the recommendations CSS is to inspect the recommendation UI from your browser’s developer tools.
- 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
Recommendations
component, so use yourrecommendations.css
file. - Copy the CSS class to your
recommendations.css
file to override the existing rules or add new rules to the class. But wait! Look closely 🧐 at the.dropin-product-item-card__title
class. It’s using design token. 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 CSS overrides
Here’s an example of adding CSS class overrides to your recommendations.css
file:
.dropin-product-item-card__title { font: var(--type-body-1-strong-font); letter-spacing: var(--type-body-1-strong-letter-spacing);}
.dropin-product-item-card__sku, .dropin-product-item-card__price { font: var(--type-body-1-default-font);}
.dropin-product-item-card__action { margin-top: var(--spacing-xsmall); width: 100%;}
Recommendations component CSS
The CSS classes for recommendations component is provided here.
recommendations.css
.recommendations-product-list { display: flex; flex-direction: column; gap: var(--spacing-size-6); padding-bottom: var(--spacing-size-8); font-weight: 400;}
/* Heading */.recommendations-product-list__heading { font: var(--type-headline-1-font); letter-spacing: var(--type-headline-1-letter-spacing); color: var(--color-neutral-800); padding: var(--spacing-medium) 0 var(--spacing-small) 0;}
/* Horizontal scrollable product row */.recommendations-product-list__content { display: flex; flex-direction: row; overflow-x: auto; gap: var(--spacing-size-6); scroll-snap-type: x mandatory; padding-bottom: var(--spacing-size-8);}
.recommendations-product-list__content>* { scroll-snap-align: start; flex: 0 0 auto; min-width: 220px;}
/* Scrollbar styling */.recommendations-product-list__content::-webkit-scrollbar { height: 6px;}
.recommendations-product-list__content::-webkit-scrollbar-thumb { background-color: var(--color-border-subtle);}
/* Item card styles */.recommendations-product-list .dropin-product-item-card { border: none;}
/* Typography consistency for SKU and Price */.dropin-product-item-card__sku,.dropin-product-item-card__price .dropin-price--default { font-size: var(--font-size-base); font-weight: var(--font-weight-regular); line-height: var(--line-height-base); color: var(--color-neutral-700); letter-spacing: var(--letter-spacing-tight);}
/* Hover link style */.recommendations-product-list a:hover { text-decoration: none; color: var(--color-brand-500); font-weight: 500;}
/* Medium (portrait tablets and large phones, 768px and up) *//* @media only screen and (min-width: 768px) { } */
/* Large (landscape tablets, 1024px and up) *//* @media only screen and (min-width: 1024px) { } */
/* XLarge (laptops/desktops, 1366px and up) *//* @media only screen and (min-width: 1366px) { } */
/* XXlarge (large laptops and desktops, 1920px and up) *//* @media only screen and (min-width: 1920px) { } */
Summary
You can customize the recommendations by overriding the CSS classes provided for component. Create a CSS file for each component to make it easier to maintain and update your recommendations CSS. Use the BEM naming convention and your browser’s dev tools to identify and copy the class to your corresponding component CSS file and override it as needed. Happy styling! 🎨