Instalar Dialog en Shopify

Ve a tu back office de Shopify y busca Dialog en la Shopify App Store. Instala Dialog y sigue el onboarding.

Si algo te bloquea, escribe a paul-arthur@askdialog.com.

La app Shopify cubre las dos preocupaciones: sincroniza tu catálogo automáticamente (ingestión de data) y aporta el embed frontend para tu theme. Cómo funciona el embed depende de tu theme:

Theme Online Store 2.0 → usa el app block en el customizer del theme.
Theme legacy (< Online Store 2.0) → pega el snippet instant.liquid de Dialog más los archivos JS / CSS en tu theme manualmente.
Shopify headless (Hydrogen o storefront custom) → instala la app para la sincro del catálogo, después embed el asistente en tu frontend vía el SDK o los componentes React / Vue. El app block no se puede usar fuera del renderer Online Store.

Theme compatible con Online Store 2.0

Es el camino fácil. Añade el app block de Dialog a tu página de producto desde el customizer del theme de Shopify. Sigue el onboarding in-app después de instalar la app — te guía paso a paso.

Walkthrough en inglés
Walkthrough en francés

Theme no compatible con Online Store 2.0

Si tu theme no es compatible con Online Store 2.0, no puedes usar app blocks. Tendrás que añadir los snippets de Dialog manualmente.

También tendrás que activar el script de Dialog en el customizer Shopify (sección Embed apps, arriba a la izquierda).

Descarga los snippets

instant.liquid Colócalo en la carpeta snippets/ de tu theme.

instant.js Colócalo en la carpeta assets/ de tu theme.

instant.css Colócalo en la carpeta assets/ de tu theme.

Úsalos en tu theme

Renderiza el snippet instant donde quieres que aparezca el widget en tu página de producto:

{% render "instant" %}

Incluye el JS y el CSS:

<script src="{{ 'instant.js' | asset_url }}" defer="defer" type="module"></script>
<link rel="stylesheet" href="{{ 'instant.css' | asset_url }}" type="text/css" media="all">

¿Necesitas ayuda? Escribe a support@askdialog.com.

Verifica el refresh de la UI del carrito

Es lo que más a menudo se rompe en Shopify. Después de la instalación, abre Dialog en una página de producto y añade un producto — asegúrate de que tu icono del carrito / burbuja / mini-cart se actualiza sin recargar. Si no, es un pegamento específico del theme que gestionamos por ti en menos de 48 h — escribe a support@askdialog.com con el nombre del theme. Ver Problemas al añadir al carrito para la historia completa.

Shopify headless (Hydrogen, storefronts custom)

Si tu storefront no se renderiza vía el Online Store (Hydrogen, frontend custom Next.js / Remix / Nuxt, app móvil), la app Shopify sigue gestionando la sincro del catálogo — instálala normalmente. Pero el app block no se renderiza en tu frontend custom porque es una extensión del Online Store.

Para el embed frontend en un setup headless:

React / Hydrogen → usa @askdialog/dialog-react.
Vue / Nuxt → usa @askdialog/dialog-vue.
Otro (Svelte, templating server-side, vanilla JS) → usa @askdialog/dialog-sdk.

Conectarás los callbacks addToCart y getProduct contra la Storefront API (o cualquier API de carrito / producto que ya uses). Ver la sección developers para el setup completo.

Siguiente paso

Una vez instalada la app, verifica tu instalación para asegurarte de que todo funciona de extremo a extremo.