Predictive search

Display real-time search suggestions as customers type — helping them find products, collections, pages, and articles instantly.

When to use this element

Use Predictive Search extension when you want to help customers find what they're looking for faster — without waiting for a full page reload.

Best fits for:

• Stores with large catalogs where navigation alone isn't enough

• Pages where search is a primary discovery tool — homepage, landing pages

• Replacing a basic search input with a smarter, faster experience

• Any page where reducing time-to-product improves conversion

Quick setup

Part 1 — Install the extension

1. Open Apps market — In the FoxStudio editor, click the Apps market icon (or press A) in the left sidebar.

2. Find Predictive Search — Search for "Predictive Search" or browse the list. Published by Foxify, available on all plans.

3. Install the extension — Click Install extension. Once installed it appears under Installed Apps.

Part 2 — Add the Search element to your page

1. Open Add elements — Click Add elements (or press E).

2. Go to App blocks — Click App blocks → find Predictive Search under Installed Apps → select the Search block.

3. Drag onto your canvas — Place it wherever you want the search input to appear.

4. Configure — In Inspector → General tab, set number of results and layout.

5. Style — Switch to Design tab to style each layer.

6. Preview and publish — Check mobile preview, then Save & Publish.

Expected result: A search input appears on your page. As customers type, real-time suggestions appear showing matching products, collections, pages, and articles — without a page reload.

Settings — General

Setting	What it does	When to use
Number of results to show	How many suggestions appear in the dropdown	3–5 recommended. More results can feel overwhelming on mobile.
Layout	Controls the search input display style	Input — full text field with search icon. Best for most layouts.

For more control over what appears in results, use the Shopify Search & Discovery app alongside Predictive Search.

Settings — Design

4 layers you can style independently:

• Element container — outer wrapper: width, padding, background, borders

• Input — search text field: background, border, text color, font, spacing

• Icon search — default state of the search icon: size, color, spacing

• Icon search text hover — icon on hover: set a different color to signal interactivity

FAQs

Do I need to install anything before using this element?

Yes — install the Predictive Search extension from Apps market first. Then the Search element becomes available under Add elements → App blocks.

What does Predictive Search show in results?

Products, collections, pages, and articles matching what the customer is typing — in real time.

Can I control which products appear in results?

Yes — use Shopify Search & Discovery to customize rankings, synonyms, and product visibility.

Is it available on all plans?

Yes — available on all Foxify plans at no extra cost.