Changing Widgets' Colors Print

Modified on: Mon, Nov 1, 2021 at 3:45 PM


TABLE OF CONTENTS


Instant Search Widget

You can change colors for some elements of a widget's template in the Searchanise control panel > Instant search 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:

  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. 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
Suggestion textChanges the text color of suggestions
Item titleChanges the text color of product titles in the drop-down widget
Item descriptionChanges the text color of product descriptions in the widget
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)
'View All' linkChanges the color of the View all link
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

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 link to reset colors on the bottom. All color palettes of the current template style will be changed to default values.
  3. Apply the changes.


Search Results Widget

You can change colors for some widget elements in the Searchanise control panel > 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:

  1. Go to the Searchanise control panel > Search results widget section > Colors tab.
  2. Enter a hex color in any Color palette field or use a color-picker next to the necessary element. 
  3. 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
General
Titles

Changes:

  • The text color of product titles 
  • The text color of the filter value on hover (desktop only)
DescriptionsChanges the text color of product descriptions
Product pricesChanges the color of product prices
Button backgroundChanges the background color of buttons on products
Button textChanges the text color of buttons on products
PlaceholdersChanges the text color of the price range slider fields
SKU colorChanges the text color of product SKUs

It is used when the Show SKU option is enabled (Content tab > Products part)
Filters
Filter titlesChanges the text color of filter titles
Filter valuesChanges the text color of filter values
"Show products" colorChanges the background color of the DONE button of the mobile filter panel
"Show products" textChanges the text color of the DONE button of the mobile filter panel
"Reset filters" colorChanges the background color of the CLEAR ALL button of the mobile filter panel
"Reset filters" textChanges 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:

  1. Go to the Searchanise control panel > Search results widget section > Colors tab.
  2. Click the link to reset colors on the bottom.  All color palettes of the current template 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.