This article is general for Shopify, BigCommerce, WooCommerce, Magento 1, Magento 2, CS-Cart. If you have a store on Wix, you can find the same article here.
You can change colors for some elements of a widget’s template in the Searchanise (Smart Search Bar & Filters) control panel > Search & Navigation > Instant search widget section > Colors tab.
- 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 a new design.
If you don’t like the color changes, you can always reset colors to the default values.
Changing colors
To change widget 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.
- 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 > 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.