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.
Searchanise Search & Filter is gradually rolling out a new control panel to Shopify stores. During the rollout, some Shopify stores may still use the previous version. If switching is available for your store, you can try the new control panel and return to the previous version at any time. Learn how to identify your control panel version.
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.
- To see how it will appear
For Previous admin: Type a search term in the preview area at the top.
For New admin: Click Preview widget, and type a search term in the appeared preview area.
- Save 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 |  |
| Saving color | Changes the text color of the discount amount displayed as “Save …” when the Highlight saving option is enabled in the Content tab. |  |
| SKU | Changes the color of product SKUs When the Show SKU option is enabled (Content tab > Products part) |  |
| CTA 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 |  |
| Label colors | ||
| You can change the text and background colors for Discount, In-stock, Pre-Order, and Out-of-stock labels here and in the Labels settings. Label colors apply to all templates and remain unchanged when you change the template or reset its colors. | ||
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 Reset colors. All color settings for the current template, except the Product labels colors, will be reset to their default values.
- Save 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:
