Skip to content
Chatsac Tools

Guia · Shopify · BR + LATAM + global

Botão flutuante WhatsApp no Shopify: guia rápido (2026)

Instale um botão WhatsApp no seu Shopify sem app pago, sem plano Plus. Só um snippet no theme.liquid, e está no ar.

Por que colocar um botão WhatsApp no Shopify

O checkout do Shopify é excelente globalmente, mas no Brasil o comprador ainda quer confirmar detalhes por WhatsApp antes de bater o cartão — prazo real de entrega, disponibilidade em tamanho específico, forma de frete. Sem um canal direto e visível, o carrinho vira abandono.

Apps da loja Shopify de chat via WhatsApp existem (Tidio, JivoChat, WhatsApp Button by Softpulse) mas quase todos cobram após 14 dias, adicionam 40-200KB ao bundle da loja (ruim pra Core Web Vitals) e exigem conta em serviço de terceiros. O snippet do Chatsac Tools faz o mesmo em 2KB, grátis, sem dependências.

A integração usa o arquivo theme.liquid (Layout do tema), editado direto no admin da Shopify. Não precisa plano Plus, não precisa dev. O snippet é HTML/JS puro e respeita a política de scripts externos do Shopify (não modifica checkout, não captura dados do shopper).

Passo a passo (5 etapas)

  1. 1

    Gera o snippet

    Abre tools.chatsac.com/pt-BR/botao-whatsapp-site, preenche número (com DDI +55), mensagem default ('Olá! Quero saber mais sobre o produto X' converte bem em e-commerce), cor (verde WhatsApp #25D366 ou a cor primária da sua marca), posição (bottom-right padrão) e tamanho. Copia o snippet da aba 'Shopify'.

  2. 2

    Abre o editor de código do tema

    Admin Shopify → Sales channels → Online Store → Themes → tema ativo → Actions → Edit code. O editor abre em tela cheia com a árvore de arquivos à esquerda.

  3. 3

    Edita theme.liquid

    Na árvore, abre Layout → theme.liquid. Navega até o final do arquivo. Procura a tag </body>. Cola o snippet EXATAMENTE antes dessa tag (não depois). Se tem outros scripts de rastreamento (GA4, Meta Pixel), mantém a ordem como está — o nosso por último.

  4. 4

    Salva e verifica

    Clica em 'Save' no canto superior direito do editor. Abre sua loja numa aba anônima. O botão verde aparece no canto inferior direito em ~2s após o load. Testa clicando: deve abrir o WhatsApp com a mensagem pré-preenchida.

  5. 5

    Opcional: esconde no checkout

    Muitas lojas escondem o botão na página de checkout pra não distrair o usuário que está finalizando a compra. Se quiser fazer isso: no mesmo editor de código, abre assets → theme.css (ou base.css dependendo do tema) e adiciona: body.template-checkout iframe[title='WhatsApp'] { display: none !important; }

Erros comuns e como evitar

O Shopify Plus com checkout extensions

Se você está em Shopify Plus e usa Checkout Extensions (novo padrão), o botão NÃO vai aparecer nas páginas de checkout por padrão — o que está correto. Não tente forçar com hacks; o Shopify bloqueia por segurança.

Tema com <body> sem classe condicional

Alguns temas mal-feitos não adicionam classes como 'template-product' no body, o que inviabiliza esconder por página via CSS. Solução: use JS no próprio snippet Liquid pra detectar window.location.pathname e remover o iframe condicionalmente.

Performance Shopify vs Nuvemshop

Shopify renderiza mais CSS/JS no head do que Nuvemshop. Com ou sem nosso botão, seu LCP deve ficar em 2.5-3.5s. Nossa runtime não afeta isso porque é carregada com 'defer' e só renderiza após DOMContentLoaded.

Perguntas frequentes

Preciso do plano Shopify Plus pra instalar?

Não. Qualquer plano Shopify (Basic, Shopify, Advanced, Plus) tem acesso ao Edit code do tema ativo. O snippet funciona igualmente bem em todos.

Funciona com qualquer tema (Dawn, Debut, Narrative, custom)?

Sim. O snippet injeta um iframe que vive em position:fixed no body — independente do tema. Testado em Dawn, Debut, Narrative, e 12+ temas custom de agências BR.

Se eu trocar de tema, preciso reinstalar?

Sim. O código vive dentro do tema ativo. Ao trocar de tema, você precisa colar o snippet no theme.liquid do novo também. Leva 30 segundos.

O botão afeta a taxa de conversão do checkout?

Estudos de UX em e-commerce BR mostram aumento de 5-15% em CVR quando há um canal direto de dúvida visível. O efeito é maior em lojas de ticket R$200+ (onde o comprador tem dúvida pré-compra) e menor em ticket baixo/impulsivo.

Preciso do WhatsApp Business API pra receber?

Não. O botão direciona pro wa.me que abre no WhatsApp normal (Business ou pessoal). API só é necessária se você quiser automação avançada — e é aí que a Chatsac entra como plataforma CRM completa.

Shopify tem app oficial de WhatsApp na store, por que não uso?

Apps na Shopify Store são ótimos pra casos complexos (abandonos automáticos, carrinhos recuperados via WhatsApp, bot de atendimento). Pra o uso simples de 'botão flutuante com mensagem pré-preenchida', eles são overkill: mais caros, mais pesados, com cadastro forçado. Nosso snippet resolve o caso básico em 2KB grátis.

Pronto pra colocar o botão no ar?

Gera o código em 30 segundos, cola no seu Shopify, e começa a converter o tráfego do seu site em conversas no WhatsApp.

Abrir gerador grátis →