# Predictive search

![image](https://docs-assets.foxecom.app/foxify-app/image_ITelNyAY.png)

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.

![image](https://docs-assets.foxecom.app/foxify-app/image_frtxJPBj.png)

#### **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. |

<Hint type="info">

For more control over what appears in results, use the [Shopify Search & Discovery](https://apps.shopify.com/search-and-discovery) app alongside Predictive Search.

</Hint>

## 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.