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 & Colors 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 & Colors 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 |
---|---|---|
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 | |
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 | |
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) | |
‘View All’ link | Changes the color of the View all link | |
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 |
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 & Colors 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 > Colors 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 > Colors 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 | ||
Titles | Changes:
| |
Descriptions | Changes the text color of product descriptions | |
Product prices | Changes the color of 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 > Colors 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.