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.

Customizing_the_search_box__2_.png

To change the design of the search box:

  1. From your Ecwid admin, go to Overview → Manage Instant SiteEdit Site (or WebsiteEdit Site).
  2. Сlick on the Header block.
  3. Switch to the Design tab and click on the Search icon element.
  4. Click on the Color field and pick the color you need using the color chooser tool:

    Customizing_the_search_box__1_.png

    You can also enter an existing color code into the Color field, if you already know it.
  5. Click Save & Publish.

The color you choose will be used for the search icon and for the text typed into the search field.

This instruction works for New-gen Instant Site. If you are using the old 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.

Clickable Brand

The Clickable Brand app helps improve navigation in your store by making the 'Brand' attribute clickable. This allows filtering products by brand.

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

Learn how to assign the 'Brand' attribute to your products →

To add faceted search to your storefront, you can use product filters.
Was this article helpful?

Awesome! Thanks for your feedback!

Thanks for your feedback!

Sorry about that! What went wrong?
16 out of 41 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