Como Instalar um Heatmap na Sua Loja Shopify (Sem Precisar de App, Apenas Uma Linha de Código)

Resumo do artigo

Adicionar um heatmap ao Shopify exige apenas colar uma única linha de código no theme.liquid — sem necessidade de instalar um app

Sempre duplique seu tema como backup antes de editar. As alterações entram em vigor assim que você salva — diferente do STUDIO, não há uma etapa separada de republicação

As páginas de checkout não executam código do tema, então não são rastreadas. O sucesso é medido pelo aumento real da contagem no painel do HeatMapX — não apenas pela ausência de erros

Está se perguntando se é possível adicionar um heatmap à sua loja Shopify sem instalar um app? É possível sim. O Shopify permite colar uma linha de código de tag diretamente no seu tema, sem necessidade de app. Este guia explica a etapa de backup que você sempre deve fazer primeiro, como adicionar a tag, como confirmar que está funcionando e alguns pontos de atenção.

Passo 1: Obtenha Sua Chave de Site

Primeiro, cadastre-se no HeatMapX (há um plano gratuito disponível), registre sua loja e obtenha sua chave de site. Não é necessário cartão de crédito.

Depois de obter sua chave de site, use a tag abaixo, substituindo YOUR_SITE_KEY pela chave real que você recebeu.

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

Passos: Adicionar a Tag ao theme.liquid

1. (Obrigatório) Duplique seu tema como backup

Antes de editar código diretamente, sempre duplique seu tema atual primeiro. No admin do Shopify, acesse Loja Online → Temas, encontre o tema publicado, clique no menu "…" (ações) e escolha Duplicar. Isso fornece uma cópia segura para a qual você pode reverter caso algo dê errado. Pular essa etapa significa que você não terá como desfazer uma edição feita por engano.

2. Abra o editor de código

No admin do Shopify, acesse Loja Online → Temas
No tema publicado, clique no menu "…" (ações) e escolha Editar código
Um navegador de arquivos do seu tema será aberto à esquerda

3. Adicione a tag dentro de layout/theme.liquid

Na lista de arquivos, abra a pasta "Layout" e clique em theme.liquid
Procure no arquivo por </head> e cole a tag acima logo antes dela
Salve o arquivo

4. Salvar já é suficiente — não é preciso republicar

No Shopify, editar o código do tema entra em vigor no momento em que você salva. Diferente do STUDIO, não há uma etapa separada de "publicar" ou "republicar". Assim que você salva, sua loja ao vivo já está com a tag carregada.

Como Confirmar Que Está Realmente Funcionando

Depois de adicionar a tag, navegue por algumas páginas na sua própria loja. Mas aqui está o ponto importante.

Uma página carregar sem erros não é a mesma coisa que o rastreamento estar realmente funcionando. Mesmo que o console do seu navegador não mostre nenhum problema, uma chave de site digitada incorretamente ou uma tag colada no lugar errado pode significar que nenhum dado está chegando ao HeatMapX.

A única verificação confiável é abrir o painel do HeatMapX, encontrar seu site na lista de sites e confirmar que a contagem realmente aumentou. Depois de visitar algumas páginas — páginas de produto, páginas de coleção etc. — se a contagem aumentar, sua instalação está funcionando.

Pontos de Atenção

As páginas de checkout não são rastreadas

A tag que você adicionou ao theme.liquid é executada na sua loja (storefront) — página inicial, páginas de produto, páginas de coleção e carrinho — mas não é executada nas páginas de checkout (as páginas de pagamento em /checkouts/). O checkout é hospedado diretamente pelo Shopify, separadamente do seu tema, e o código do tema em theme.liquid nunca é carregado ali. Se você notar que não há dados para páginas de checkout no seu painel, isso é o comportamento esperado, não um bug.

Trocar de tema significa adicionar a tag novamente

A tag só existe no arquivo theme.liquid do tema que você editou. Se mais tarde você trocar para um tema diferente (publicar um novo tema), o theme.liquid desse tema não trará a tag automaticamente. Sempre que trocar de tema, repita os mesmos passos para adicionar a tag ao novo tema.

Perguntas Frequentes

P. Isso vai deixar minha loja mais lenta? R. A tag carrega de forma assíncrona e é leve, então o impacto na velocidade de carregamento da página é mínimo.

P. Adicionei a tag, mas a contagem no painel não está aumentando R. A causa mais comum é uma chave de site incorreta — colar a chave de outro site, ou algum caractere se perder ao copiar. Verifique também se as páginas que você está testando são páginas da loja (início, produto, coleção) e não páginas de checkout, já que o checkout nunca é rastreado.

Concluindo

Adicionar um heatmap ao Shopify se resume a colar uma linha de código no theme.liquid — sem necessidade de app. O HeatMapX é gratuito para começar, então experimente e veja como os clientes estão realmente vivenciando sua loja.