Search

Search brings Dialog’s product search to your storefront’s search experience. Instead of Shopify’s keyword matching, visitors get AI-ranked product suggestions as they type, and an AI-powered results page when they submit.

It is made of three building blocks you can install independently through the Shopify theme editor:

Block	What it does	Where it lives
Search autocomplete	Adds Dialog product suggestions to your theme’s existing search form	App embed toggle
Dialog search bar	A drop-in search field: a full bar or a compact icon that expands, ideal for headers	App block
Dialog search results	Replaces the native results grid on your /search page with Dialog-ranked products, live search, and pagination	App block (search template only)

Search vs. AI Bar

The Smart Discovery AI Bar is an entry point into the Dialog assistant conversation. Search is different: it powers your store’s product search (suggestions and results), no chat involved.

Custom or headless storefront?

This page covers the Shopify app blocks. Building your own storefront? The same AI search ships as drop-in components: React and Vue.

Before you start

• Install the Dialog Shopify app first: Search ships with it.
• The search bar and search results blocks require an Online Store 2.0 theme (app blocks).
• Pick your setup:
  • Keep your theme’s search bar → enable the autocomplete app embed only.
  • Replace or add a search field → use the Dialog search bar block (autocomplete built in).
  • Either way, add the Dialog search results block to serve AI-ranked results on /search.

Enable autocomplete on your theme’s search

This option enhances the search form your theme already renders, with no layout change.

1. In your Shopify admin, go to Online Store → Themes → Customize.
2. Open App embeds (in the left sidebar of the theme editor).
3. Find the Dialog embed and turn on Enable Dialog search autocomplete.
4. Save.

As a visitor types in your search field, a Dialog suggestions panel opens under the input with matching products. Pressing Escape or clicking outside closes it.

Two behaviors worth knowing:

• Native search is always preserved. Submitting the form still runs your store’s normal search: Dialog only adds the suggestions layer. (To make the results page itself AI-powered, add the search results block.)
• The panel adapts to your theme. Corner radius, background, and text color are derived from your theme’s search input, so the suggestions look native.

Search form CSS selector (optional)

Dialog detects your theme’s search form automatically. If your theme is heavily customized and the suggestions never appear, set Search form CSS selector in the same app embed to point at your form (for example form[action="/search"]). Leave it blank otherwise.

Add the search bar block

The Dialog search bar app block gives you a search field with Dialog autocomplete built in: you don’t need the app embed toggle for it.

1. In the theme editor, select the section where you want the bar (your header, an announcement row, or any section).
2. Click Add block and pick Dialog search bar.
3. Choose the Display setting and Save.

Setting	What it does
Display	Full search bar: the input is always visible. Search icon: a compact icon; clicking it expands a full-width search band over the row it sits in (like Shopify’s native header search), with a close button. Escape closes it.
Placeholder	Optional input placeholder. Leave blank to use Dialog’s built-in translation for the storefront language (English, French, Spanish, German, Italian).

Submitting the bar navigates to your /search page with the query. If JavaScript is unavailable, the icon variant simply links to /search, so search never breaks.

Header doesn’t accept the block?

Some theme headers don’t support app blocks, so Dialog search bar won’t appear in the header’s Add block list. That’s a theme limitation: the header section must declare and render @app blocks. Ask your theme developer to add support, or place the block in a section right below the header. See App block isn’t rendering correctly.

Add the search results block

The Dialog search results block turns your /search page into an AI-powered results page. It is only available on the search template.

1. In the theme editor, use the template selector (top bar) to open the Search template.
2. Click Add section (or Add block inside the search results section) and pick Dialog search results.
3. Adjust Products per page and Save.

Setting	What it does
Products per page	Grid size per page: 6 to 48 products, default 12.

What visitors get:

• a product grid ranked by Dialog, with add-to-cart on each card,
• live search: when the page hosts a Dialog search bar, the grid updates as they type, and the ?q= parameter stays in sync so the URL is shareable,
• numbered pagination,
• loading, empty, and error states.

To avoid showing results twice, the block hides your theme’s native results grid and predictive search panel on that page. If the Dialog runtime cannot load, your theme’s native results remain visible, so visitors always get results.

Verify your install

On your storefront:

1. Type in the search field → Dialog product suggestions appear.
2. Submit a query → /search shows the Dialog product grid (and only one grid).
3. Add a product to the cart from a result card → your cart updates.
4. Change page with the pagination → the grid and URL update.

If suggestions never appear, re-check the app embed toggle and see Dialog not visible on store.

Related

• Install Dialog on Shopify: the app install this feature builds on.
• Smart Discovery: proactive assistant surfaces (modal and AI Bar).
• Verify your install: end-to-end install checks.
• React components: Storefront search: the same AI search as drop-in React components.
• Vue components: Storefront search: the Vue flavor.