Cómo instalar un mapa de calor en tu tienda Shopify (sin necesidad de app, con una sola línea de código)

Resumen del artículo

• Añadir un mapa de calor a Shopify solo requiere pegar una línea de código en theme.liquid, sin necesidad de instalar ninguna app
• Duplica siempre tu tema como respaldo antes de editar. Los cambios surten efecto en cuanto guardas, a diferencia de STUDIO, aquí no hay un paso separado de republicación
• Las páginas de pago no ejecutan el código del tema, por lo que no se rastrean. El éxito se mide por un aumento real del contador en el panel de HeatMapX, no simplemente por la ausencia de errores

¿Te preguntas si puedes añadir un mapa de calor a tu tienda Shopify sin instalar ninguna app? Puedes. Shopify te permite pegar una sola línea de código de etiqueta directamente en tu tema, sin necesidad de ninguna app. Esta guía repasa el paso de respaldo que siempre debes hacer primero, cómo añadir la etiqueta, cómo confirmar que funciona y algunos aspectos a los que debes prestar atención.

Paso 1: Obtén tu clave de sitio

Primero, regístrate en HeatMapX (hay un plan gratuito disponible), registra tu tienda y obtén tu clave de sitio. No se requiere tarjeta de crédito.

Una vez que tengas tu clave de sitio, usa la etiqueta de abajo, reemplazando YOUR_SITE_KEY con la clave real que se te proporcionó.

<script src="https://heatmapx.com/tracker.js" data-site-key="YOUR_SITE_KEY"></script>

Pasos: añadir la etiqueta a theme.liquid

1. (Obligatorio) Duplica tu tema como respaldo

Antes de editar código directamente, siempre duplica tu tema actual primero. En tu panel de administración de Shopify, ve a Tienda online → Temas, busca tu tema publicado, haz clic en el menú "…" (acciones) y elige Duplicar. Esto te da una copia segura a la que volver si algo sale mal. Saltarte este paso significa que no tendrás forma de deshacer una edición equivocada.

2. Abre el editor de código

1. En tu panel de administración de Shopify, ve a Tienda online → Temas
2. En tu tema publicado, haz clic en el menú "…" (acciones) y elige Editar código
3. Se abrirá un explorador de archivos de tu tema en el lado izquierdo

3. Añade la etiqueta dentro de layout/theme.liquid

1. En la lista de archivos, abre la carpeta "Layout" y haz clic en theme.liquid
2. Busca </head> en el archivo y pega la etiqueta de arriba justo antes
3. Guarda el archivo

4. Guardar es todo lo que se necesita, no hace falta volver a publicar

En Shopify, editar el código del tema surte efecto en el momento en que lo guardas. A diferencia de STUDIO, no existe un paso separado de "publicar" o "volver a publicar". En cuanto guardas, tu tienda en vivo ya tiene la etiqueta cargada.

Cómo confirmar que realmente está funcionando

Una vez que hayas añadido la etiqueta, navega por algunas páginas de tu propia tienda. Pero aquí está la parte importante.

Que una página cargue sin errores no es lo mismo que el seguimiento realmente esté funcionando. Aunque la consola de tu navegador no muestre ningún problema, una clave de sitio mal escrita o una etiqueta pegada en el lugar equivocado pueden significar que los datos nunca lleguen a HeatMapX.

La única comprobación fiable es abrir el panel de HeatMapX, buscar tu sitio en la lista de sitios y confirmar que su contador realmente ha aumentado. Después de visitar algunas páginas (páginas de producto, páginas de colección, etc.), si el contador aumenta, tu instalación está funcionando.

Aspectos a los que prestar atención

Las páginas de pago no se rastrean

La etiqueta que añadiste a theme.liquid se ejecuta en tu escaparate (la página de inicio, páginas de producto, páginas de colección y el carrito), pero no se ejecuta en las páginas de pago (las páginas de pago bajo /checkouts/). El proceso de pago está alojado directamente por Shopify, de forma separada de tu tema, y el código del tema de theme.liquid nunca se carga ahí. Si no ves datos de las páginas de pago en tu panel, es el comportamiento esperado, no un error.

Cambiar de tema significa volver a añadir la etiqueta

La etiqueta solo existe en el archivo theme.liquid del tema que editaste. Si más adelante cambias a un tema diferente (publicas un tema nuevo), su theme.liquid no llevará la etiqueta automáticamente. Cada vez que cambies de tema, repite los mismos pasos para añadir la etiqueta al tema nuevo.

Preguntas frecuentes

P. ¿Esto ralentizará mi tienda? R. La etiqueta se carga de forma asíncrona y es ligera, por lo que el impacto en la velocidad de carga de la página es mínimo.

P. Añadí la etiqueta, pero el contador del panel no aumenta R. La causa más común es una clave de sitio no coincidente: pegar la clave de otro sitio, o que se pierda un carácter al copiarla. Comprueba también que las páginas que estás probando sean páginas del escaparate (inicio, producto, colección) y no páginas de pago, ya que el pago nunca se rastrea.

Para terminar

Añadir un mapa de calor a Shopify se reduce a pegar una línea de código en theme.liquid, sin necesidad de ninguna app. Empezar con HeatMapX es gratis, así que pruébalo y descubre cómo interactúan realmente los compradores con tu tienda.