Note If you use Searchanise in a Wix store, you should look for the appropriate instructions here.
You can change colors for some elements of a widget's template in the Searchanise (Smart Search & Filter) control panel > Instant search widget section > Colors tab.
Important info
- The Classic template is out-of-date. You can see it in the settings only if it is set up at the moment.
- The Single Column, Multi Column templates are templates with new design.
If you don't like the color changes, you can always reset colors to the default values.
ON THIS PAGE YOU'LL FIND
Changing colors
To change colors, follow these steps:
- Go to the Searchanise control panel > Instant search widget section > Colors tab.
- Enter a hex color in a Color palette field or use a color-picker next to the necessary element.
- Type a search term in the preview area to check out how it will look.
- Apply the changes.
Color palette description
The examples below show color highlights in red-pink for the widget elements that match a particular color option.
| Color option | Description | Example |
|---|---|---|
| Main background | Changes the background color of the whole drop-down widget |  |
| Hover background | Changes the background color of a product or a suggestion on hover |  |
| Border | Changes the border color of the widget It is used in the "Classic" template and the "Classic" style only |  |
| Items separator | Changes the separator color It is used in the "Classic" template only |  |
| Suggestion text | Changes the text color of suggestions In the "Classic" template and the "Classic" style, it is also used for the text color of the search result product description |  |
| Item title | Changes the text color of product titles in the drop-down widget |  |
| Item description | Changes the text color of product descriptions in the widget It is used in the "Classic" template and the "Classic" style only |  |
| Price color | Changes the color of product prices |  |
| List price color | Changes the text color of retail product prices (before the discount) It is used only when the discount label isn't enabled (Product labels tab > Discount label part > Show label option) |  |
| Hover text color | Changes the text color of a product or a suggestion on hover It is used in the "Classic" template and the "Classic" style only |  |
| 'View All' link | Changes the text color of the View all link It is not used in the new "Single Column", "Multi Column" templates |  |
| 'View All' text | Changes the text color of the View all button It is not used in the new "Single Column", "Multi Column" templates |  |
| 'View All' background | Changes the background color of the View all button It is used in the new "Single Column", "Multi Column" templates only |  |
| Recent searches | Changes the text color of the suggestions showing the queries that a customer has searched for recently It is used when the "Show recent customer searches" option is enabled (Content tab > Pro features part) |  |
| SKU color | Changes the color of product SKUs It is used when the Show SKU option is enabled (Content tab > Products part) |  |
| Label color | Changes the text color of labels of the search results groups It is not used in the "Classic" template and the "Classic" style |  |
| "See all" text | Changes the text color of the See all products button (it appears when no search results) It is used in the new templates only |  |
| "See all" background | Changes the background color of the See all products button (it appears when no search results) It is used in the new "Single Column", "Multi Column" templates only |  |
Resetting colors
To reset colors to the default values, follow these steps:
- Go to the Searchanise control panel > Instant search widget section > Colors tab.
- Click the Reset colors button. All color palettes of the current template style will be changed to default values.
- Apply the changes.