HelpStackDocs

Integraciones

Primeros pasos con Shopify

Conecta tu tienda Shopify para que la IA y los agentes de HelpStack puedan responder preguntas sobre pedidos, seguimiento y productos, y mostrar opcionalmente un widget de chat en vivo en tu tienda.

Qué obtienes#

Consulta de pedidosLa IA responde "¿Dónde está mi pedido?" y "¿Cuál es el número de seguimiento?" usando datos en vivo de Shopify
Preguntas sobre productosLos compradores preguntan sobre productos; la IA obtiene los detalles directamente de tu tienda
Historial del clienteLos agentes ven el total de pedidos, el estado de envío y el historial de gasto en la barra lateral de la conversación
Widget en la tiendaUna burbuja de chat opcional en tu tienda para que los clientes pregunten sin salir de la página

No se necesitan conocimientos técnicos. Los pasos siguientes toman entre 10 y 15 minutos y no requieren más que navegar por unas cuantas páginas de ajustes.

Paso 1 — Conecta tu tienda#

  1. En tu panel de HelpStack, ve a Ajustes → Integraciones.
  2. Encuentra la tarjeta de Shopify y haz clic en Conectar Shopify.
  3. Escribe el dominio .myshopify.com de tu tienda, por ejemplo your-store.myshopify.com, y haz clic en Conectar.
  4. Se te redirigirá a Shopify. Haz clic en Install (o Approve) para dar a HelpStack acceso de solo lectura a tus pedidos, clientes y productos.
  5. Volverás a HelpStack con un estado verde de Conectado.

Eso es todo. A partir de aquí, los agentes ven un panel de Pedidos en la barra lateral de cada conversación, y la IA puede responder preguntas sobre pedidos y productos.

Paso 2 — Permite el acceso a datos de pedidos y clientes (una vez)#

Shopify exige una aprobación aparte antes de que cualquier app pueda leer los detalles de pedidos y clientes. Hasta que esto se complete, las preguntas de pedidos responderán "acceso restringido"; las preguntas de productos funcionan sin necesidad de ello.

  1. Abre el Partner Dashboard de Shopify en dev.shopify.com e inicia sesión.
  2. Haz clic en Apps en la barra lateral izquierda y selecciona la app HelpStack.
  3. Ve a API access (o App setup → API access).
  4. Busca Protected customer data access y haz clic para abrirlo.
  5. Activa el objeto Order y marca Name, Email y Phone.
  6. Como motivo, escribe: customer service — agents look up order status for shoppers.
  7. Haz clic en Save y espera la aprobación de Shopify (normalmente instantánea para apps nuevas en desarrollo).

Esto solo lo haces una vez. El permiso es a nivel de app y se mantiene entre actualizaciones.

Paso 3 — Muestra el widget de chat en tu tienda (opcional)#

Este paso añade una burbuja de chat a tu tienda Shopify para que los compradores puedan preguntar sin salir de la página. Sáltate este paso si solo quieres que la IA responda preguntas que lleguen por otros canales (correo, Instagram, etc.).

3a — Activa el widget en HelpStack

  1. Ve a Ajustes → Integraciones y abre la sección Widget en la tienda.
  2. Activa el interruptor Activar widget en la tienda.
  3. En Canal predeterminado, elige el canal de Chat web que quieras usar. (Crea uno primero en Ajustes → Canales si aún no lo has hecho.)
  4. Opcionalmente, añade filas por idioma: los compradores cuyo navegador esté configurado en ese idioma se dirigirán a un canal distinto. Los idiomas no asignados usan el canal predeterminado.
  5. Haz clic en Guardar.

3b — Añade el widget a tu tema

Elige uno de los dos métodos siguientes:

Opción A — App embed (recomendado, sin código)

El método App embed te permite activar y desactivar el widget desde el editor de temas de Shopify con un solo clic. No hace falta cambiar código. Funciona con todos los temas Online Store 2.0.

  1. En tu administrador de Shopify, ve a Online Store → Themes.

  2. Junto a tu tema activo, haz clic en el icono de lápiz (Edit) o en Customize.

    Administrador de Shopify: Online Store → Edit theme
    Administrador de Shopify: Online Store → Edit theme

  3. En el editor de temas que se abre, busca la sección App embeds en la barra lateral izquierda (tiene un icono de pieza de puzzle, hacia el final).

  4. Busca HelpStack Chat en la lista y actívalo (ON).

    Activar el App embed de HelpStack Chat en el editor de temas
    Activar el App embed de HelpStack Chat en el editor de temas

  5. Haz clic en Save, en la esquina superior derecha del editor de temas.

La burbuja de chat aparece de inmediato en tu tienda.

Opción B — Fragmento manual

Usa esta opción si tu tema no admite App embeds (temas Debut o Brooklyn antiguos).

  1. En HelpStack, ve a Ajustes → Integraciones y copia el fragmento que aparece en la sección Widget en la tienda. Se ve así:

    <script src="https://helpstack.eu/api/shopify/storefront-widget.js?shop=your-store.myshopify.com" async></script>

  2. En tu administrador de Shopify, ve a Online Store → Themes → Edit code.

  3. Abre theme.liquid (dentro de la carpeta Layout).

  4. Pega el fragmento justo antes de la etiqueta de cierre </body>.

  5. Haz clic en Save.

Solución de problemas#

ProblemaQué revisar
El widget de chat no aparece en la tienda¿Guardaste en HelpStack (Paso 3a)? ¿Está App embed activado (ON) y guardado en el editor de temas (Opción A)? ¿O está el fragmento pegado antes de </body> (Opción B)?
La IA responde "acceso restringido" en preguntas de pedidosCompleta el Paso 2: falta o está pendiente el permiso de Protected customer data
Los compradores de un idioma concreto ven el canal equivocadoAñade una fila para ese idioma en Ajustes → Integraciones → Widget en la tienda
El widget carga pero muestra el idioma equivocadoEl mapeo de idioma usa el idioma del navegador del comprador. Añade una fila para ese código de idioma en los ajustes del widget en la tienda

Relacionado#

Editar esta página en GitHub