Instant Search Widget
You can change colors for some elements of a widget’s template in the Searchanise control panel > Search & Navigation > Instant search widget section > Template & Style tab.
If you don’t like the color changes, you can always reset colors to the default values.
Changing colors
To change colors, follow these steps:
- Go to the Searchanise control panel > Search & Navigation > Instant search widget section > Template & Style tab.
- Enter a hex color in a Color palette field or use a color picker next to the necessary element.
- 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 |
|---|---|---|
| General colors | ||
| 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 |  |
| Suggestion text | Changes the text color of suggestions |  |
| Section text | Changes the text color of labels of the search results groups |  |
| 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) |  |
| ‘View All’ link | Changes the color of the View all link |  |
| Product card colors | ||
| Title | Changes the text color of product titles in the drop-down widget |  |
| Description | Changes the text color of product descriptions in the widget |  |
| Price | Changes the color of product prices |  |
| Crossed-out original price | 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) | |
| Sale price | Changes the text color for discounted product prices |  |
| SKU | Changes the color of product SKUs It is used when the Show SKU option is enabled (Content tab > Products part) |  |
Resetting colors
To reset colors to the default values, follow these steps:
- Go to the Searchanise control panel > Search & Navigation > Instant search widget section > Template & Style tab.
- Click the Reset colors button under the chosen template. All color palettes of the current template will be changed to default values.
- Apply the changes.
Search Results Widget
You can change colors for some widget elements in the Searchanise control panel > Search & Navigation > Search results widget section > Style tab.
If you don’t like the color changes, you can always reset colors to the default values.
Changing colors
To change colors, follow these steps:
- Go to the Searchanise control panel > Search & Navigation > Search results widget section > Style tab.
- Enter a hex color in any Color palette field or use a color picker next to the necessary element.
- 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 |
|---|---|---|
| Product Card | ||
| Title | Changes:
|  |
| Description | Changes the text color of product descriptions |  |
| Product price | Changes the color of product prices |  |
| Crossed-out original price | Changes the text color of retail product prices (before the discount) |  |
| Sale price | Changes the text color for discounted product prices |  |
| SKU | Changes the text color of product SKUs It is used when the Show SKU option is enabled (Content tab > Products part) |  |
| Button text | Changes the text color of buttons on products |  |
| CTA button background | Changes the background color of buttons on products |   |
| Filters | ||
| Filter titles | Changes the text color of filter titles |  |
| Filter values | Changes the text color of filter values |  |
| Price range filter | ||
| Placeholders | Changes the text color of the price range slider fields |  |
| “Show products” button (mobile) | ||
| Background | Changes the background color of the DONE button of the mobile filter panel |  |
| Text | Changes the text color of the DONE button of the mobile filter panel |  |
| “Reset filters” button (mobile) | ||
| “Reset filters” color | Changes the background color of the CLEAR ALL button of the mobile filter panel |  |
| “Reset filters” text | Changes the text color of the CLEAR ALL button of the mobile filter panel |  |
Resetting colors
To reset colors to the default values, follow these steps:
- Go to the Searchanise control panel > Search & Navigation > Search results widget section > Style tab.
- Click the Reset colors button. All color palettes of the current template will be changed to default values.
- Apply the changes.
We’d appreciate it if you could take some time to leave a review.
