Instalar Search en Shopify

Esta página instala Search en una tienda Shopify. Sigue la pestaña Instalación de la página Search de la app de Dialog: una checklist de tres pasos, cada uno hecho en el editor de themes de Shopify.

Activar el autocompletado de la búsqueda: las sugerencias de productos de Dialog en el campo de búsqueda que tu theme ya tiene.
Añadir la página de resultados de búsqueda: los resultados de Dialog en tu página /search.
Añadir una barra de búsqueda (opcional): solo si tu theme no tiene campo de búsqueda.

Antes de empezar

Instala primero la app de Shopify de Dialog: Search viene con ella.
La página de resultados y la barra de búsqueda son app blocks: requieren un theme Online Store 2.0.
Trabaja en tu theme publicado. La checklist abre el editor de themes en él, y solo comprueba ese theme.

Abrir la checklist de instalación

En la app de Dialog, abre Search en la navegación (en En tu tienda) y luego la pestaña Instalación. La página Search se abre en esta pestaña mientras quede un paso por hacer.

https://app.askdialog.com/organization/{your-org-slug}/search-settings?tab=setup

La checklist Instale Search en su tema enumera los pasos en orden. Cada fila indica en qué punto está:

Abrir el editor de temas: el paso sigue pendiente. El botón abre el editor de themes en una pestaña nueva, en el sitio correcto.
Un mensaje de espera: abriste el editor y Dialog espera a tu theme. Guarda en Shopify y vuelve: Dialog comprueba tu theme por sí solo.
Detectado en su tema publicado: el paso está hecho.

Activar el autocompletado de la búsqueda

Este paso añade las sugerencias de productos de Dialog al campo de búsqueda que tu theme ya muestra, sin cambios de layout.

En la pestaña Instalación, en la fila Activar el autocompletado de la búsqueda, haz clic en Abrir el editor de temas. El editor de tu theme publicado se abre en Integraciones de apps (App embeds), con el embed Dialog AI Modal activado.
En el embed Dialog AI Modal, marca Enable Dialog search autocomplete. La casilla está desmarcada por defecto en cada theme: activar el embed no basta.
Guarda y vuelve a la app de Dialog: la fila muestra Detectado en su tema publicado.

El mismo embed contiene los demás ajustes del autocompletado:

Ajuste	Qué hace
Search suggestions style	Dialog search overlay (por defecto): una capa de búsqueda se abre sobre la página en cuanto el campo recibe el foco, con los colores del embed. Panel under the theme’s input: las sugerencias se abren bajo tu campo mientras el visitante escribe, con su apariencia.
Overlay products layout	List (por defecto) o Grid: la disposición de los productos en el overlay. Sin efecto en el panel.
Search form CSS selector (optional)	Déjalo vacío: Dialog encuentra solo el formulario de búsqueda de tu theme. Defínelo solo si las sugerencias nunca aparecen en un theme muy personalizado: consulta Las sugerencias no aparecen bajo el campo de búsqueda.

Enviar el formulario sigue ejecutando la búsqueda normal de tu tienda: Dialog solo añade las sugerencias. Para servir los resultados de Dialog en la propia página de resultados, añade la página de resultados.

Añadir la página de resultados de búsqueda

Este paso convierte tu página /search en una página de resultados de Dialog, con el bloque Dialog search results. El bloque solo está disponible en el template Búsqueda.

En la pestaña Instalación, en la fila Añadir la página de resultados de búsqueda, haz clic en Abrir el editor de temas. El editor de themes se abre en tu template Búsqueda, con el bloque Dialog search results ya añadido.
Ajusta Products per page si quieres y guarda.
Vuelve a la app de Dialog: la fila muestra Detectado en su tema publicado.

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 con los resultados de Dialog, con añadir al carrito en cada tarjeta,
live search: escribir en el formulario de búsqueda de tu theme en la página de resultados actualiza la cuadrícula, 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.

Añadir una barra de búsqueda

En la pestaña Instalación, la fila Añadir una barra de búsqueda está marcada Opcional: añade el bloque Dialog search bar solo si tu theme no tiene campo de búsqueda. La fila no tiene botón hacia el editor de themes y nunca se marca: añades el bloque tú mismo, donde lo quieras.

En tu admin de Shopify, ve a Tienda online → Themes → Personalizar y 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).

La barra trae el autocompletado incluido: no necesita Enable Dialog search autocomplete, pero sigue el ajuste Search suggestions style del embed Dialog AI Modal. 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.

Verifica tu instalación

En la pestaña Instalación, las dos primeras filas muestran Detectado en su tema publicado. Luego, en tu tienda:

Haz clic o 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 algo no funciona, consulta Solucionar problemas de Search.

Relacionado

Vista general de Search: qué hace Search y las condiciones de la beta.
Ajustes de Search: las demás pestañas de la página Search, para ajustar los campos de búsqueda, los sinónimos, los productos fijados y las colecciones.
Solucionar problemas de Search: sugerencias, página de resultados, barra de búsqueda del header, productos que faltan.
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.
Instalar Search en una storefront headless: la misma Search como componentes de React y Vue, un search controller del SDK y un endpoint REST.