The Perfect Search Box Design for your eCommerce

Have you ever browsed an online store or Marketplace with the intention of searching for a product and not been able to find the search box? We’re sure you have. 

It goes without saying that the more prominence you give to the Site Search on your homepage, the more likely your Site Search is going to be used. This means that instead of going through different categories on your eCommerce website, your visitors will use the Site Search directly to find the product they want faster, without having to waste time looking at things they don’t need. 

So, in sectors in which searching is the most common way to find products, it may be a good idea to “promote” the search field with an eye-catching design and placing it in a strategic location, especially on the homepage.

👉 Category Navigation

This is typically the case for more targeted, price comparison websites, as long as the user knows the exact brand name and model of the product they are looking to buy (in other words, they know exactly what they want, even before they visit your eCommerce website).

On the other hand, in sectors in which users prefer to browse by category (because they do not know the exact product they want, its name or how it is spelled), or with a flat website hierarchy, a less conspicuous search field design can be used to encourage browsing by category rather than by searching. 

For example: the fashion and home décor sectors, in particular, strongly favor browsing by category, both in terms of users’ initial preference and their subsequent success rate (post-search conversion rate).

When it comes to design and implementation, there are a wide range of ways to make the search field stand out within the overall design. So, the exact format to be used will vary from one website to another, depending largely on the context in which the search field appears (in other words, the overall website design).

👉 Design elements of the search field

There are multiple design elements of the search field that can be used to make it stand out, depending on the degree to which you want to encourage users to use the search function. The three main elements of search box design that tend to have the greatest impact are:

Position

Have a look at Amazon in the image below. As you can see, it is in Amazon’s interest for you to search its marketplace, as it sells more and can guide you better when you use its Site Search rather than browsing by categories. 

Due to the millions of products it has and, taking into account that users normally already know what type of product they want once they visit its website, they put the Site Search in a preferential location, right in the center and taking up virtually the entire width of the screen. 

What’s more, if you want to give prominence to the Site Search and encourage users to use it, it must work properly. In other words:

  • Show results instantly: you can’t have a Site Search that takes too long to load the products once they have been searched for. 
  • List the results in whatever order you want: bear in mind that, the higher up and to the left, the more relevant the results will be for your visitors. 
  • Decent image quality: no pixelated images, please! 
  • Show your product specifications: sizes, discounts or promotions, available colors… All within your own search.
  • Give users the option to add to cart within the Site Search itself: so that they can buy several products without having to go back and forth between the Site Search and the cart.

Your Site Search styles

It is of the utmost importance that, once the search box is clicked, your website image is respected. For this, quite a number of elements must be taken into account. 

  • Colors: You should use the same corporate colors as on your website. Try adding the logo somewhere in the Site Search too. 
  • Fonts: The font is another important element; use the same fonts that you use on your website, for numbers, titles, buttons…
  • Buttons: Try to have the same styles as the buttons on your website in the buy or “add to cart” buttons. 
  • Other elements: Such as discounts, borders, using the same categories you have on your eCommerce website…

Size

By making the search field relatively small, its visual prominence is significantly reduced. One thing that many online stores seeking to boost Site Search usage do is to increase the contrast between the header and the Site Search. For example, Amazon, as we saw above, has its header in black, but the Site Search is centered and in white. 

When you combine size, position and contrast, you make the search box really stand out, encouraging searching as the preferred way to look for products on your eCommerce website. Nevertheless, this requires a smart Site Search such as Doofinder to reduce your bounce rate. If not, this can become a double-edged sword. 

👉 Search box design on the homepage

On the homepage in particular, the search box design is even more important, as most users tend to come up with their product search strategy as soon as they visit the website. 

According to Baymard Institute data, 60% of users immediately use search as the first strategy on the homepage of a mobile website. Therefore, the more eye-catching the design of the search field on the homepage, the more users will take it as an incentive to search rather than browse by category.

What’s more, it is a good idea to give the Site Search an additional visual touch on the homepage, provided you want to encourage browsing in the Site Search over browsing by category.  

A differentiated Site Search design for the homepage can be done in many ways: from bolder search field borders, a more contrasting background color, a bigger box and font size, a more lively “search” button… And perhaps even make the field keyboard focusable by default. Any design modification that makes the search field stand out on its own, without fundamentally changing its position or visual style, will help it stand out.

In this way, the search field remains fully recognizable without taking the focus away from the other pages, but will give you added visual contrast on the homepage.

This additional visual contrast should not go so far as to promote search as “the only option” on the website, but should help users see the search field more easily when they visit the website.

As you know… The home page often features lots of different graphics and visual elements that compete for the user’s attention, which means that, what on subsequent pages (such as category pages, product lists or product pages) might be a dominant search field, may not be enough for the homepage.

FREE EBOOKS