Documentación

Shopify

Instala el widget Agentkit en un tema de Shopify con el código generado completo.

Añade el widget de Agentkit a tu tienda Shopify colocando el código de inserción completo y generado en theme.liquid.

En Agentkit, abre Canales → Incrustar en sitio web → Widget de chat, activa el canal y copia el código completo. Contiene dos etiquetas de script: una de inicialización en línea y otra de carga asíncrona. Conserva ambas. Shopify recomienda duplicar el tema antes de editar el código.

Método 1: editar theme.liquid

Agrega el widget a todo el sitio editando tu tema publicado:

  1. En el panel de administración de Shopify, ve a Online Store → Themes.
  2. En la fila de tu tema activo, haz clic en el menú ... (Actions) → Edit code.
  3. En la carpeta Layout, a la izquierda, abre theme.liquid.
  4. Desplázate hasta el final y pega tu código de incrustación justo antes de la etiqueta de cierre </body>.
  5. Haz clic en Save.

Pega el código copiado sin modificarlo. Después de guardar, comprueba que las dos etiquetas <script> aparezcan en el código fuente de la tienda publicada.

El widget aparece en todas las páginas de la tienda: producto, colección, carrito e inicio.

Método 2: duplica primero y luego edita (recomendado)

Si quieres tener una forma segura de revertir los cambios:

  1. Online Store → Themes.
  2. En tu tema activo, haz clic en el menú ... (de tres puntos) → Duplicate. Aparecerá una copia al final de la lista de temas.
  3. Edita el archivo theme.liquid del duplicado como se explicó antes.
  4. Haz clic en el menú ... del duplicado → Preview para probarlo.
  5. Cuando estés conforme, haz clic en el menú ... → Publish para activarlo.

Instalación en una sola página

Si quieres mostrar el widget solo en una página, pide a un desarrollador de temas que limite ambas etiquetas generadas a una plantilla de página. Comprueba que aparezcan allí y no en otras páginas. El editor de texto enriquecido de Pages no es una vía de instalación verificada para este widget.

Requisitos

  • Necesitas acceso al código del tema. No se puede editar un tema de pago en período de prueba hasta comprarlo. Tu función debe tener permisos de Themes y Edit code. Consulta la guía de Shopify para editar temas.
  • Mantén activado el canal Widget de chat de Agentkit al probar la tienda pública.
  • Si hay restricciones de dominio, permite el origen exacto de la vista previa del tema y el de la tienda activa. Elimina el origen temporal de vista previa después de probar.

Después de publicar

Si el widget no aparece en la tienda pública:

  1. Haz una recarga forzada de la página (⌘+Shift+R en Mac, Ctrl+F5 en Windows).
  2. Abre el sitio en una ventana de incógnito.
  3. Revisa la consola del navegador en busca de errores.

Solución de problemas

El widget no aparece.

  • Confirma que hayas editado el tema activo (o publicado el duplicado).
  • Comprueba que las dos etiquetas de script generadas estén antes de </body> en el código fuente de la tienda.
  • Verifica que las restricciones de dominio de Agentkit permitan el dominio de tu tienda.

El widget se superpone con el chat de Shopify o con el panel del carrito.

  • Ajusta la posición del widget en los ajustes de Diseño de tu agente.

El widget aparece en el editor, pero no en la tienda activa.

  • Asegúrate de haber hecho clic en Save después de pegar el código; el editor de código no guarda automáticamente.

Pruebas

  1. Abre tu tienda en una ventana de incógnito.
  2. Busca la burbuja de chat en la esquina.
  3. Haz clic para abrirla y envía un mensaje de prueba.
  4. Comprueba que ambas etiquetas de script generadas estén en el código fuente de la página.

Conectar una tienda para consultar pedidos y buscar productos

Incrustar el widget y conectar tu tienda son dos cosas independientes. El código de incrustación de arriba coloca el widget de chat en tu tienda. Una conexión de Shopify aparte —hecha desde la pestaña Acciones → Integraciones de tu agente— además le permite al agente buscar en tu catálogo en vivo y consultar el estado de un pedido dentro de la conversación.

Puedes usar cada una por su cuenta. Usa solo la incrustación si el agente debe responder únicamente con tu contenido de entrenamiento, y agrega la conexión de la tienda cuando quieras datos de productos y pedidos en vivo.

Conectar la tienda proporciona las credenciales, pero no activa nada por sí sola: después, agrega las acciones Buscar productos y Obtener el estado del pedido en la pestaña Acciones de tu agente, y activa cada una que quieras que el agente use.

Configura las acciones de Shopify →

Próximos pasos