Store

Add a search bar to your store

Add product search to a store in two ways: place a standalone Search bar element on a page, or enable the search bar in the navigation menu. See Set up an ecommerce online store first if your store isn't set up yet.

Add the Search bar element

Use the standalone Search bar element when you want search in a specific spot on a page. Websites with stores can add this element to any page, store or non-store.

  1. Open the store's page builder.

  2. In Add elements, open the Store section.

  3. Add the Search bar Element.

Add search to the navigation menu

Add search to the site navigation when you want it available on every page at once.

  1. Open the navigation menu settings.

  2. Enable the Show Search bar toggle.

Configure the standalone Search bar element's appearance from its properties, which include:

  • Search button color.

  • Search input box text and background color.

  • Search dropdown text and background color.

  • Border color for the input field and dropdown.

  • Font size and weights.

Navigation-menu search customization is limited; all customization options are available only in the standalone Search bar element.

Click save/Publish to view the changes on the site.

How product search works

Product search suggests and matches results from the product name and description.

  • Dropdown suggestions search the product title/name.

  • After the customer clicks search, they are navigated to the product list page.

  • Product-list search results use both the product title and description.

Was this helpful?
Was this helpful?