Search Bar Customization

The Search Bar Customization feature in ZenBasket allows you to modify the appearance and behavior of the search bar to match your store design and improve the customer search experience.

  1. Log in to your ZenBasket Store Admin.
  2. Navigate to the Design module.

  3. Click Start Editing to open the ZenBasket Builder.

    enter link description here

  4. In the builder, select the Search Bar section.

  5. Click the Settings icon.

    enter link description here

  6. The Header Properties window will open.

  7. Click the Search Bar Settings dropdown to view the available customization options.

    enter link description here

  8. In the Search Bar Settings, you can customize how the search feature appears and behaves on your storefront.

  9. First, choose the Search Type based on your preferred search layout.

    enter link description here

  10. The available options include:

  • Normal – Displays the search bar with standard search functionality.

    enter link description here

  • Inline – Displays search results in a dropdown below the search bar.

    enter link description here If you select Inline as the search type, you’ll have additional options available. You can choose:

    • Default – Displays product names along with their images in the search results.
    • List Only – Displays only the product names.

    enter link description here

  • Panel – Opens the search results in a side panel, and the results will appear on the right side of the screen.

    enter link description here

  • Overlay – Displays the search interface as a full-page overlay.

    enter link description here 11. You can further customize the search behavior by configuring the following settings: Placeholder Text, Search Debounce Delay (which controls how quickly the search starts.), Minimum Characters to Search, Result Limit, and Border Radius.

    enter link description here

  1. You can also change the appearance of the search bar using the Color Picker.

    enter link description here

  2. The available color options include Hover Background, Border Primary, Secondary Text, Accent, Background, Input Background, and Focus Ring.

    Note: You can set the Focus Ring color only when the Inline search type is selected.

    enter link description here

Note: The preview of these customizations can only be viewed on your storefront.