When setting up your store, the main goal is selling your products. However, if your site is hard to navigate or customers cannot find what they're looking for, they may give up before completing a purchase.

Since driving more sales is your goal, you want to make the shopping experience as simple and enjoyable as possible. Adding a search bar to your e-commerce store minimises resistance, ensures your customers find what they need, and helps 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 to integrate this element into your store: either as a stand-alone element or by adding it to your existing navigation bar. Adding it to your navigation bar keeps everything streamlined, while the search bar alone gives you more control over its properties; and of course you can always add both.

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 personalised.

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; these include:

General Settings

  1. Element name: This will help you in case you need to identify different search bars.
  2. Color Options: Customise the colours of your Search Bar; everything from the background to the text and icon colours 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.
  • Text Customization: Text across various store components, such as Product List, Product Detail, and Upsell, can be fully customised for better localisation and brand consistency. These are consolidated under Text Customization in the General settings. Edit text for different sub-sections, such as;
  • Contact Details Section.
  • Shipping Details Section
  • Payment Section.
  • Cart Summary Section.

Advanced Settings

  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.

A well-optimised search bar improves the user experience, making it easier for customers to find products and complete purchases. Combined with Text Customization, store owners can refine their branding and ensure a seamless, professional shopping experience.

✍️Important Notes

  • The search suggestions will have results related to the name of the product.
  • Upon clicking on search, the user is taken to the product list page showing search results, which searches based on the title and 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.
  • Some text elements, like error messages, may not appear in the builder preview but can still be customised.
  • Text-related settings (e.g., Buttons and Form Options) are part of the Text Customization section.
  • Existing stores will continue functioning even without text updates.