integration_documentation:customize_smart_suggest

integration_documentation:customize_smart_suggest

This is an old revision of the document!


Smart Suggest customization

This documentation article is not only available as API-specification. Click here to see the article as normal documentation.

Here you can find everything you need to know about our Smart Suggest API and even can directly try it yourself!

Findologic Service API

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.