Product Discovery styles

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

Styling drop-in components describes how to inspect the drop-in component in your browser’s developer tools to discover the BEM class names to be extended.

Example CSS overrides

Here’s an example of overriding the CSS classes for the DROPIN_NAME drop-in component:

.product-discovery-product-list__grid {
  grid-template-columns: repeat(4, 1fr);
}

Product Discovery CSS classes

The CSS classes for each Product Discovery Component are provided here.

ProductList.css

.product-discovery-product-list {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.product-discovery-product-list__container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.product-discovery-product-list__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-small);
}

/* Normalize ProductItemCard */
.product-discovery-product-list__grid .dropin-product-item-card {
    margin: unset;
    width: 100%;
}

.product-discovery-product-list__grid .dropin-product-item-card img,
.product-discovery-product-list__grid .dropin-product-item-card__skeleton__image {
    aspect-ratio: var(--imageWidth) / var(--imageHeight);
    max-height: unset;
    height: unset;
}

@container (min-width: 600px) {
    .product-discovery-product-list__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@container (min-width: 900px) {
    .product-discovery-product-list__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@container (min-width: 1200px) {
    .product-discovery-product-list__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

FacetList.css

.product-discovery-facet-list {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.product-discovery-facet-list__selected-filters {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: var(--spacing-xxsmall);
    padding: 0 0 var(--spacing-xxsmall) 0;
}

.product-discovery-facet-list__selected-filters button {
    padding: 0 var(--spacing-xxsmall);
    margin: 0 var(--spacing-xxsmall);
    border-radius: var(--shape-border-radius-2);
}

.product-discovery-facet-list__selected-filters .dropin-price-range .dropin-price--small.dropin-price--bold {
    font: var(--type-button-2-font);
}

.product-discovery-facet-list__facet-options {
    text-align: left;
}

.product-discovery-facet-list__facet-options button {
    padding: 0 0 0 0;
}

.product-discovery-facet-list__facet-options .dropin-radio-button {
    padding: var(--spacing-xxsmall) 0;
}

.product-discovery-facet-list__facet-options--hidden {
    display: none;
}

.product-discovery-facet-list .dropin-divider {
    margin: var(--spacing-xsmall) 0 var(--spacing-xsmall) 0;
}

Facet.css

.product-discovery-facet {
    padding-block: var(--spacing-small);
}

.product-discovery-facet:not(.product-discovery-facet--last) {
    border-bottom: 1px solid var(--color-neutral-400);
}

.product-discovery-facet__header {
    display: block;
    margin-block-end: var(--spacing-xsmall);
}

.product-discovery-facet__bucket .dropin-price-range .dropin-price--small.dropin-price--bold {
    font: var(--type-body-2-default-font);
}

.product-discovery-facet__bucket .dropin-radio-button__label:before {
    margin-right: var(--spacing-xsmall);
}

AlertMessage.css

.product-discovery-search-alert-message__wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-height: 300px;
}

.product-discovery-search-alert-message__content {
    display: flex;
    justify-content: center;
}