Search

Search lleva la búsqueda de productos de Dialog a la experiencia de búsqueda de tu tienda. En lugar del matching por palabras clave de Shopify, tus visitantes reciben sugerencias de productos ordenadas por IA mientras escriben, y una página de resultados impulsada por IA al enviar la búsqueda.

Se compone de tres piezas que puedes instalar de forma independiente desde el editor de themes de Shopify:

Pieza	Qué hace	Dónde vive
Autocompletado de búsqueda	Añade sugerencias de productos de Dialog al formulario de búsqueda existente de tu theme	Toggle de app embed
Dialog search bar	Un campo de búsqueda listo para colocar: barra completa o icono compacto que se despliega, ideal para el header	App block
Dialog search results	Sustituye la cuadrícula de resultados nativa de tu página `/search` por productos ordenados por Dialog, con live search y paginación	App block (solo template search)

Antes de empezar

Instala primero la app de Shopify de Dialog: Search viene con ella.
Los bloques de barra de búsqueda y de resultados requieren un theme Online Store 2.0 (app blocks).
Elige tu configuración:
- Mantener la barra de búsqueda de tu theme → activa solo el app embed de autocompletado.
- Sustituir o añadir un campo de búsqueda → usa el bloque Dialog search bar (autocompletado incluido).
- En ambos casos, añade el bloque Dialog search results para servir resultados ordenados por IA en /search.

Activar el autocompletado en la búsqueda de tu theme

Esta opción mejora el formulario de búsqueda que tu theme ya muestra, sin cambios de layout.

En tu admin de Shopify, ve a Tienda online → Themes → Personalizar.
Abre Integraciones de apps (App embeds, en la barra lateral izquierda del editor de themes).
Busca el embed de Dialog y activa Enable Dialog search autocomplete.
Guarda.

Cuando un visitante escribe en tu campo de búsqueda, un panel de sugerencias de Dialog se abre bajo el input con los productos coincidentes. Escape o un clic fuera lo cierra.

Dos comportamientos que conviene conocer:

La búsqueda nativa siempre se conserva. Enviar el formulario sigue ejecutando la búsqueda normal de tu tienda: Dialog solo añade la capa de sugerencias. (Para que la propia página de resultados pase a IA, añade el bloque de resultados.)
El panel se adapta a tu theme. El radio de las esquinas, el fondo y el color del texto se derivan del input de búsqueda de tu theme, para que las sugerencias parezcan nativas.

Dialog detecta automáticamente el formulario de búsqueda de tu theme. Si tu theme está muy personalizado y las sugerencias nunca aparecen, define Search form CSS selector en el mismo app embed para apuntar a tu formulario (por ejemplo form[action="/search"]). Si no, déjalo vacío.

Añadir el bloque de barra de búsqueda

El app block Dialog search bar te da un campo de búsqueda con el autocompletado de Dialog incluido: no necesitas el toggle del app embed para él.

En el editor de themes, selecciona la sección donde quieres la barra (tu header, una fila de anuncios o cualquier sección).
Haz clic en Añadir bloque y elige Dialog search bar.
Elige el ajuste Display y guarda.

Ajuste	Qué hace
Display	Full search bar: el input siempre está visible. Search icon: un icono compacto; al hacer clic, una banda de búsqueda a ancho completo se despliega sobre la fila donde está (como la búsqueda de header nativa de Shopify), con un botón de cierre. Escape la cierra.
Placeholder	Placeholder opcional del input. Déjalo vacío para usar la traducción integrada de Dialog en el idioma de la tienda (inglés, francés, español, alemán, italiano).

Enviar la barra navega a tu página /search con la consulta. Si JavaScript no está disponible, la variante de icono se convierte en un simple enlace a /search: la búsqueda nunca se rompe.

Añadir el bloque de resultados de búsqueda

El bloque Dialog search results convierte tu página /search en una página de resultados impulsada por IA. Solo está disponible en el template search.

En el editor de themes, usa el selector de templates (barra superior) para abrir el template Búsqueda.
Haz clic en Añadir sección (o Añadir bloque dentro de la sección de resultados) y elige Dialog search results.
Ajusta Products per page y guarda.

Ajuste	Qué hace
Products per page	Tamaño de la cuadrícula por página: de 6 a 48 productos, 12 por defecto.

Lo que ven tus visitantes:

una cuadrícula de productos ordenada por Dialog, con añadir al carrito en cada tarjeta,
live search: cuando la página aloja una barra de búsqueda de Dialog, la cuadrícula se actualiza mientras escriben, y el parámetro ?q= se mantiene sincronizado para que la URL sea compartible,
paginación numerada,
estados de carga, vacío y error.

Para evitar resultados duplicados, el bloque oculta la cuadrícula de resultados nativa de tu theme y el panel de búsqueda predictiva en esa página. Si el runtime de Dialog no puede cargar, los resultados nativos del theme siguen visibles: tus visitantes siempre obtienen resultados.

Verifica tu instalación

En tu tienda:

Escribe en el campo de búsqueda → aparecen las sugerencias de productos de Dialog.
Envía una consulta → /search muestra la cuadrícula de productos de Dialog (y una sola cuadrícula).
Añade un producto al carrito desde una tarjeta de resultado → tu carrito se actualiza.
Cambia de página con la paginación → la cuadrícula y la URL se actualizan.

Si las sugerencias nunca aparecen, revisa el toggle del app embed y consulta Dialog no es visible.

Relacionado

Instalar Dialog en Shopify: la instalación de la app en la que se apoya esta función.
Smart Discovery: las superficies proactivas del asistente (modal y AI Bar).
Verificar tu instalación: las comprobaciones de extremo a extremo.
Componentes React: Búsqueda en la storefront: la misma Search como componentes React listos para usar.
Componentes Vue: Búsqueda en la storefront: la variante Vue.