Documentación

Shopify

Agrega tu agente a cualquier tienda de Shopify pegando el código de incrustación en tu tema.

Agrega tu agente de IA a una tienda de Shopify pegando el código de incrustación en el archivo theme.liquid de tu tema. Funciona con todos los planes de Shopify.

Primero, obtén tu código de incrustación desde Chatbot > Publicar en el panel.

Método 1: editar theme.liquid (recomendado)

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.

Formato de ejemplo (usa los valores reales de Chatbot > Publicar):

<script
  src="YOUR_WIDGET_URL"
  data-chatbot="YOUR_CHATBOT_ID"
  async
></script>

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

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.

Método 3: pega el código en una página específica

Para agregar el widget solo a una página (por ejemplo, una página de soporte):

  1. En el panel de administración de Shopify, ve a Online Store → Pages.
  2. Abre la página que quieras editar.
  3. Haz clic en el ícono <> (Show HTML) del editor de contenido.
  4. Pega tu código de incrustación al final del contenido.
  5. Save.

El widget solo se cargará en esa página.

Requisitos

  • El tema que edites debe ser un tema publicado o de pago. El código de un tema de prueba no se puede guardar.
  • El dominio de tu tienda debe estar en la lista de dominios permitidos de tu agente si tienes activadas las restricciones de dominio.

Después de publicar

Shopify sirve los recursos de la tienda desde su CDN. Los cambios se propagan en uno o dos minutos. Si no ves el widget:

  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).
  • Confirma que el snippet esté antes de </body> y no dentro de <head>.
  • Verifica que el dominio de tu tienda esté permitido en Chatbot > Publicar > Seguridad.

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.

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