Changing colors of Instant Search Widget

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 Search & Filter control panel > Search & Navigation > 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 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:

  1. Go to the Searchanise Search & Filter control panel > Search & Navigation > Instant search widget section > Template & Colors tab.
  2. Enter a hex color in a Color palette field or use a color-picker next to the necessary element.

    Changing colors of Instant Search Widget

  3. Type a search term in the preview area to check out how it will look.

    Changing colors of Instant Search Widget

  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 option Description Example
Main background Changes the background color of the whole drop-down widget
Changing colors of Instant Search Widget
Hover background Changes the background color of a product or a suggestion on hover
Changing colors of Instant Search Widget
Border Changes the border color of the widget

It is used in the “Classic” template and the “Classic” style only

Changing colors of Instant Search Widget
Items separator Changes the separator color

It is used in the “Classic” template only

Changing colors of Instant Search Widget
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

Changing colors of Instant Search Widget
Item title Changes the text color of product titles in the drop-down widget
Changing colors of Instant Search 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

Changing colors of Instant Search Widget
Price color Changes the color of product prices
Changing colors of Instant Search Widget
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)

Changing colors of Instant Search Widget
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

Changing colors of Instant Search Widget
‘View All’ link Changes the text color of the View all link

It is not used in the new “Single Column”, “Multi Column” templates

Changing colors of Instant Search Widget
‘View All’ text Changes the text color of the View all button

It is not used in the new “Single Column”, “Multi Column” templates

Changing colors of Instant Search Widget
‘View All’ background Changes the background color of the View all button

It is used in the new “Single Column”, “Multi Column” templates only

Changing colors of Instant Search Widget
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)

Changing colors of Instant Search Widget
SKU color Changes the color of product SKUs

It is used when the Show SKU option is enabled (Content tab > Products part)
Changing colors of Instant Search Widget
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

Changing colors of Instant Search Widget
“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

Changing colors of Instant Search Widget
“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

Changing colors of Instant Search Widget

Resetting colors

To reset colors to the default values, follow these steps:

  1. Go to the Searchanise Search & Filter control panel > Search & Navigation > Instant search widget section >  Template & Colors tab.
  2. Click the Reset colors button under the chosen template.  All color palettes of the current template will be changed to default values.

    Changing colors of Instant Search Widget

  3. Apply the changes.
Enjoying your experience with Searchanise?

We’d appreciate it if you could take some time to leave a review. To do so, follow the link to your respective platform below:

Updated on November 7, 2023

Was this article helpful?

Related Articles

Back to top