You can change colors for some elements of a widget’s template in the Searchanise (Smart Search Bar & Filters) control panel > Search & Navigation > Search results widget section > Template & 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:
- Go to the Searchanise (Smart Search Bar & Filters) control panel > Search & Navigation > Search results widget section > Template & Colors tab.
- Enter a hex color in any Color palette field or use a color-picker next to the necessary element.
- 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 |
|---|
Product Card |
| 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)
| |
| Descriptions | Changes the text color of product descriptions | |
| Product prices | Changes the color of product prices | |
| SKU | Changes the text color of product SKUs
It is used when the “Show SKU option” is enabled (“Content” tab > “Products” part) | |
| Item background | Changes the background color of products
It is used for the “Modern Black” template only | |
| Button text | Changes the text color of on-hover buttons on products | |
| CTA button background | Changes the background color of on-hover buttons on products | |
| “View cart” background | Changes the background color of the View cart button in the Quick View pop-up (it appears after adding a product to cart) | |
| Product Border Color | Changes the border color of the product cards It is not used for the new “Big Pictures” template | |
Filters |
| Titles | Changes the text color of filter titles | |
| Titles background | Changes the background color of the filter titles
It is used for the “Modern Black” template and on desktop only | |
| Values | Changes the text color of filter values | |
| Background | Changes 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 | |
| On-hover background | 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 | |
| Filter Border Color | 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
| |
| Price range filter |
| Key points | Changes the color of the key points on the price range slider
It is not used for the new “Big Pictures” template | |
| Active range | Changes the color of a chosen range of the price range slider
It is not used for the new “Big Pictures” template | |
| Range leftover space | Changes the color of a leftover range of the price range slider
It is not used for the new “Big Pictures” template | |
| Placeholders | Changes the text color of the price range slider fields
It is not used for the new “Big Pictures” template | |
| Grid/list product view |
| Grid/list icon | Changes the icon color of the active product view type
It is used for the new “Big Pictures” template only
| |
| Grid/list background | Changes the background color of the active product view type
It is used for the new “Big Pictures” template only | |
| “Show products” button (mobile) |
| Text | Changes the text color of the Show [count] products button of the mobile filter panel | |
| Background | Changes the background color of the Show [count] products button of the mobile filter panel | |
| “Reset filters” button (mobile) |
| Text | Changes the text color of the Reset filters button of the mobile filter panel | |
| Background | Changes the background color of the Reset filters button of the mobile filter panel | |
| Miscellaneous |
| Pagination highlight | Changes the background color of the active pagination page
It is used for the new “Big Pictures” template only | |
| Navigation highlight | Changes:- 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 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
| |
| Other |
| Main panel | Changes the background color of the navigation panel
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
| |
Resetting colors
To reset colors to the default values, follow these steps:
- Go to the Searchanise (Smart Search Bar & Filters) control panel > Search & Navigation > Search results widget section > Template & Colors tab.
- Click the Reset colors button. All color palettes of the current template will be changed to default values.
- Apply the changes.
