How to customize Search widget

Last updated

In this widget you can change:

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.

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.

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.

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

Was this article helpful?
1 out of 2 found this helpful
Questions?
Get help
  • Presales Chat

    Need help choosing the right Ecwid plan? Our Sales team has the answer you’re looking for.

  • Forums

    Join the Ecwid community. Discuss support topics and store ideas with other Ecwid users.

  • Contact us

    Still have questions about Ecwid? Let us know! We will be glad to help you with your Ecwid store.

  • Status Monitor

    Get real time status updates on Ecwid services here, 24/7