Ir al contenido

Dialog no es visible

Si el widget Dialog no se muestra en tu tienda, la solución depende de la vía de instalación. Salta a la sección que corresponda — y si no sabes qué vía usa tu tienda, identifícala primero: todas las comprobaciones de abajo dependen de ella.

Estas verificaciones aplican solo a tiendas Shopify (instalación vía la app Shopify — Online Store 2.0 o theme legacy).

  • El embed de Dialog está activado. En el customizer del theme Shopify, verifica la sección Embed apps (arriba a la izquierda).
  • El app block está añadido al template de la página de producto. Edita tu theme, abre el template de producto, verifica que el app block Dialog está presente.
  • Sin conflictos de CSS. Abre los devtools del navegador en la página de producto e inspecciona la zona del widget. Algo puede estar ocultándolo (display: none, visibility: hidden, conflicto de z-index).

El app block está añadido, pero no se renderiza correctamente

Sección titulada «El app block está añadido, pero no se renderiza correctamente»

Añadiste el app block de Dialog en el editor del theme de Shopify, pero en el storefront no se renderiza en absoluto o se renderiza en el lugar equivocado. Señales típicas:

  • es visible en el editor pero está completamente ausente en la página de producto en vivo
  • aparece arriba o abajo de la zona de producto esperada
  • se renderiza en un wrapper genérico Apps en vez de dentro de la sección de producto
  • la ubicación en el storefront no coincide con la ubicación de sección que elegiste en el editor

Normalmente es un problema del theme, no de Dialog. Un theme puede parecer Online Store 2.0 y aun así no soportar app blocks correctamente en su sección de producto. El editor te deja añadir el block en cuanto el schema de la sección lo permite, pero el block solo se renderiza si el Liquid de la sección realmente genera los app blocks.

La causa más común es una llamada de render que falta. Si la sección de producto nunca incluye {% content_for 'blocks' %} (o un {% render block %} por block), el block se acepta en el editor pero no se renderiza en ningún sitio en el storefront — es el caso que más a menudo se confunde con un bug de Dialog. Si esa llamada de render existe pero está fuera del layout de producto, el block se renderiza en el lugar equivocado.

Según los requisitos de app blocks de Shopify, la sección de producto debe:

  • declarar un block genérico de {"type": "@app"} en su schema — para que el editor pueda añadir el block
  • renderizar realmente esos blocks con {% content_for 'blocks' %} o {% render block %} — para que aparezcan en el storefront
  • mantener esa llamada de render dentro del layout de producto, no en una sección renderizada estáticamente aparte

Verificación rápida. En el editor del theme, abre el template de producto e intenta añadir Dialog dentro de la sección de producto principal — no como sección de nivel superior — después guarda y previsualiza el storefront. Si Dialog falta en el storefront aunque esté añadido dentro de la sección de producto, la sección declara blocks @app sin renderizarlos. Si solo cae en el lugar equivocado, la llamada de render existe pero está fuera del layout de producto. En cualquier caso, el theme no soporta del todo los app blocks para esa zona.

Qué hacer después — elige una vía:

  • Arreglo del theme / agencia. Pide a tu desarrollador de theme que actualice la sección de producto para que soporte correctamente los app blocks de Shopify (referencia Shopify). Debe confirmar que la sección relevante declara {"type": "@app"} en su schema, que realmente renderiza esos blocks con {% content_for 'blocks' %} (no solo los declara), y que no depende de un patrón de sección estática para esa ubicación.
  • Fallback al snippet manual de Dialog. Si el theme no puede soportar los app blocks correctamente, usa la integración manual del theme de Dialog (instant.liquid, instant.js, instant.css). Es el fallback recomendado para themes legacy, themes parcialmente compatibles, y themes custom que exponen app blocks en el editor pero no los renderizan correctamente en el storefront.
  • El módulo Dialog está activado en Module Manager.
  • La configuración del módulo muestra API keys válidas (re-pega si dudas).
  • Abre una página de producto con los devtools del navegador y confirma que el tag script de Dialog está en el HTML.
  • El tag Dialog está publicado en tu contenedor GTM (no solo en preview).
  • El trigger del tag matchea el pattern de URL de tus páginas de producto.
  • Dialog Product ID resuelve a un valor real en la página (panel Variables en preview GTM).
  • El componente (<DialogProductBlock>, <DialogInput>) está renderizado en la página — confirma en tu consola de dev.
  • El SDK fue instanciado con una API key pública válida.
  • El productId que pasas matchea un producto en tu catálogo subido.