When setting up your store the main goal you have in mind is selling your products. However, if your site is complex to manage or the customers can not find their desired product they might become discouraged from completing a purchase. 

Since driving more sales is your goal, you want to make the shopping experience as simple and enjoyable as possible. This is why you should add a search bar to your e-commerce store. This will minimize resistance, ensure your customers find what they need, and help your product rotation.

📌Note: Before jumping into this tutorial make sure your Website is set as a store, otherwise you will not see the element. If it isn't already activated please do so, you can check our article “Setting Up An E-commerce Store” for instructions on how to do it.

How to Add a Search Bar Element:

There are two ways for you to integrate this element into your store, either as a stand-alone element or by adding it to your already existing navigation bar. By adding it to your navigation bar you keep everything streamlined whereas with the Search bar alone you gain more control over the properties of it, and of course, you can always add both.

Navigation Bar Addition.

For this, you first need to add/select a Navigation Bar element.

Once it's added please scroll down in the General settings and toggle Show Searchbar on. This will add it to the right corner of the element.

Change the Icon Color to make the magnifying glass a bit more personalized.

Search Bar Element

Click on the plus sign to add an element and scroll down to the Store section. Drag and drop the Search Bar to where you want it.

Configure the look of the Search Bar by altering its properties, this will include:

General

1. Element name: This will help you in case you need to identify different search bars.
2. Color Options: Customize the colors of your Search Bar, everything from the background, to the text and icon colors can be changed here.
3. Font Options: Here you can play with the size and weight or change the font altogether.
4. Text Options: This allows you to change the placeholder text inside the Search bar.

Advanced

1. Borders & Corner: This allows you to change the look of the box, you can select whether to edit the search box or the results by changing it  
2. Custom Class: Here you can add product classes.
3. Visibility: You can disable it for phone/web browser format here.

Important to Note: 

• The search suggestions will have results related to the name of the product.
• Upon clicking on search, the user is navigated to the product list page, showing search results, which would search based on the title and the description.
•  If you can't see the element make sure the website is set as a store. If it isn't already activated please do so, you can check our article “Setting Up An E-commerce Store” for instructions on how to do it.