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#

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.

¿Acabas de registrarte? Si dijiste durante la incorporación que vendes en Shopify, el paso de instalación conecta tu tienda por ti y termina con un clic en el editor de temas, así que puedes saltarte los pasos 1 y 3 de abajo.

Facturación. Una tienda Shopify conectada paga HelpStack a través de Shopify, en la página de precios de la app en tu panel de Shopify, así que nunca pagas dos veces. A las tiendas que aún no están conectadas se les pide conectarse antes de elegir un plan.

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.

Aquí el correo no es opcional. HelpStack compara el correo del pedido con el que da el comprador antes de leer nada en voz alta (consulta "Cómo protegen a tus clientes las consultas de pedidos" más abajo). Sin el campo Email marcado en el paso 5, la IA no puede confirmar que el pedido pertenece a quien pregunta, así que informará de que no encontró ningún pedido coincidente.

Cómo protegen a tus clientes las consultas de pedidos#

Cualquiera puede abrir la burbuja de chat de tu tienda, y los números de pedido suelen ir en secuencia — 1001, 1002, 1003 — así que un número de pedido por sí solo no demuestra nada. Por eso HelpStack lo trata como media respuesta:

• Para consultar un pedido concreto, la IA necesita el número de pedido y el correo con el que se realizó. Si el comprador solo ha dado el número, el asistente pide el correo antes de buscar nada.
• Si los dos no coinciden, se le dice al comprador que no se encontró ningún pedido coincidente. No se le dice que el pedido existe pero el correo es incorrecto, porque eso ya confirmaría que el pedido de otra persona es real.
• El historial del cliente (número de pedidos, gasto total) solo se muestra para la persona de esa conversación. A la IA no se la puede convencer de sacar el de otra persona.
• "Buscar mis pedidos por correo" sigue funcionando igual que antes: quien da su dirección recibe sus propios pedidos.

Tu equipo no se ve afectado. El panel de Pedidos de la barra lateral es para agentes que han iniciado sesión y miran tu propia tienda, así que sigue mostrando todo lo que mostraba antes.

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.

   

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).

   

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#

Relacionado#

• Inserción del widget
• Herramientas de agente personalizadas
• Primeros pasos con WooCommerce
• Guía de canales