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.
The following selectors give a general hint in how to style product placements in the Smart Suggest.
.fl-autocomplete li.ui-menu-item[data-fl-product-placement] { /* Styles here.. */ }
.fl-autocomplete li.ui-menu-item[data-fl-product-placement] a div { /* Styles here.. */ }
.fl-autocomplete li.ui-menu-item[data-fl-product-placement="New shoe"] a div { /* Styles here.. */ }
.fl-autocomplete li.ui-menu-item[data-fl-product-placement="New"] a div::after { /* Styles here.. */ }
The following examples will show the code and the result in a live shop visually.
.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 */ }
/* 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.