integration_documentation:customize_smart_suggest

integration_documentation:customize_smart_suggest

Smart Suggest styling

The Smart Suggest styles can be overwritten by the CSS from the shop.
Here you can find some examples for style selectors in order to style basic stuff.


Selectors

The following selectors give a general hint in how to style product placements in the Smart Suggest.

Style all product placements

.fl-autocomplete li.ui-menu-item[data-fl-product-placement] {
   /* Styles here.. */
}

Style all product placements text

.fl-autocomplete li.ui-menu-item[data-fl-product-placement] a div {
   /* Styles here.. */
}

Style a certain product placement

.fl-autocomplete li.ui-menu-item[data-fl-product-placement="New shoe"] a div {
   /* Styles here.. */
}

Add a badge to a certain product placement

.fl-autocomplete li.ui-menu-item[data-fl-product-placement="New"] a div::after {
   /* Styles here.. */
}

Live examples

The following examples will show the code and the result in a live shop visually.


All product placements should have an fading background

.fl-autocomplete li.ui-menu-item[data-fl-product-placement] {
    background: linear-gradient(to right, #ffffff, #ffc0cb); /* white to pink */
}
/* Optional hover color change for product placements */
.fl-autocomplete li.ui-menu-item[data-fl-product-placement] a.ui-state-focus {
    background-color: #ffced7; /* Light pink */
}


Give all products from the product placement "New" a badge

/* Product placement "New" */
.fl-autocomplete li.ui-menu-item[data-fl-product-placement="New"] a div.col.label::after {
   content: "New"; /* Badge name */
    float: right;
    transform: rotate(-15deg); /* Rotation */
    font-weight: 700; /* Bold text */
    line-height: 1;
    color: #fff; /* Text color white */
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
    background-color: #ff0000; /* Badge color red */
    padding: 4px;
    margin: 1em; /* Horizontal center */
}


If you need any help with stylings, please contact our technical support.