This article is general for Shopify, BigCommerce, WooCommerce, Magento 1, Magento 2, CS-Cart. If you have a store on Wix, you can find the same article here.
You can change colors for some elements of a widget’s template in the Searchanise Search & Filter control panel > Search & Navigation > Instant search widget section > Template & Style tab.
If you don’t like the color changes, you can always reset colors to the default values.
Changing colors
To change widget colors, follow these steps:
- Go to the Searchanise Search & Filter control panel > Search & Navigation > Instant search widget section > Template & Style tab.
- Enter a hex color in a Color palette field or use a color picker next to the necessary element.
- Type a search term in the preview area to see how it will appear.
- 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 |
|---|---|---|
| General colors | ||
| Main background | Changes the background color of the whole drop-down widget |  |
| Hover background | Changes the background color of a product or a suggestion on hover |  |
| Section text | Changes the text color of labels of the search results sections Not used in the “Classic” template |  |
| Border | Changes the border color of the widget In the “Basic” template only |  |
| Items separator | Changes the separator color In the “Classic” template only |  |
| Suggestion text | Changes the text color of suggestions In the “Classic” template, it is also used for the text color of the search result product description |  |
| ‘View All’ background | Changes the background color of the View all button In the “Big pictures” template only |  |
| ‘View All’ text | Changes the text color of the View all button In the “Big pictures” template only |  |
| ‘View All’ link | Changes the text color of the View all link Except for the “Big pictures” template |  |
| Recent searches | Changes the text color of the suggestions showing the queries that a customer has searched for recently Except for the “Big pictures” template |  |
| “See all” background | Changes the background color of the See all products button when no search results are found In the “Big pictures” template only |  |
| “See all” text | Changes the text color of the See all products button when no search results are found In the “Big pictures” template only |  |
| Product cards colors | ||
| Title | Changes the text color of product titles in the drop-down widget |  |
| Description | Changes the text color of product descriptions in the widget In the “Classic” template only |  |
| Price | Changes the color of product prices |  |
| Crossed-out original price | Changes the text color of product prices before the discount When the discount label isn’t enabled (Product labels tab > Discount label part > Show label option) |  |
| Sale price | Changes the text color for discounted product prices |  |
| SKU | Changes the color of product SKUs When the Show SKU option is enabled (Content tab > Products part) |  |
| Button text | Changes the text color of the Add to cart (View product) button on product cards |  |
| CTA button background | Changes the background color of the Add to cart (View product) button on product cards |  |
| ‘View cart’ background | Changes the background color of the View cart button (it appears after adding a product to the cart) |  |
| Hover text | Changes the text color of a product or a suggestion on hover In the “Basic” template only |  |
Resetting colors
To reset colors to the default values, follow these steps:
- Go to the Searchanise Search & Filter control panel > Search & Navigation > Instant search widget section > Template & Style tab.
- Click the Reset colors button under the chosen template. All color palettes of the current template will be changed to default values.
- Apply the changes.
We’d appreciate it if you could take some time to leave a review. To do so, follow the link to your respective platform below:
