Customizing the search box
Product search helps customers find the items they need in your store. You can change the look of the search box itself to adjust it to your store design. In case you want to enhance the search, you can also use apps from Ecwid App Market.
Changing the search box design on Instant Site
If you’re selling on Ecwid’s Instant Site, you can adjust the look of the search box on the site in the Menu & Header section's settings.
To change the design of the search box:
- From your Ecwid admin, go to Sales channels → Manage Instant Site → Edit Site (or Website → Edit Site).
- Сlick on the Menu & Header section in the list on the left.
- Switch to the Design tab and choose the block layout that you like.
- Click Background and choose the style and color for your section's background.
- Click Menu & Icons and choose font and color for your section's icons and queries entered into the search field.
- Click Publish.
That's it! The style, font, and colors you choose will be used for the search field and its icon on your website.
Changing the search widget design
If you’re using the search widget on Wix, Wordpress, etc., or on a custom website, then you can change the input box style and the search button style with CSS codes.
Learn how to add CSS codes to your store →
You can use the following CSS codes to change the design of search widget elements:
- Input box styles:
Change the #000000 color code as you need according to HTML color chart./* 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 */ }
- Search button styles:
Change the #ffffff color code as you need and replace the image/button_search.png part with the real absolute path to the background image. For example: "http://www.example.com/images/button_bg.png"/* "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*/ }
Moving the search box
If you’re using the search widget on a custom website or on Wordpress, then you can move the search box with CSS codes.
To apply the codes, you should add them to a CSS theme in your Ecwid admin.
You can use the following CSS code to move the search widget:
/* to move the search widget*/
.ecwid-search-widget {
max-width: 170px; /* change width as needed*/
position:relative;
margin-left: 400px; /* change left margin as needed*/
margin-top: 10px; /* change top margin as needed*/
}
Depending on the desired position of the search widget, enter the corresponding values for margin-left and margin-top to move it.
If your store is on Wordpress, you can also use the following codes:
- To move the search box to the right:
.ecwid-shopping-cart-search { text-align: right }
- To center the search box:
.ecwid-shopping-cart-search { text-align: center }
Enhancing search functionality
If you want to broaden the search functionality, you can use one of the apps from Ecwid App Market to add an advanced search to your store:
CloudSearch
The CloudSearch app boosts your store search with autosuggestions. A list of suggested products and categories will appear while a customer types into the search field. This list shows basic product information with an option to go to the product.
CloudSearch also offers various features besides the autosuggest:
- spelling corrections – search queries with misspelled words will now return results
- synonyms – you can add similar words to show the same results when searching
- promoting certain products when a visitor searches for a specific keyword
- viewing search stats in your Ecwid admin
This is a paid app with a 30-day free trial.