Cómo instalar el agente en Shopify

Dónde insertar el código en el tema de Shopify, cómo el agente lee el catálogo de la tienda, qué hacer con el carrito y el pago, y cómo verificar la instalación.

6 de septiembre de 2026

Shopify ya cuenta con un catálogo en formato legible por máquina, por eso el agente recopila los productos con mayor precisión que en cualquier otro lugar: los precios, variantes, disponibilidad y fotos provienen directamente de la tienda.

Paso 1. Inserta el código en el tema#

1. En el panel de administración de Shopify, abre Online Store → Themes.
2. En el tema activo, haz clic en … → Edit code.
3. En la lista de archivos, busca layout/theme.liquid.
4. Inserta la línea de código de tu panel de control justo antes de la etiqueta de cierre </body>.
5. Guarda.

Alternativa sin editar el tema: Online Store → Preferences → Custom code o cualquier aplicación para insertar scripts. El resultado es el mismo.

    <!-- Commerce Agents -->
`<script src="https://comag.vibevox.pro/widget.js" data-slug="tu-slug" async></script>`
  </body>
</html>

Obtén la línea exacta en tu panel de control con el botón «Copiar código»: ya incluye la dirección de tu tienda.

Paso 2. Recopila el catálogo#

En la configuración, indica la dirección de la tienda e inicia el análisis. El rastreador de Shopify lee los datos estructurados de los productos: nombre, precio, moneda, disponibilidad, descripción y fotos. Las variantes (tallas, colores) aparecen en la ficha como características.

Un nuevo análisis actualiza los precios y la disponibilidad. Ejecútalo después de cambios importantes en el surtido: el agente no se conecta directamente a tu base de datos, sino que trabaja con el catálogo recopilado.

Paso 3. Deja el pago a la tienda#

En Shopify, no es necesario activar el pago en el chat. El esquema correcto es:

1. En la configuración de la tienda, indica el enlace al carrito, normalmente https://tu-dominio/cart.
2. El agente selecciona el producto, muestra la ficha y, mediante un botón, lleva al comprador al carrito de Shopify.
3. El proceso de compra y pago sigue el camino habitual, con todas tus reglas de envío e impuestos.

Para ver qué diálogos terminan en compra, inserta el fragmento del píxel de compra en la página de agradecimiento. En Shopify, esto es Settings → Checkout → Order status page → Additional scripts. El fragmento con la sustitución del número de pedido y el importe se encuentra en tu panel de control, en la sección «Widget y enlace».

El producto se añade al carrito sin interrumpir la conversación#

Aquí Shopify se destaca sobre otras plataformas. El agente muestra fichas de productos con foto, precio y un botón, pero este botón no solo lleva a la página, sino que añade el producto al carrito de la tienda.

Funciona así: el enlace del producto de Shopify contiene un identificador de variante, y el agente lo envía a tu propio carrito a través de la interfaz estándar /cart/add.js. La página no se recarga, el diálogo no se interrumpe, el comprador ve una breve confirmación y sigue eligiendo. El producto ya está en el carrito de Shopify, con todas tus reglas de descuentos, impuestos y envío.

Si no hay una variante en el enlace, el agente abre la ficha del producto y el comprador lo añade por sí mismo. Nada se rompe, solo es un clic más.

Cuando el usuario está listo, el botón «Ir a la compra» lleva a /cart, donde ya está todo preparado. A partir de ahí, es la caja habitual de Shopify.

Y un apunte sobre el contexto: el agente lee los datos estructurados de la página donde se abre el chat. El comprador mira un producto específico y pregunta «¿lo tienen en talla L?»; el agente entiende a qué se refiere sin necesidad de preguntar de nuevo.

• Abre la tienda en modo incógnito, espera a que aparezca el botón del chat.
• Pregunta por un producto por su nombre; debería aparecer una ficha con el precio.
• Haz clic en «Ir a la compra»; debería abrirse el carrito de Shopify.
• Realiza un pedido de prueba y asegúrate de que la compra se registre en «Solicitudes».

Chat a juego con la tienda#

El tema de Shopify marca el estilo de toda la tienda, y el chat no debería desentonar. En la configuración del widget hay tres opciones: claro, oscuro y «como el del visitante», que sigue la configuración del dispositivo del comprador.

Para tiendas con tema oscuro, configura el oscuro de forma fija; para las claras, el claro. El color de acento de los botones sigue siendo el tuyo en ambos casos.

Paso 4. Comprueba#

Problemas frecuentes#

• El widget desapareció después de cambiar el tema. El código reside en el archivo del tema. Un cambio o actualización del tema borra la modificación; inserta el código de nuevo o usa Custom code, que no depende del tema.
• El catálogo no se recopiló por completo. El rastreo toma productos de páginas públicas. Los productos ocultos del catálogo y los borradores no se incluyen, lo cual es correcto.
• Los precios del catálogo están desactualizados. Ejecuta el análisis del sitio de nuevo; actualizará los precios y la disponibilidad de las fichas existentes.
• El widget entra en conflicto con la aplicación de chat. Deja un solo chat: dos ventanas en la misma esquina se estorban y confunden al comprador.

Preguntas frecuentes#

¿Se necesita una aplicación de Shopify App Store?#

No. El agente se conecta con una sola línea de código, no es necesario instalar ninguna aplicación.

¿Puede el agente mostrar variantes de productos?#

Sí, las variantes aparecen en la ficha como características: talla, color, volumen. El comprador elige la variante específica en el carrito de Shopify.

¿Qué pasa con varias monedas?#

El agente muestra los precios en la moneda del catálogo, que determina durante el rastreo. La funcionalidad multimoneda de Shopify opera más adelante, en el carrito y el pago.

¿Conocerá el agente el stock disponible?#

La disponibilidad se toma en el momento del análisis. Para productos que se agotan con frecuencia, ejecuta el análisis más a menudo o añade una línea en las condiciones indicando que la disponibilidad se confirma al finalizar la compra.

¿Afecta el widget a la velocidad de la tienda?#

El script se carga de forma asíncrona y no bloquea el renderizado. Esto prácticamente no afecta a las métricas de Core Web Vitals.