Instalar Dialog en Shopify

Esta guía es para merchants cuya tienda corre en Shopify — si es tu caso, la app Shopify es siempre la instalación correcta, sea cual sea tu theme. Ve a tu back office de Shopify, busca Dialog en la Shopify App Store, instala la app y sigue el onboarding.

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

El app block no se renderiza correctamente

Un theme puede estar etiquetado como Online Store 2.0 y aun así no soportar app blocks correctamente en su sección de producto. Si el block de Dialog aparece en el editor del theme pero falta en el storefront — o se renderiza fuera de la zona de producto / dentro de un wrapper genérico Apps — la sección no soporta del todo los app blocks de Shopify.

Para que el block se renderice siquiera, la sección de producto debe soportar explícitamente los app blocks: declarar un block {"type": "@app"} en su schema y además renderizarlo de verdad con {% content_for 'blocks' %} o {% render block %}, dentro del layout de producto. Una sección que declara @app pero nunca renderiza los blocks aceptará Dialog en el editor pero no mostrará nada en el storefront.

Pide a tu desarrollador de theme que arregle la sección de producto, o recurre al snippet manual más abajo. Ver El app block está añadido, pero no se renderiza correctamente para el diagnóstico completo.

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.

Añade las claves de traducción

instant.liquid muestra sus etiquetas mediante las claves de traducción de Shopify ({{ 'blocks.instant.…' | t }}), así que debes añadir una clave blocks a los archivos de idioma de tu theme (locales/*.json) — de lo contrario el widget muestra etiquetas vacías. Añade esto a locales/en.default.json:

{
  "blocks": {
    "instant": {
      "ask-anything": "Ask anything...",
      "your-expert": "Your expert",
      "any-question": "Any questions on this product?",
      "diagnostic-cta": "Make your personal diagnostic"
    },
    "ai-input": {
      "your-question": "Ask your question"
    }
  }
}

Luego añade la versión traducida a cada archivo de idioma que tengas — por ejemplo locales/fr.json:

{
  "blocks": {
    "instant": {
      "ask-anything": "Posez n'importe quelle question...",
      "your-expert": "Votre expert",
      "any-question": "Une question sur ce produit ?",
      "diagnostic-cta": "Faites votre diagnostic personnel"
    },
    "ai-input": {
      "your-question": "Posez votre question"
    }
  }
}

Ú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">

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. Pasa primero por las comprobaciones de Problemas al añadir al carrito; si el snippet estándar no basta, es pegamento específico del theme que escribimos por ti — escribe a paul@askdialog.com con el nombre de tu theme, normalmente resuelto en 48 horas.

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.