Adding a Search Bar to Your E-commerce Store
Enhancing Your Store with a Search Bar
To help customers quickly find the products they're looking for, you can add a search bar to your e-commerce store. This feature improves the browsing experience by allowing users to search your product catalog directly.
Adding a Search Bar Element
You can add a search bar to your store in two primary ways: as a standalone element on a page or within the navigation menu.
Adding a Standalone Search Bar
To place a search bar directly onto a page:
- Open the page builder for your store.
- Navigate to the Add elements panel.
- Find the Search Bar element within the Store section and add it to your page.
Enabling Search in the Navigation Menu
To add a search bar to your site's navigation menu:
- Access the settings for your navigation menu.
- Locate and enable the Show Search bar toggle.
Customizing the Search Bar
When you use the standalone Search Bar element, you have access to a range of customization options to match your store's branding. You can configure the following properties:
- Search button color
- Text and background color for the search input box
- Text and background color for the search suggestions dropdown
- Border color for the input field and dropdown
- Font size and weight
Please note that customization options for the search bar are only available for the standalone element added via the page builder. The search bar added through the navigation menu settings has limited customization.
How the Search Function Works
The search bar provides two ways for customers to find products:
- Search Suggestions: As a user types, a dropdown will appear with suggestions based on product titles/names.
- Search Results Page: When a user clicks the search button or selects a suggestion, they are taken to a product list page showing results. This page searches both product titles and descriptions.
Remember to click Save or Publish after making any changes to see them on your live site.
Note: The Search Bar element is available for any page on a website that has an e-commerce store enabled, including non-store pages. However, the navigation menu search bar customization is limited.