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

image

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

image

Color palette description

Color Option

Description

Example

Main background 

Customizes the background color of the entire drop-down widget

image

Hover Background

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

image

Suggestion Text

Customize the text color of suggestions

image

Label Color

Customize the label text color for search results categories

image

Label Background

Customize the background color for the search categories

image

Item Separator

Customizes the color of the product separator line

image

Item Title

Customizes the color of the product titles within the dropdown widget

image

Item Description

Customizes the color of the product descriptions in the widget

image

Additional Product Field Color

Customizes the text color of the additional product field value

image

Price Color

Customizes the color of product prices

image

Discount Price

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

image

View All' Background

Customizes the background color of the View all product button

image

View All' Text

Customizes the text color of the View all product button

image

Recent Searches

Customizes the text color of recent customer search query suggestions

image

Loder color 

Customize the color of the loder

image