{"id":2821,"date":"2020-07-18T14:48:00","date_gmt":"2020-07-18T14:48:00","guid":{"rendered":"https:\/\/www.prefixbox.com\/blog\/?p=2821"},"modified":"2024-08-27T08:49:30","modified_gmt":"2024-08-27T08:49:30","slug":"search-box-optimization","status":"publish","type":"post","link":"https:\/\/www.prefixbox.com\/blog\/search-box-optimization\/","title":{"rendered":"10 Easy Search Box Optimization Methods for eCommerce Sites"},"content":{"rendered":"\n

<\/p>\n\n\n\n

<\/div>
<\/div><\/div>
\n

10 Easy Search Box Optimization Methods for eCommerce Sites<\/h1>\n\n\n\n
<\/div>\n\n\n\n
\n
\n

The search box has a big impact. It generates 50% of eCommerce stores\u2019 revenue. Even though it\u2019s important, it\u2019s often overlooked. People implement an open source search box on their website and don\u2019t think about it again, but this can lead to missed revenue opportunities.<\/p>\n\n\n\n

By spending a bit more time optimizing your search function, you will see a measurable increase in revenue.<\/p>\n\n\n\n

<\/div>\n\n\n\n
<\/div>\n<\/div>\n\n\n\n
\n
\"search<\/figure><\/div>\n\n\n\n

<\/p>\n<\/div>\n<\/div>\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n

If you’re ready to start increasing your online revenue, start by making these 10 changes to your site search function. <\/p>\n\n\n\n

The strategies listed below are incredibly powerful in enhancing your customers’ experience and improving your conversion rate.<\/p>\n\n\n\n

So, let’s get started!<\/p>\n\n\n\n

<\/div>\n\n\n\n

1. Position Your Search Box at the Top of The Page (Be Sure to Test the Placement)<\/h2>\n\n\n\n
<\/div>
<\/div><\/div>
\n
\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n

Your website visitors should be able to find your search box easily; they don\u2019t have the patience to scour your website in order to find it. The website search bar should be the first thing they see, so those who come to buy a specific product can easily express their buying intent by typing in exactly what they want to purchase.<\/p>\n\n\n\n

<\/p>\n\n\n\n

<\/div>
<\/div><\/div>
\n
\n
\n
<\/i><\/div><\/div>\n<\/div>\n\n\n\n
\n

Be sure to test the placement of your search box to ensure it\u2019s optimized to get the most use! If top of page placement isn\u2019t getting much use, try placing it in the middle or on the left, if this makes it more noticeable.<\/p>\n<\/div>\n<\/div>\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n

You can monitor your search box usage by checking the On Site Search Report in Google Analytics<\/a>. Be sure to collect data for each change you make to ensure you\u2019re continually improving.<\/p>\n\n\n\n

<\/div>\n\n\n\n

2. Make the Search Bar Large and Distinctive<\/h2>\n\n\n\n
<\/div>
<\/div><\/div>
\n
\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n

Your search box should be large and distinctive so it\u2019s easy to find\u200a\u2014\u200awhen more people use the search box, browsers are more likely to become customers. Make sure users can tell your search box is a search box (don\u2019t place it near other input boxes) and include some text in the field like \u201cSearch\u201d or \u201cEnter products here\u201d.<\/p>\n\n\n\n

\"large<\/figure>\n\n\n\n

<\/p>\n\n\n\n

A large search box means that users can see long search queries as they type. Short search boxes often eclipse the full text as there isn\u2019t space to display all the characters, which increases the rate of misspellings and the frequency of 0-results pages<\/a>. <\/p>\n\n\n\n

Search boxes are usually about 245 pixels wide, but for those with a small display, we recommend you implement a search box that expands to contain user\u2019s full queries.<\/p>\n\n\n\n

<\/div>\n\n\n\n

3. Include Text Such as \u201cProduct Search\u201d \u201cType search and click Enter\u201d in The Search Box<\/h2>\n\n\n\n
<\/div>
<\/div><\/div>
\n
\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n

Provide prompts in the search box so users can easily recognize which fields are acceptable for search. Most search engines allow you to search by item number, so text saying \u201cSearch by item number\u201d can be helpful. <\/p>\n\n\n\n

Placing text in the website search bar, can also be a way to express your company\u2019s personality or to make the online shopping experience more personal. <\/p>\n\n\n\n

\""Search<\/figure><\/div>\n\n\n\n

Lowe’s places a handful of hints (see above) in the search bar, which is placed prominently on their site.<\/strong><\/p>\n\n\n\n

Make sure your text prompts are in a large, clear font so people can easily read them. While it\u2019s good to include these prompts, they should disappear when users click in the search box so it won\u2019t interfere with their search terms. <\/p>\n\n\n\n

This is usually dictated by a piece of JavaScript, so once you implement it, make sure to test it works correctly<\/p>\n\n\n\n

<\/div>\n\n\n\n

4. Have Autocomplete in Your Search Box<\/h2>\n\n\n\n
<\/div>
<\/div><\/div>
\n
\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n

Autocomplete<\/a> suggests products and keywords to users as soon as they begin typing. It completes the user\u2019s thoughts by finding the right keyword before they finish typing and can be exceptionally helpful for hard-to-spell search terms. <\/p>\n\n\n\n

It helps users save and effort, since they can navigate to a product with just a few keystrokes and a click. Autocomplete also helps prevent typos.<\/p>\n\n\n\n

\"Search<\/figure><\/div>\n\n\n\n

Autocomplete can either recommend keywords or specific products that take users directly to that product page (skipping the Search Engine Results Page). In order to do this, Autocomplete must be enhanced with data from your site. <\/p>\n\n\n\n

With this data, it can recommend popular products as soon as users click in the search box as well as display product titles, images, descriptions, and price (including sale price).<\/p>\n\n\n\n

Learn more about the most important search autocomplete features to decrease zero-result pages by 31% and increase cart value by 19%.<\/a><\/p>\n\n\n\n

<\/div>\n\n\n\n

5. Have More Keyword Than Product Suggestions<\/h2>\n\n\n\n
<\/div>
<\/div><\/div>
\n
\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n

Simply because keywords suggestions are more important than product suggestions. Users are more likely to click on keyword suggestions since these will direct them to a SERP with many relevant results where they can browse to find something they want. <\/p>\n\n\n\n

Product suggestions are almost too specific for most people because it takes them directly to a product\u2019s page. These are especially helpful when people know exactly what they want to purchase.<\/p>\n\n\n\n

<\/div>
<\/div><\/div>
\n
\n
\n
<\/i><\/div><\/div>\n<\/div>\n\n\n\n
\n

For example, if someone searches \u201coutdoor paint\u201d, keyword suggestions will take users to a SERP for outdoor paints, where they can browse through colours and brands. While if they select a product recommendation that states the brand, colour, etc. they will be directed to that one page. Keyword suggestions appeal to a wider audience, thus it is more useful.<\/p>\n<\/div>\n<\/div>\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n

Autocomplete can also suggest categories, but this is usually not very helpful (you can find more nuanced best practices and explanations like this here). When you set up your web shop, you probably nested products under different categories and the chance that a search user could accurately guess the name of one of your categories to find a is slim. <\/p>\n\n\n\n

For example, if you have an \u201ciPhone 7\u201d listed under \u201ctechnology\u201d and a user searches the category \u201ccell phones\u201d on your site, the phone won\u2019t appear, which could cause the user to leave your site.<\/p>\n\n\n\n

<\/p>\n\n\n\n

<\/div>\n\n\n\n

6. Label the Search Button and Allow the \u201cEnter\u201d Key to be Used to Execute the Search<\/h2>\n\n\n\n
<\/div>
<\/div><\/div>
\n
\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n

Clearly label the search button with text like \u201cSearch\u201d, \u201cFind\u201d, \u201cGo\u201d, or with an icon of a magnifying glass, which has become synonymous with search.<\/p>\n\n\n\n

In addition to clearly labelling the search button, let the \u201cEnter\u201d key serve the same function. Many people use the \u201cEnter\u201d key to execute commands, so it\u2019s best to accommodate this expectation. Since search user\u2019s hands are already on the keyboard, this is faster and easier for them.<\/p>\n\n\n\n

<\/div>\n\n\n\n

7. Keep the searched term in the box<\/h2>\n\n\n\n
<\/div>
<\/div><\/div>
\n
\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n

Once a user has executed a search, keep their query visible in the search box so they can easily edit it. Sometimes people like to add a few terms in order to specify the initial query or correct a typo.<\/p>\n\n\n\n

This is especially important for searches that end up on “no-results found” pages. Instead of forcing shoppers to re-type a query (oftentimes they don’t remember the initial search that lead to the “no results” page), keeping the keyterm in the search box enables them to easily make edits or finetune their search to help them quickly navigate away from the “no results” pages.<\/p>\n\n\n\n

\"Search<\/figure><\/div>\n\n\n\n

Even in the cases the executed search yields results, keeping the search term in the box helps shoppers refine their query to find exactly what they’re looking for.<\/p>\n\n\n\n

<\/div>\n\n\n\n

8. Place a Search Box on Every Page<\/h2>\n\n\n\n
<\/div>
<\/div><\/div>
\n
\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n

By placing your search box on every page, you increase search usage since web visitors won\u2019t have to navigate back to the home page to use it. Be sure to keep it in the same place on each page, so users know where to find it.<\/p>\n\n\n\n

This means that it should be prominent on your homepage and should stay in the same place on your category pages, Search Engine Results page, and even on product pages.<\/p>\n\n\n\n

By keeping the website search bar on every page, you gives shoppers the opportunity to quickly (and easily) refine their search, so they can find what they’re looking for.<\/p>\n\n\n\n

<\/div>\n\n\n\n

9. Place a Search Box at the Bottom of The SERP<\/h2>\n\n\n\n
<\/div>
<\/div><\/div>
\n
\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n

By placing your search box on every page, you increase search usage since web visitors won\u2019t have to navigate back to the home page to use it. As we said, keeping it in the same place on every page is beneficial so shoppers don’t have to look for it. <\/p>\n\n\n\n

But in addition to that, place it at the bottom of the SERP as well – or make it “sticky”. This way, shoppers who land on the SERP, but realize they need to refine their query after looking through the results page – can easily update their query without spending time scrolling back to the top.<\/p>\n\n\n\n

\"Sticky<\/figure><\/div>\n\n\n\n
<\/div>\n\n\n\n

10. Show Search History<\/h2>\n\n\n\n
<\/div>
<\/div><\/div>
\n
\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n

Personalize your online store by storing visitors\u2019 previous searches and using them as recommendations when they revisit your site. Previously searched query prompts help them pick up where they left off. Asos does this nicely and in general has a great search function.<\/p>\n\n\n\n

\"Search<\/figure>\n\n\n\n

If you do add this feature, include simple controls so users can delete previous searches if they wish. Be sure to put previously searched terms in a colour different to regular suggestions, so users can quickly discern what\u2019s what.<\/p>\n\n\n\n

By increasing your search box\u2019s visibility and making it more user friendly, people will be more likely to use the search box, which takes them directly to the product they\u2019re looking for, so conversion rates will increase.<\/p>\n\n\n\n

If your search box is up to date, here are a few tips to optimize your search results page.<\/p>\n\n\n\n

Learn more about the most important eCommerce search engine features to increase conversion rate by 15% & revenue by 47%.<\/a><\/p>\n\n\n\n

<\/div>\n\n\n\n
<\/div>
Paige Tyrrell<\/span>Head of Marketing \u2013 Prefixbox<\/span>

Paige is the Head of Marketing at Prefixbox, a leading eCommerce site search solution. She\u2019s an American who\u2019s been living in Budapest since 2017 and loves giving #alwayslearning sessions to help people optimize their online stores.<\/p>\n