How to change colors in Search Results Widget Print

Modified on: Wed, Dec 1, 2021 at 8:45 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 control panel > Search results widget section > Colors tab.

Note
The Big Pictures template is a template with new design.

If you don't like the color changes, you can always reset colors to the default values.

ON THIS PAGE

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 color of the price range slider handles
  • 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
Navigation highlightChanges:
  • The text color of inactive navigation panel tabs
  • The text color of the current product sorting (mobile only) 
  • The color of the product view type icons (mobile only)
Navigation default

Changes:

  • The text color of the active navigation panel tab
  • The text color of the Showing [count] results for [search term] title (desktop only)
  • The text color of the current product sorting (desktop only) 
  • The color of the product view type icons (desktop only)


It is not used for the new "Big Pictures" template

Additional borders

Changes:

  • The border color of the sorting drop-down (desktop only)
  • The border color of product view type icons (desktop only)


It is not used for the new "Big Pictures" template

Borders

Changes:

  • The border color of the navigation panel (desktop only)
  • The border color of the top filters
  • The border color of the side filters (desktop only)


It is not used for the new "Big Pictures" template

On-hover color

Changes:

  • The background color of the active navigation panel tab
  • The background color of the side filter on hover
  • The background color of the navigation panel tabs on hover
  • The background color of product sorting variants on hover

It is used on desktop only

It is not used for the new "Big Pictures" template

Main panelChanges the background color of the navigation panel

It is not used for the new "Big Pictures" template
Item backgroundChanges the background color of products

It is used for the "Modern Black" template only
Button backgroundChanges the background color of on-hover buttons on products
Button textChanges the text color of on-hover buttons on products
"View cart" backgroundChanges the background color of the View cart button in the Quick View pop-up (it appears after adding a product to cart)

It is used on desktop only
PlaceholdersChanges the text color of the price range slider fields

It is not used for the new "Big Pictures" template
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
Range key pointsChanges the color of the key points on the price range slider

It is not used for the new "Big Pictures" template
Active rangeChanges the color of a chosen range of the price range slider

It is not used for the new "Big Pictures" template
Range leftover spaceChanges the color of a leftover range of the price range slider

It is not used for the new "Big Pictures" template
Filter backgroundChanges the background color of the top and side filter panels

It is used on desktop only
It is not used for the new "Big Pictures" template

"Show products" colorChanges the background color of the Show [count] products button of the mobile filter panel
"Show products" textChanges the text color of the Show [count] products button of the mobile filter panel
"Reset filters" colorChanges the background color of the Reset filters button of the mobile filter panel
"Reset filters" textChanges the text color of the Reset filters button of the mobile filter panel
Filter titles backgroundChanges the background color of the filter titles

It is used for the "Modern Black" template and on desktop only
Grid/list iconChanges the icon color of the active product view type

It is used for the new "Big Pictures" template only

Grid/list backgroundChanges the background color of the active product view type

It is used for the new "Big Pictures" template only
Pagination highlightChanges the background color of the active pagination page

It is used for the new "Big Pictures" template only


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 Reset colors button. 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.