How to change colors for Instant Search Widget Print

Modified on: Wed, Dec 1, 2021 at 8:44 AM


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:

  1. Go to the Searchanise control panel > Instant search widget section > Colors tab.
  2. Enter a hex color in a Color palette field or use a color-picker next to the necessary element. 
  3. Type a search term in the preview area to check out how it will look. 
  4. 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 optionDescriptionExample
Main backgroundChanges the background color of the whole drop-down widget
Hover backgroundChanges the background color of a product or a suggestion on hover
BorderChanges the border color of the widget

It is used in the "Classic" template and the "Classic" style only
Items separatorChanges the separator color

It is used in the "Classic" template only
Suggestion textChanges 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 titleChanges the text color of product titles in the drop-down widget
Item descriptionChanges the text color of product descriptions in the widget

It is used in the "Classic" template and the "Classic" style only
Price colorChanges the color of product prices
List price colorChanges 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 colorChanges 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' linkChanges 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' backgroundChanges the background color of the View all button

It is used in the new "Single Column", "Multi Column" templates only
Recent searchesChanges 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 colorChanges the color of product SKUs

It is used when the Show SKU option is enabled (Content tab > Products part)
Label colorChanges the text color of labels of the search results groups

It is not used in the "Classic" template and the "Classic" style
"See all" textChanges 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" backgroundChanges 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:

  1. Go to the Searchanise control panel > Instant search widget section > Colors tab.
  2. Click the Reset colors button. All color palettes of the current template style will be changed to default values.
  3. Apply the changes.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.