Knowledge base
Guides
Academy
Video tutorials
Try searching for:
Recently viewed articles:

Table of contents

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.

Search box on IS.png

To change the design of the search box:

  1. From your Ecwid admin, go to Sales channels → Manage Instant SiteEdit Site (or WebsiteEdit Site).
  2. Сlick on the Menu & Header section in the list on the left.
  3. Switch to the Design tab and choose the block layout that you like.
  4. Click Background and choose the style and color for your section's background.
  5. Click Menu & Icons and choose font and color for your section's icons and queries entered into the search field.
  6. 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.

This instruction works for New-Gen Instant Site. If you are using the original version of Ecwid Instant Site, you can apply the following CSS code to change the look of the search box.

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:

  1. Input box styles:Customizing_the_search_box__4_.png
    /*  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 the #000000 color code as you need according to HTML color chart.
  2. Search button styles:

    Customizing_the_search_box__3_.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*/
    }
    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"

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
    }
If you have added search to your Ecwid store on Wix, you can easily move your box in the Wix editor. Simply open the page where your store is located, click on the box to select it, and drag and drop to position the way you like. After you’re done, save and publish the changes.

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.

Was this article helpful?

Awesome! Thanks for your feedback!

Thanks for your feedback!

Sorry about that! What went wrong?
3 out of 10 found this helpful
10
We use cookies and similar technologies to remember your preferences, measure effectiveness of our campaigns, and analyze depersonalized data to improve performance of our site. By choosing «Accept», you consent to the use of cookies.
Accept cookies Decline