Customizing the search box

Last updated

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.

In this article:

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

1. Input box styles:


input.ecwid-SearchPanel-field {
 width: 100px; /* change width as needed*/
 height: 20px; /* change height as needed*/
 border: solid 1px #000000; /* change border color */
 background-color: #ffffff; /* 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:


button.ecwid-SearchPanel-button {
 width: 100px; /* change width as needed*/
 height: 20px; /* change height as needed*/
 border: solid 1px #ffffff; /*change border color */  
 background: transparent url(image/button_search.png) no-repeat bottom center !important; /*add bacground 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"
 

Enhance search functionality

Ecwid provides several approaches on broadening the search functionality.

You can use one of the Ecwid apps for adding 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 besides the autosuggest:

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

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

Product Search Enhancer

Product Search Enhancer app offers a list 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 7-day free trial.

Clickable Brand

Clickable Brand app allows to improve navigation in your store by making the 'Brand' attribute clickable, which allows to filter 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 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

Back to top
Has the article answered your question?