Customizing the search box

A search widget helps your customers search for products in your store. You can change the look of the search box itself or use apps to enhance the search.

Change search widget design

You can change the look of the search box using CSS.

1. Input box styles:

/*  Input box styles */
input.ecwid-search-widget__input[type="text"] {
 width: 100px; /* change width as needed*/
 height: 20px; /* change height as needed*/
 border: solid 1px red; /* change border color */
 background-color: blue; /* change background colour */
 font-size: 12px; /* change font size in search field */
 color: #000000; /* change font color in search field */

change #000000, #ffffff color code as you need according to HTML colour chart

2. "Search" button styles:

/* "Search" button styles */
button.ecwid-search-widget__btn {
 width: 20px; /* change width as needed*/
 height: 10px; /* change height as needed*/
 border: solid 1px #ffffff; /*change border color */  
 background: transparent url(image/button_search.png) no-repeat bottom center !important; /*add background image*/

Replace the image/button_search.png with the real absolute path to the background image. For example:""

3. The search box on Instant Site { 
border: 1px solid #e6e6e6; 

.search-panel .text-field { 
background-color: #F3F6F9; 
border: 2px solid #DC230A; 

Enhance search functionality

Ecwid provides several approaches to broadening search functionality.

You can use one of the Ecwid apps for adding an advanced search to your store.


CloudSearch application offers a list of suggested products and categories while the user types into the search field. The autosuggestions list shows basic product information with an option to go to that product.

CloudSearch allows you a various feature set beside the autosuggest:

  • synonyms – add similar words to show the same results when searching
  • promote certain products when a visitor searches for a specific keyword
  • view search stats in your Ecwid Control Panel

This is a paid app with a 30-day free trial.

Product Search Enhancer

Product Search Enhancer app offers a list of autosuggestions while the user types into the search field.The autosuggestions list shows the product image and description on hover. This feature helps to find the needed product faster without extra clicks.

The Advanced Search feature, allows to filter by price, categories, keyword, etc.

The app settings allow to customize the widget according to your needs:

  • configure Autosuggest
  • change the Mouse Hover Popup 
  • add a custom search field to your site pages 

This is a paid app with a 7-day free trial.

Clickable Brand

Clickable Brand app allows improving navigation in your store by making the 'Brand' attribute clickable, which allows filtering the products by brand. Please refer to this article for details on how to assign 'Brand' attribute to your products: Product Types and Attributes

This is a paid app with a 14-day free trial.

Filter by Color

Filter by Color app adds the following features to your store:
  • Your customers can filter catalog for single or multiple colors
  • You can add color filters for a clean, organized layout – your colors will become a part of parent categories
  • You can create and add your personal color collections to speed up the process

This app is free.

Alternatively, you can use our Product Filters API to tune up the search in your store according to your needs. Please refer to this article for details: Product Filters API

Was this article helpful?

Awesome! Thanks for your feedback!

Sorry about that! We are here to assist you by email or chat.

Contact support