Código de botón de WhatsApp para temas de Shopify

Por qué la misma respuesta sirve para Dawn, Sense, Refresh, Craft, Studio y Ride

Los temas gratuitos de Shopify están construidos sobre la arquitectura Online Store 2.0. Comparten un mismo archivo de diseño, theme.liquid, que envuelve todas las páginas, y todos admiten integraciones de aplicaciones (app embeds), el mecanismo que permite a una app añadir un elemento flotante sin tocar tu código. Sense, Refresh, Craft, Studio y Ride son variaciones del código base de Dawn, así que un botón que funciona en Dawn funciona también en ellos.

Eso te da dos vías. La vía A usa una integración de app y no necesita código. La vía B es un fragmento que pegas una sola vez en theme.liquid, o en una sección Liquid personalizado si solo lo quieres en ciertas plantillas. Las dos abren el mismo enlace de chat wa.me; la diferencia está en lo que ocurre alrededor.

• Shopify Help Center: ampliar el tema con apps (app embeds)
• shopify.dev: diseños del tema y theme.liquid

Vía A: sin código, con una integración de app

Es la vía que recomendamos para la mayoría de las tiendas, y la que explicamos paso a paso en nuestra guía del tema Dawn. Instala WhatsApp Pilot, guarda tu código de país, tu número y tu mensaje predeterminado en Configuración, luego abre Tienda online → Temas → Personalizar, haz clic en el icono de Integraciones de aplicaciones (App embeds) y activa WhatsApp Pilot. Guarda y el botón ya está en la tienda. El plan gratuito lo muestra en la página de inicio; Pro lo muestra en las páginas de producto, colección, carrito y demás, con visibilidad por dispositivo y el saludo emergente.

Los pasos son idénticos en Sense, Refresh, Craft, Studio y Ride porque el panel de Integraciones de aplicaciones pertenece al editor de temas, no a un tema en particular. Si más adelante cambias de tema, vuelve a activar la integración en el tema nuevo; los ajustes de la app se conservan tal como estaban.

Vía B: el fragmento para copiar y pegar

Antes de empezar, duplica tu tema desde Tienda online → Temas para tener una copia de seguridad, como aconseja la propia guía de Shopify sobre editar el código del tema. Después abre el editor de código (menú de tres puntos → Editar código), busca layout/theme.liquid y baja hasta la etiqueta de cierre de body, cerca del final. Pega las líneas siguientes justo encima, sustituye el número de ejemplo por el tuyo en formato internacional (primero el código de país, sin el signo más ni espacios) y guarda.

Cada línea es corta para que se pegue sin problemas. Los valores de los atributos usan comillas simples a propósito; Liquid y HTML las aceptan. El texto del enlace y el mensaje de ejemplo están en inglés: cámbialos por los tuyos.

1. <a class='wa-float' href='https://wa.me/962790000000?text=Hi%2C%20I%20have%20a%20question%20about%20your%20store' target='_blank' rel='noopener'>Chat on WhatsApp</a>
2. <style>
3. .wa-float { position: fixed; bottom: 20px; right: 20px; z-index: 999; }
4. .wa-float { background: #25D366; color: #fff; font: 600 15px/1 sans-serif; }
5. .wa-float { padding: 14px 18px; border-radius: 999px; text-decoration: none; }
6. .wa-float { box-shadow: 0 4px 14px rgba(0,0,0,.2); }
7. .wa-float:hover { background: #1ebe5d; color: #fff; }
8. html[dir='rtl'] .wa-float { right: auto; left: 20px; }
9. @media (max-width: 749px) { .wa-float { bottom: 76px; right: 12px; } }
10. @media (max-width: 749px) { html[dir='rtl'] .wa-float { right: auto; left: 12px; } }
11. </style>

• Shopify Help Center: editar el código del tema
• Servicio de ayuda de WhatsApp: cómo usar la función de clic para chatear (enlaces wa.me)

Configurar el número, el texto prellenado y la posición

• Número: los dígitos después de wa.me/ son tu número de WhatsApp en formato internacional. Un número de Jordania 079 000 0000 se convierte en 962790000000. Quita el signo más, el cero inicial y los espacios.
• Texto prellenado: todo lo que va después de ?text= es el mensaje que el comprador ve antes de enviar. Debe estar codificado para URL, así que un espacio se convierte en %20 y una coma en %2C. El generador gratuito de enlaces en /es/tools/whatsapp-link-generator de este sitio construye la URL completa por ti, incluida la codificación.
• Posición: bottom y right controlan el desplazamiento en escritorio. Si el panel del carrito de tu tema o una barra fija de agregar al carrito se superpone al botón, aumenta bottom o pasa el botón a la izquierda cambiando right por left.
• Móvil: la media query de 749px coincide con el punto de quiebre que usan los temas de la familia Dawn. El margen inferior mayor mantiene el botón por encima de una barra fija o de la barra del navegador en teléfonos. Ajusta el número después de probar en un dispositivo real.
• Tiendas RTL: cuando tu tema se muestra con dir='rtl', las reglas html[dir='rtl'] pasan el botón a la izquierda. Si tu tienda en árabe no define ese atributo, borra las dos líneas rtl y usa left en lugar de right directamente.
• Solo en algunas páginas: pega el mismo fragmento en una sección Liquid personalizado de la plantilla que quieras (por ejemplo, la plantilla de producto) en lugar de en theme.liquid. Así solo aparece donde existe esa sección.

Fragmento o app: a qué renuncias con cada uno

Notas por tema

• Dawn y Craft: el panel del carrito se abre desde la derecha. Deja el botón a la izquierda, o súbelo para que no tape el botón de pagar.
• Sense y Refresh: los dos usan un encabezado fijo prominente y, en móvil, una barra fija de agregar al carrito en las páginas de producto. Prueba una página de producto en un teléfono antes de decidir el margen inferior.
• Studio y Ride: los esquemas de color oscuros o de alto contraste pueden hacer que el verde predeterminado se vea estridente. Conserva el verde de WhatsApp en el botón y cambia solo el tono al pasar el cursor si hace falta.
• Temas Online Store 2.0 de pago: el mismo fragmento funciona, pero el punto de quiebre móvil puede ser distinto. Revisa el CSS del tema para ver el ancho de su propia media query e iguálalo.
• Checkout: ninguna de las dos vías puede colocar un botón en las páginas de checkout. Shopify no permite código del tema ni integraciones de app ahí.

Probar antes de seguir

1. Abre la tienda en un navegador de escritorio y confirma que el botón está donde esperas en la página de inicio, en una página de producto y en el carrito.
2. Tócalo desde un teléfono. WhatsApp debería abrirse con tu número y el texto prellenado; si no, revisa primero los dígitos después de wa.me/.
3. Envíate el mensaje de prueba y responde, para comprobar que el traspaso funciona en los dos sentidos.
4. Si usaste la app, abre Analíticas al día siguiente y comprueba que se están contando los toques. El fragmento no informa de nada, y esa es la razón principal por la que las tiendas que quieren cifras pasan después a la app.