Si tienes una tienda en Shopify, sabes que las aplicaciones son un arma de doble filo. Por un lado, añaden funcionalidades necesarias, pero por otro, ralentizan tu web y llenan tu factura mensual de micro-pagos.
Uno de los elementos más comunes es el botón de WhatsApp. ¿Realmente necesitas pagar 5€ o 10€ al mes por algo que puedes programar tú mismo en 10 minutos? La respuesta es NO.
En este artículo te enseño cómo usar Google AI Studio para crear un botón de WhatsApp “PRO” que supera a la mayoría de apps de la App Store.
El problema de las Apps de WhatsApp tradicionales
La mayoría de las aplicaciones de WhatsApp para Shopify inyectan scripts externos que:
- Afectan al WPO: Retrasan la carga de la página (LCP y CLS).
- Son rígidas: No siempre puedes elegir cómo se comportan en móvil vs. escritorio.
- Coste acumulado: A final de año, has pagado más de 60$ por un simple enlace de chat.
La Solución: Programación asistida por Inteligencia Artificial
Gracias a herramientas como Google AI Studio (Gemini), ya no necesitas ser un experto en código Liquid o JavaScript. El secreto está en saber dar las instrucciones (Prompts) adecuadas.
Paso 1: Configurar el entorno de seguridad
Antes de tocar el código, siempre debemos trabajar con red de seguridad:
- Ve a tu panel de Shopify > Tienda Online > Temas.
- Haz clic en los tres puntos y elige Duplicar.
- Trabaja siempre sobre la copia para no afectar a tu tienda en vivo.
Paso 2: El sistema de Doble Prompt
Para este tutorial, no lanzamos un código genérico. Utilizamos una metodología de refinamiento:
- Prompt de Estructura: Creamos la base funcional con el número de teléfono y el icono.
Prompt 1: “Vamos a configurar un botón de WhatsApp en la tienda online, una burbuja redonda flotante en la esquina inferior derecha, me das el código para implementarlo el teléfono de España 0034 XXXXXXXXX y con el logotipo oficial Whatsapp”.
- Prompt PRO: Le pedimos a la IA que añada “inteligencia” al botón. Queremos que sea una burbuja en PC, pero que se convierta en un faldón inferior en móvil con el texto “¿Necesitas ayuda?”.
Prompt 2: Basándote en el botón de WhatsApp básico que hemos creado vamos a generar ahora una versión ‘Pro’ mucho más avanzada, y necesito un nuevo código.
- Estructura Modular: El código debe estar listo para un snippet llamado whatsapp-pro.liquid.
- Comportamiento Dual (CSS): > – En Desktop (más de 768px): Debe ser una burbuja redonda flotante en la esquina inferior derecha.
- En Mobile (menos de 768px): Debe transformarse en una barra ancha (faldón) que ocupe el ancho total en la parte inferior con el texto ‘¿Necesitas ayuda?’.
- Lógica de Scroll Inteligente (JavaScript):
- El botón debe ocultarse automáticamente cuando el usuario hace scroll hacia abajo (para no tapar el contenido).
- El botón debe reaparecer inmediatamente cuando el usuario hace scroll hacia arriba o cuando deja de mover la pantalla por más de 600ms.
- Optimización: Asegúrate de que el script sea ligero para no interferir con las ‘View Transitions’ del tema.
Personalización: Usa variables CSS al principio del código para poder cambiar el color verde y el número de teléfono fácilmente.”
Paso 3: Lógica de Scroll Inteligente
Un botón PRO no debe molestar. Hemos programado una lógica para que el botón se oculte automáticamente cuando el usuario hace scroll hacia abajo (para que pueda ver tus productos sin obstáculos) y reaparezca cuando el usuario deja de mover la pantalla o hace scroll hacia arriba.
Beneficios Técnicos de este Método
- Código Modular: Se instala como un Snippet independiente (
whatsapp-pro.liquid), manteniendo tu tema limpio. - Cero Latencia: Al ser código nativo, la carga es instantánea.
- Personalización Total: Puedes cambiar colores y el número de teléfono directamente desde las variables CSS que hemos preparado.
¿Quieres implementar esto en tu tienda?
He preparado un documento público con los Prompts exactos que he utilizado en el vídeo para que solo tengas que copiar, pegar y dejar que la IA trabaje por ti.
👉 https://docs.google.com/document/d/1o9UcDFFjOV6zru_3w-fSiTjLwS0xRxJ6_BhDKGbdBPA/edit?usp=sharing
El futuro del e-commerce no es instalar más apps, sino tener una tienda más ligera y eficiente. Aprender a usar la IA para personalizar tu Shopify es la habilidad más rentable que puedes adquirir este año.
¿Necesitas ayuda para optimizar tu tienda o eliminar apps innecesarias? No dudes en contactarme para una consultoría técnica.
¿Te gustaría que adapte este artículo para publicarlo también como una Newsletter o un hilo de X (Twitter)?
