Changing colors of Search Results Widget

This article is general for Shopify, BigCommerce, WooCommerce, Magento 1, Magento 2. 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.

There are 4 widget templates:

Big pictures – the one with the new design is the default
Big pictures classic
Modern
Modern dark

See the visual differences between templates here.

You can change colors for some elements of the widget’s template in the Searchanise Search & Filter control panel > Search & Navigation > Search results 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 colors, follow these steps:

Go to the Searchanise Search & Filter control panel > Search & Navigation > Search results widget section > Template & Style tab.
Enter a hex color in any Color palette field or use a color picker next to the necessary element.
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
Product Card
Title	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)
Description	Changes the text color of product descriptions
Product price	Changes the color of product prices
Crossed-out original price	Changes the text color of product prices before the discount
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 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 In the “Modern dark” template only
CTA 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 (it appears after adding a product to the cart from the widget or the Quick view pop-up)
Product Border Color	Changes the border color of the product cards Except for the “Big pictures” template
Filters
Titles	Changes the text color of filter titles
Titles background	Changes the background color of the filter titles In the “Modern dark” 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 Except for the “Big pictures” template and on desktop only
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 Except for the “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) Except for the “Big pictures” template
Price range filter
Key points	Changes the color of the key points on the price range slider Except for the “Big pictures” template
Active range	Changes the color of a chosen range of the price range slider Except for the “Big pictures” template
Range leftover space	Changes the color of a leftover range of the price range slider Except for the “Big pictures” template
Placeholders	Changes the text color of the price range slider fields Except for the “Big pictures” template
Grid/list product view
Grid/list icon	Changes the icon color of the active product view type In the “Big Pictures” template only
Grid/list background	Changes the background color of the active product view type In the “Big Pictures” template only
“Show products” button (mobile)
Text	Changes the text color of the Done / Show [count] products button of the mobile filter panel
Background	Changes the background color of the Done /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 In the “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) Except for the “Big Pictures” template
Other
Main panel	Changes the background color of the navigation panel Except for the “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) Except for the “Big pictures” template
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 > Search results 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.

The visual difference between templates

Widget’s element	Big pictures	Big pictures classic	Modern	Modern dark
Widget view
The title “Search Results”	The same
The tabs: Products, Categories, and Pages	underlined	simple, blue text colors for the inactive tabs and black for the active one	simple, black text on a white background	simple, white text on a black background
The text “Showing X results”	small text	big text with the bold product count
The switch between cards/list	big, in the same row as the text “Showing X results”	small, in the same row as the tabs: Products, Categories, and Pages
The Sorting selection	big, under the tabs: Products, Categories, and Pages	small, in the same row as the tabs: Products, Categories, and Pages
Filters
The size filter (size template)	small boxes	big boxes
The Rating filter	black stars	yellow stars
Any filter	collapse icon on the right	collapse icon on the left
The product card
Size	big	medium	small	small
Border	no	yes
The text color of the product name	black	black	blue	white
The color of the selected product option	black	blue	blue	white
The color of the Review link	black	blue	blue	white
The alignment of elements	left	center	left	left
The price position	under the product name	last
Color option swatch	round	square