# Predictive search

![](https://docs-assets.foxecom.app/foxify-app/c1dc9e2d-6ca4-4903-95ae-a2ae39b24212.png)

Add a search icon or search bar to your page, with product suggestions shown as shoppers type. Shoppers see matching products, collections, pages, and articles instantly, without waiting for a results page to load.

Available on all Foxify plans.

## Add Predictive search to your page

1. In the FoxStudio editor, open **Apps market** (**A**) and install **Predictive Search**.
2. Open **Add elements** (**E**) > **App blocks**, then find **Predictive Search** under **Installed apps**.
3. Drag the **Search** block onto your page.

New to app extensions? See [Overview](https://docs.foxecom.com/foxify-app/integrations/overview) for the full steps.

<Hint type="info">
  To make search available across your Foxify pages, add it to your header in [Layout templates](https://docs.foxecom.com/foxify-app/foxstudio/editor-tools/layout-template) instead of a single page.
</Hint>

## Settings

Select the Search block on your canvas to open its settings in the Inspector.

### General

<Table widths="30%">
  | Setting                       | What it does                                                                                                                                                             |
  | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
  | **Number of results to show** | How many suggestions appear as shoppers type.                                                                                                                            |
  | **Layout**                    | How search appears on your page.<br />**Input** shows a full search bar. <br />**Icon seach** shows only a search icon, and the search bar opens when shoppers click it. |
  | **Button text**               | Add a button label beside the search icon if needed. *Available when the Layout is set as Icon search.*                                                                  |
  | **Button icon position**      | Choose to display the icon before/ after the text. *Available when the Layout is set as Icon search.*                                                                    |
</Table>

### Design

You can style each part of the block separately:

* **Element container:** width, padding, background, and borders of the whole block.
* **Input:** background, border, text color, font, and spacing of the search bar.
* **Icon search:** size, color, and spacing of the search icon.
* **Icon search text hover:** icon color on hover, to show shoppers it's clickable.

## What shoppers see

As shoppers type, a dropdown shows matching **products, collections, pages, and articles** in real time. Selecting a result takes them straight to that page.

![](https://docs-assets.foxecom.app/foxify-app/dfc83e68-5e46-4ced-b65a-ac20d1cf1db9.png)

<Hint type="info" title="Want more control over search results?">
  Use Shopify's [Search & Discovery app](https://apps.shopify.com/search-and-discovery) to set synonyms, boost products, or hide items from results. Predictive Search uses the same settings automatically.
</Hint>

## FAQs

#### What shows up in the search suggestions?

Products, collections, pages, and articles that match what shoppers type.

#### Can I control which products appear in results?

Yes. Use Shopify's Search & Discovery app to set synonyms, boost products, or hide items from search.