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.

The drop-in component contains multiple components that provide its UI. If you plan to make several CSS changes to the drop-in, we suggest creating CSS files for each drop-in component and importing those into a custom product-discovery.css file as shown below. This practice makes it easier to maintain and update your CSS in the future.

@import 'search-bar-results.css';
@import 'product-list.css';
@import 'facet-list.css';

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-results-info {
  font: var(--type-headline-2-font);
  letter-spacing: var(--type-headline-2-letter-spacing);
}

.product-discovery--search-bar-results__grid {
    margin-bottom: var(--spacing-small);
}

.product-discovery-facet-list__selected-filters {
    row-gap: var(--spacing-small);
}

Product Discovery CSS classes

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

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__show-filters-button {
    display: flex;
    margin: 0 0 var(--spacing-xsmall) 0;
}

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

/* Medium (portrait tablets and large phones, 768px and up) */
@media only screen and (min-width: 768px) {
    .product-discovery-facet-list {
        min-width: 13.12rem;
    }

    .product-discovery-facet-list__facet-options {
        display: flex;
        flex-direction: column;
    }

    .product-discovery-facet-list__show-filters-button {
        display: none;
    }
}

/* 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) { } */

Facet.css

.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);
}

ProductItem.css

.product-discovery--product-item {
    display: flex;
    flex-flow: column nowrap;
    gap: var(--spacing-small);
    width: auto;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    font-weight: var(--font-weight-regular, 600);
}

.product-discovery--product-item:hover,
.product-discovery--product-item:focus {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    text-decoration: none;
}

.product-discovery--product-item__image .dropin-image {
    width: 10rem;
    height: 10rem;
    max-width: 10rem;
    max-height: 10rem;
    object-fit: cover;
    border-radius: var(--shape-border-radius-2, 4px);
}

.product-discovery--product-item__details {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    width: 100%;
}

.product-discovery--product-item__details [data-slot='ProductPrice'] {
    text-align: start;
}

ProductList.css

.product-discovery-product-list {
    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 1fr;
    margin-top: var(--spacing-small);
}

.product-discovery-product-list__grid .dropin-product-item-card {
    text-align: left;
    border: 1px solid transparent;
    width: 200px;
}

.product-discovery-product-list__grid .dropin-product-item-card:hover {
    border: 1px solid var(--color-neutral-400);
    box-shadow: 0px 0px var(--spacing-xsmall) 0px darkgrey;
    padding: none;
}

.product-discovery-product-list__grid .dropin-product-item-card a:hover {
    text-decoration: none;
    color: var(--color-neutral-800);
}

.product-discovery-product-list__header {
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
}

.product-discovery-product-list__picker {
    width: 15.625rem;
    display: inline-block;
}

.product-discovery-product-item__image {
    min-height: 250px;
}

/* Medium (portrait tablets and large phones, 768px and up) */
@media only screen and (min-width: 768px) {
    .product-discovery-product-list__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* XLarge (laptops/desktops, 1366px and up) */
@media only screen and (min-width: 1366px) {
    .product-discovery-product-list__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

ResultsInfo.css

.product-discovery-results-info {
    display: none;
}

.product-discovery-results-info__search-phrase--upercase {
    text-transform: capitalize;
}

/* Medium (portrait tablets and large phones, 768px and up) */
@media only screen and (min-width: 768px) {
    .product-discovery-results-info {
        display: flex;
        flex-direction: row;
        gap: var(--spacing-xsmall);
        width: 100%;
        padding: var(--spacing-xsmall);
        text-align: center;
    }
}

SearchAlertMessage.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;
}

SearchBarInput.css

.product-discovery--search-bar-input__container {
    display: flex;
    align-items: center;
    width: 100%;
}

.product-discovery--search-bar-input__form {
    display: flex;
    align-items: center;
}

SearchBarResults.css

.product-discovery--search-bar-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    pointer-events: none;
}

.product-discovery--search-bar-results__popover {
    position: relative;
    background: var(--color-neutral-50, #fff);
    box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.05);
    width: 100%;
    overflow: hidden;
    z-index: 1001;
    animation: popoverSlideIn 0.2s ease-out;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.product-discovery--search-bar-results__outer-container {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-small, 1rem);
}

@keyframes popoverSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.product-discovery--search-bar-results__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-small, 1rem);
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.product-discovery--search-bar-results__grid>* {
    min-width: 0;
    overflow: hidden;
}

.product-discovery--search-bar-results__view-all-wrapper {
    flex-shrink: 0;
    border-top: 1px solid var(--color-neutral-200, #e5e5e5);
    background: var(--color-neutral-300);
}

.product-discovery--search-bar-results__view-all-button {
    display: flex;
    justify-content: center;
    width: 100%;
}

.product-discovery--search-bar-results__grid::-webkit-scrollbar {
    width: 0.5rem;
}

.product-discovery--search-bar-results__grid::-webkit-scrollbar-track {
    background: var(--color-neutral-100, #f5f5f5);
    border-radius: 0.25rem;
}

.product-discovery--search-bar-results__grid::-webkit-scrollbar-thumb {
    background: var(--color-neutral-400, #d4d4d4);
    border-radius: 0.25rem;
}

.product-discovery--search-bar-results__grid::-webkit-scrollbar-thumb:hover {
    background: var(--color-neutral-500, #a3a3a3);
}

@media only screen and (min-width: 48rem) {
    .product-discovery--search-bar-results {
        padding-top: 0.25rem;
    }

    .product-discovery--search-bar-results__popover {}

    .product-discovery--search-bar-results__grid {
        gap: var(--spacing-medium, 1.5rem);
        padding: var(--spacing-medium, 1.5rem);
    }
}

@media only screen and (min-width: 1024px) {
    .product-discovery--search-bar-results__popover {}
}