Ways to Add a Search Bar
You can add a search bar in two supported ways:
Navigation Menu Search Bar
Displays the search input inside your site’s navigation menu.Standalone Search Element
Adds a search bar anywhere on a page as a separate element.
Each option works independently and can be used together.
Add a Search Bar to the Navigation Menu
Step 1: Add the Navigation Menu Element
Open your website in the page builder.
Click the Add Element (+) icon.
Select Elements.
Drag and drop Navigation Menu onto the page.
Step 2: Configure Menu Items
Select the Navigation Menu element.
In General settings, review or add menu items (Home, About, Contact, etc.).
Use Add Item to create new menu links if needed.
Step 3: Enable the Search Bar in the Menu
With the Navigation Menu selected, stay in General settings.
Scroll to Menu Settings.
Toggle Show Searchbar ON.
The search bar appears immediately in the menu.
Add a Standalone Search Bar Element
Step 1: Add the Search Element
Open the page where you want the search bar.
Click the Add Element (+) icon.
Search for Search.
Drag and drop the Search element onto the page.
Step 2: Customize the Standalone Search Bar
With the Search element selected, you can customize:
Input background color
Dropdown background color
Button and icon color
Text color and font size
Border thickness, style, and radius
Desktop and mobile visibility
All settings are available in the right-side panel.
How the Search Bar Works on the Storefront
Search Results Behavior
Products are matched using product titles and keywords in product descriptions.
Results update dynamically as users type.
Clicking a result opens the product detail page.
Product Results Display
Matching products appear in the results grid.
Availability status (e.g., Currently unavailable) is shown.
Results link directly to product pages.
Save and Publish Changes
Click Save in the page builder.
Publish the website.
Test the search bar on the live store to confirm results load correctly.
Common Issues and Fixes
Search results are empty
Confirm products have titles and descriptions.
Ensure the store is published.
Verify the Search Bar is added to an e-commerce store, not a regular website.
The search bar does not appear
Confirm Show Searchbar is enabled (Navigation Menu).
Check desktop/mobile visibility settings for standalone Search elements.
FAQ
Can I add a search bar to any page?
Yes. Using the standalone Search element, you can place a search bar on any page in your e-commerce store.
Is the search bar available for regular websites?
No. The Search Bar works only on e-commerce stores.
How do I customize the search bar design?
Select the Search element and adjust colors, fonts, spacing, and borders from the right-side settings panel.
How does the search bar decide which products to show?
Products are matched using product titles and keywords from product descriptions.
What should I do ifthe results are inaccurate?
Review product titles and descriptions to ensure relevant keywords are included and clearly written.