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 color 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: "http://www.example.com/images/button_bg.png"

3. The search box on Instant Site 


.ec-minicart.ec-minicart--pill .ec-minicart.ec-minicart--rect { 
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

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.

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.

You can also use Product Filters to add faceted search in your storefront.
Was this article helpful?

Awesome! Thanks for your feedback!

Thanks for your feedback!

Sorry about that! What went wrong?
8 out of 22 found this helpful