Tabla de contenidos
Respuesta corta: Crea un widget gratuito de WAButton, copia su código de inserción y pégalo justo antes de la etiqueta de cierre
</body>en el archivotheme.liquidde tu tema de Shopify. No necesitas una aplicación ni ningún código.
Un botón de WhatsApp da a los compradores una manera de preguntar sobre tallas, tiempos de envío o el pago antes de comprar, y de preguntar a una persona en lugar de rellenar un formulario.
Muchas aplicaciones de chat de Shopify cobran una cuota mensual y añaden sus propios scripts a tu tienda. Si solo necesitas un botón, puedes pegar uno en tu tema en su lugar.
Esta guía te muestra cómo añadir un botón de chat de WhatsApp a tu tema de Shopify, gratis y sin una aplicación.
Cómo se diferencia WhatsApp de un widget de chat en vivo
Con un widget de chat en vivo, la conversación normalmente vive en la pestaña del navegador. Si el visitante lo cierra antes de que tu equipo responda, puede que nunca vea la respuesta.
Un botón de clic para chatear de WhatsApp funciona de manera diferente en dos aspectos:
- La conversación permanece en su teléfono: El chat se mueve a la propia aplicación de WhatsApp del comprador. Cuando tu equipo responde, el comprador recibe una notificación en su teléfono.
- El primer mensaje puede estar escrito para ellos: Puedes configurar el mensaje para que cuando el comprador toque el botón, WhatsApp se abra con el producto ya nombrado (p. ej., _"Hola, tengo una pregunta sobre [Nombre del Producto]").
Si también vendes en otras plataformas, consulta nuestro Directorio de Integraciones CMS para guías paso a paso sobre WordPress, WooCommerce, Webflow y Squarespace.
Paso a paso: Cómo añadir el botón de WhatsApp a tu tema de Shopify
No necesitas conocimientos de codificación para añadir WAButton a tu tema de Shopify. El fragmento es independiente y no tiene dependencias de librerías.
Paso 1: Crea tu widget en el panel de WAButton
- Crea una cuenta gratuita en WAButton, o inicia sesión en tu panel si ya tienes una.
- Crea un widget e introduce tu número de teléfono de WhatsApp Business en formato internacional E.164 (p. ej.
+14155552671sin espacios, guiones ni ceros a la izquierda). - Configura un mensaje predefinido atractivo, como este:
¡Hola! Estoy mirando tu tienda y tengo una pregunta sobre mi pedido. - En el editor del widget, abre Share & install > Website install y copia tu código de inserción. Ya contiene el ID de tu widget, así que funciona en cuanto lo pegues.
Paso 2: Abre el editor de código de tu tema de Shopify
- Inicia sesión en tu panel de Admin de Shopify.
- En la barra lateral de navegación izquierda, ve a Tienda online > Temas.
- Localiza tu tema activo actual (p. ej., Dawn, Sense, Refresh o Impact).
- Haz clic en el botón de tres puntos (
...) junto a Personalizar y selecciona Editar código.
Paso 3: Pega el código de inserción en theme.liquid
- En la lista de archivos de la izquierda, abre la carpeta
Layouty haz clic entheme.liquid. - Desplázate hasta la parte inferior del archivo hasta que encuentres la etiqueta de cierre
</body>. - Justo antes de la etiqueta
</body>, pega tu código de inserción de WAButton:
<!-- WAButton WhatsApp Widget -->
<script src="https://widget.wabutton.app/v1.js" data-widget-id="YOUR_WIDGET_ID" async></script>
<!-- Fin WAButton WhatsApp Widget -->
- Haz clic en Guardar en la esquina superior derecha.
¡Eso es todo! Visita la URL de tu tienda en vivo en ordenador y móvil para probar el widget. Al hacer clic, abrirá WhatsApp Web en navegadores de escritorio o iniciará la aplicación nativa de WhatsApp en los teléfonos inteligentes.
Avanzado: Cómo añadir un botón de formulario de pedido de WhatsApp en las páginas de producto
Si tienes una tienda boutique, una marca de ropa personalizada o un catálogo mayorista, es posible que quieras que los clientes envíen pedidos directamente por WhatsApp en lugar de pasar por el proceso de pago estándar.
Usando nuestro Generador de Formularios de Pedido de WhatsApp gratuito, puedes crear consultas de pedido estructuradas que se autocompletan:
- SKU y título del producto
- Variante seleccionada (talla, color, material)
- Dirección de entrega y código postal
- Método de pago preferido (Contra reembolso, Transferencia bancaria, Stripe)
Esto puede ser adecuado para mercados donde tus clientes ya esperan hacer pedidos por WhatsApp.
Por qué un script pequeño importa
Core Web Vitals miden cómo carga una página y cómo se mantiene estable, incluyendo Largest Contentful Paint (LCP) y Cumulative Layout Shift (CLS). Google recomienda apuntar a buenas puntuaciones.
Las aplicaciones de chat de terceros pueden cargar sus propios scripts, fuentes y hojas de estilo en cada página, y eso añade trabajo al navegador.
WAButton mantiene una huella pequeña:
- Sin dependencias: JavaScript simple e iconos SVG.
- Carga asíncrona (
async): El script se descarga en paralelo y no bloquea tus imágenes de producto y texto de renderizado. - Sin cambio de diseño por el botón: Flota en una posición fija, así que tu página no salta mientras carga.
Lee nuestra Guía de Integración de Shopify dedicada para más consejos de configuración y para enviar toques de botón a Google Analytics 4 y Meta Pixel.
Preguntas frecuentes
¿Puedo mostrar el botón de WhatsApp solo durante el horario comercial?
Sí. Puedes configurar reglas de visibilidad programadas o personalizar los mensajes automáticos de ausencia con nuestro Generador de Mensajes de Ausencia de WhatsApp gratuito para establecer expectativas cuando tu equipo está fuera de línea.
¿Funciona en todos los temas de Shopify?
Sí. El código de inserción es HTML5 estándar y funciona en todos los temas de Shopify Online Store 2.0 (Dawn, Refresh, Craft, Studio, Publisher) así como en los temas vintage heredados.
¿Necesito una cuenta de la API de WhatsApp Business?
No. WAButton funciona con números personales estándar de WhatsApp, cuentas de la aplicación WhatsApp Business y números oficiales de la API de WhatsApp Cloud.
¿Quieres más formas de usar WhatsApp en tu tienda? Lee WhatsApp para Tiendas Online o prueba nuestro Generador de Enlaces de WhatsApp gratuito.
Fuentes
- Comprender los Core Web Vitals y los resultados de Google, Google Search Central
- Cómo usar el clic para chatear, Centro de Ayuda de WhatsApp
Deja que los visitantes de tu sitio web te escriban por WhatsApp.
Añade un botón flotante, elige sus colores y su saludo, y responde en la aplicación de WhatsApp que ya usas.
WAButton es un botón para sitios web. No vendemos acceso a la API de WhatsApp ni una bandeja de entrada compartida, así que nada de esto depende de que los compres.
Escrito por Equipo de WAButton