Predictive Search Popup

️How to Configure

To configure the predictive search functionality, follow these steps:

Step 1: Enable Predictive Search in Theme Settings

You can enable/disable the live suggestions globally and control which metadata (prices, images, vendors) is visible.

1. Open the Shopify Theme Editor.
2. Click on the Theme settings tab (gear icon) in the left sidebar.
3. Scroll down and click on Header (or Search settings depending on your layout block).
4. Locate the Predictive Search section:

– Check the Enable predictive search box.
– Adjust the Max suggestions slider (range from 3 to 10) to limit the number of results.
– Toggle options for Show product image in suggestions, Show product price, and Show product vendor.

1. Click Save in the top-right corner.

Step 2: Configure Search Popup & Popular Searches

You can customize the layout of the overlay, display keyboard shortcuts, and define a comma-separated list of popular search terms.

1. Navigate to the Header group or Footer group section of your Theme Editor page.
2. Click Add section and select Search Popup (if it’s not already added).
3. Click on the Search Popup section to open its settings:

– Toggle Show heading title and customize the heading (e.g. Search).
– Check Show keyboard shortcuts and hints to display hints like ↵ to search or ESC to close.
– Check Show recent searches to display the customer’s search history.
– Check Show popular searches and enter a comma-separated list of tags in the Popular searches input box (e.g., Laptop, Phone, Watch, Headphones).

1. Click Save.

Step 3: Test Search Suggestions on storefront

To verify the layout on your active storefront:

1. Click the search icon in your header.
2. The search overlay will fade in, displaying the Popular Searches tags.
3. Type a query (e.g. Samsung or Xiaomi). The dropdown will instantly display matching product thumbnails, titles, vendors, and prices.
4. Click See all results or press Enter to open the full search results page.

Important Best Practices