Autocomplete Settings

The Autocomplete module lets you fine‑tune every aspect of how search suggestions and product previews appear as users type in your search bar. You can configure the trigger threshold, choose from multiple layout templates, control which suggestion blocks are shown (products, search terms, categories, content pages), and define mobile‑specific behaviors—all from one unified interface.

1. Enabling Autocomplete

  • Toggle On/Off
    Enable or disable Autocomplete globally for desktop and mobile views.
  • Trigger Threshold
    Specify how many characters a user must type before suggestions appear (options: 2, 3, 4, or 5; default: 3).

2. Popover Layout

Choose the visual arrangement of suggestion blocks:
LayoutDescription
Vertical (default)Suggestions list vertically on the left; product previews on the right.
HorizontalSearch terms, categories, and content appear above; product previews below.
MinimalisticA compact list combining all suggestion types.

3. Product Card Layout

View Mode

  • Grid View (default)
    Displays product thumbnails in a multi‑column grid.
  • List View
    Shows products in a single column with extended details.

Attributes to Show

Select which fields appear on each product card. At least one is required; defaults are Image, Name, and Price. Additional options include:
  • SKU
  • Brand
  • Short Description
  • Rating
  • Inventory Level
Drag‑and‑drop to reorder, or remove attributes with a single click.

4. Suggestion Blocks

Enable, disable, and configure each block of the Autocomplete dropdown:
BlockToggleCount (1–20)Additional Options
Product Suggestions✔️Default 5Show product count
Search Term Suggestions✔️Default 5Highlight matching text
Category Suggestions✔️Default 5Show product count per category
Content/Page Suggestions✔️Disabled
Use drag‑and‑drop in the “Search Result Order” panel to change the vertical ordering of these blocks.

5. Quick‑Click Suggestions

Define what appears when users click into the search box before typing:
  • Popular Searches
    Show most‑searched terms (count configurable 1–20; default 5).
  • Recent Searches
    Display the user’s own recent queries (configurable 1–20; default 5).
  • Search Product Recommendations
    If no input, show a pre‑built recommendation widget or custom product list when user clicks on the search box.

6. No‑Results Handling

  • Custom No‑Results Message
    Enter the custom message; include <%= searchTerm %> to dynamically insert the user’s query.
  • Fallback Recommendations
    Toggle on to display a recommendation widget titled by you; toggle off for no suggestions.

7. Mobile View Overrides

All of the above settings can be overridden for mobile:
  • Layout: Choose between Horizontal or Minimalistic layouts.
  • Block Order & Visibility: Enable or disable blocks independently from desktop.
  • Trigger Threshold: Optionally set a higher or lower character count for mobile.
Use the Desktop/Mobile tabs at the top of the Autocomplete page to switch contexts. By tailoring these Autocomplete settings, you’ll deliver faster, more relevant suggestions that guide shoppers to the right products with fewer keystrokes—driving engagement and conversions.