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.

There are 4 widget’s templates:

  1. Big Pictures – the one with the new design, is the default
  2. Big Pictures Legacy
  3. Modern
  4. Modern Black

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 & 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:

  1. Go to the Searchanise Search & Filter control panel > Search & Navigation > Search results widget section > Template & Colors tab.
  2. Enter a hex color in any Color palette field or use a color-picker next to the necessary element. 
  3. 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)
Changing colors of Search Results Widget
Descriptions Changes the text color of product descriptions
Changing colors of Search Results Widget
Product prices Changes the color of product prices
Changing colors of Search Results Widget
SKU Changes the text color of product SKUs

It is used when the “Show SKU option” is enabled (“Content” tab > “Products” part)
Changing colors of Search Results Widget
Item background Changes the background color of products

It is used for the “Modern Black” template only
Changing colors of Search Results Widget
Button text Changes the text color of on-hover buttons on products
Changing colors of Search Results Widget
CTA button background Changes the background color of on-hover buttons on products
Changing colors of Search Results Widget
“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)
Changing colors of Search Results Widget
Product Border Color

Changes the border color of the product cards

It is not used for the new “Big Pictures” template
Changing colors of Search Results Widget
Filters
Titles Changes the text color of filter titles
Changing colors of Search Results Widget
Titles background Changes the background color of the filter titles

It is used for the “Modern Black” template and on desktop only
Changing colors of Search Results Widget
Values Changes the text color of filter values
Changing colors of Search Results Widget
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
Changing colors of Search Results Widget
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
Changing colors of Search Results Widget
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
Changing colors of Search Results Widget
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
Changing colors of Search Results Widget
Active range Changes the color of a chosen range of the price range slider

It is not used for the new “Big Pictures” template
Changing colors of Search Results Widget
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
Changing colors of Search Results Widget
Placeholders Changes the text color of the price range slider fields

It is not used for the new “Big Pictures” template
Changing colors of Search Results Widget
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
Changing colors of Search Results Widget
Grid/list background Changes the background color of the active product view type

It is used for the new “Big Pictures” template only
Changing colors of Search Results Widget
“Show products” button (mobile)
Text Changes the text color of the Show [count] products button of the mobile filter panel
Changing colors of Search Results Widget
Background Changes the background color of the Show [count] products button of the mobile filter panel
Changing colors of Search Results Widget
“Reset filters” button (mobile)
Text Changes the text color of the Reset filters button of the mobile filter panel
Changing colors of Search Results Widget
Background Changes the background color of the Reset filters button of the mobile filter panel
Changing colors of Search Results Widget
Miscellaneous
Pagination highlight Changes the background color of the active pagination page

It is used for the new “Big Pictures” template only
Changing colors of Search Results Widget
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)
Changing colors of Search Results Widget
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
Changing colors of Search Results Widget
Other
Main panel Changes the background color of the navigation panel

It is not used for the new “Big Pictures” template
Changing colors of Search Results Widget
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
Changing colors of Search Results Widget

Resetting colors

To reset colors to the default values, follow these steps:

  1. Go to the Searchanise Search & Filter control panel > Search & Navigation > Search results widget section > Template & Colors tab.
  2. Click the Reset colors button. All color palettes of the current template will be changed to default values.
  3. Apply the changes.

The visual difference between templates

Widget’s element Big Pictures Big Pictures Legacy Modern Modern Black
Widget view Changing colors of Search Results Widget Changing colors of Search Results Widget Changing colors of Search Results Widget Changing colors of Search Results Widget
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