Instant Search Widget – Color options

To change widget colors, follow these steps:

  1. Open Search7: Smart Search & Filter app and go to the Search >> Instant Search Widget

  1. Enter a hex color in a Color palette field or use a color-picker next to the necessary element. 

Color palette description

Color Option

Description

Example

Main background 

Customizes the background color of the entire drop-down widget

Hover Background

Customizes the background color of a product or suggestion when hovered over

Suggestion Text

Customize the text color of suggestions

Label Color

Customize the label text color for search results categories

Label Background

Customize the background color for the search categories

Item Separator

Customizes the color of the product separator line

Item Title

Customizes the color of the product titles within the dropdown widget

Item Description

Customizes the color of the product descriptions in the widget

Additional Product Field Color

Customizes the text color of the additional product field value

Price Color

Customizes the color of product prices

Discount Price

Customizes the text color for product’s compare at prices/retail price

View All’ Background

Customizes the background color of the View all product button

View All’ Text

Customizes the text color of the View all product button

Recent Searches

Customizes the text color of recent customer search query suggestions

Loder color 

Customize the color of the loder