Código do botão do WhatsApp para temas da Shopify

Por que a mesma resposta vale para Dawn, Sense, Refresh, Craft, Studio e Ride

Os temas gratuitos da Shopify são todos construídos sobre a arquitetura Online Store 2.0. Eles compartilham um único arquivo de layout, o theme.liquid, que envolve todas as páginas, e todos aceitam incorporações de app, o mecanismo que permite a um app adicionar um elemento flutuante sem tocar no seu código. Sense, Refresh, Craft, Studio e Ride são variações da base de código do Dawn, então um botão que funciona no Dawn funciona neles também.

Isso dá duas rotas. A rota A usa uma incorporação de app e não precisa de código. A rota B é um trecho que você cola uma vez no theme.liquid, ou em uma seção Liquid personalizado (Custom Liquid) se quiser o botão só em alguns templates. As duas abrem o mesmo link de conversa wa.me; a diferença está no que acontece ao redor dele.

• Central de ajuda da Shopify: aprimorar o tema com apps (incorporações de app)
• shopify.dev: Theme layouts and theme.liquid

Rota A: sem código, com uma incorporação de app

É a rota que recomendamos para a maioria das lojas, e é a que está detalhada passo a passo no nosso guia do tema Dawn. Instale o WhatsApp Pilot, salve o código do país, o número e a mensagem padrão em Configurações, depois abra Loja virtual → Temas → Personalizar, clique no ícone Incorporações de app e ative o WhatsApp Pilot. Salve, e o botão está no ar. O plano gratuito o exibe na página inicial; o Pro o exibe nas páginas de produto, coleção, carrinho e outras, com visibilidade por dispositivo e o balão de saudação.

Os passos são idênticos no Sense, Refresh, Craft, Studio e Ride porque o painel Incorporações de app pertence ao editor de temas, não a um tema específico. Se você trocar de tema mais tarde, ative a incorporação de novo no novo tema; as configurações no app continuam como estavam.

Rota B: o trecho para copiar e colar

Antes de começar, duplique o seu tema em Loja virtual → Temas para ter um backup, como recomenda o próprio guia da Shopify sobre edição do código do tema. Depois abra o editor de código (menu de três pontos → Editar código), localize layout/theme.liquid e role até a tag de fechamento do body, perto do fim. Cole as linhas abaixo logo acima dela, substitua o número de exemplo pelo seu em formato internacional (código do país primeiro, sem sinal de mais, sem espaços) e salve.

Cada linha é curta de propósito, para colar sem quebrar. Os valores dos atributos usam aspas simples intencionalmente; Liquid e HTML aceitam.

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>

• Central de ajuda da Shopify: edição do código do tema
• Central de Ajuda do WhatsApp: como usar o clique para conversar (links wa.me)

Como definir o número, o texto pré-preenchido e a posição

• Número: os dígitos depois de wa.me/ são o seu número de WhatsApp em formato internacional. Um celular jordaniano 079 000 0000 vira 962790000000; um celular brasileiro (11) 99999-9999 vira 5511999999999. Deixe de fora o sinal de mais, o zero inicial, parênteses, traços e espaços.
• Texto pré-preenchido: tudo depois de ?text= é a mensagem que o comprador vê antes de enviar. Ela precisa estar codificada para URL, então um espaço vira %20 e uma vírgula vira %2C. O gerador de links gratuito em /pt/tools/whatsapp-link-generator neste site monta a URL inteira para você, incluindo a codificação.
• Posição: bottom e right controlam o deslocamento no desktop. Se a gaveta do carrinho do seu tema ou uma barra fixa de adicionar ao carrinho cobrir o botão, aumente bottom ou mova o botão para a esquerda trocando right por left.
• Celular: a media query em 749px corresponde ao ponto de quebra que os temas da família Dawn usam. O deslocamento inferior maior mantém o botão acima de uma barra fixa ou da barra de ferramentas do navegador nos celulares. Ajuste o valor depois de testar em um aparelho real.
• Lojas em RTL: quando o seu tema renderiza com dir='rtl', as regras html[dir='rtl'] espelham o botão para a esquerda. Se a sua vitrine em árabe não define esse atributo, apague as duas linhas rtl e defina left em vez de right diretamente.
• Só em algumas páginas: cole o mesmo trecho em uma seção Liquid personalizado no template desejado (por exemplo, o template de produto) em vez do theme.liquid. Ele então aparece só onde essa seção existe.

Trecho ou app: o que você perde com cada um

Observações por tema

• Dawn e Craft: a gaveta do carrinho abre pela direita. Mantenha o botão à esquerda, ou suba-o para que não cubra o botão de checkout.
• Sense e Refresh: os dois usam um cabeçalho fixo bem visível e, no celular, uma barra fixa de adicionar ao carrinho nas páginas de produto. Teste uma página de produto no celular antes de fechar o deslocamento inferior.
• Studio e Ride: esquemas de cor escuros ou de alto contraste podem fazer o verde padrão parecer berrante. Mantenha o verde do WhatsApp no botão em si e mude só o tom de hover, se precisar.
• Temas Online Store 2.0 pagos: o mesmo trecho funciona, mas o ponto de quebra para celular pode ser outro. Procure no CSS do tema a largura da media query dele e use a mesma.
• Checkout: nenhuma das rotas consegue colocar um botão nas páginas de checkout. A Shopify não permite código de tema nem incorporações de app ali.

Teste antes de seguir

1. Abra a loja em um navegador de desktop e confirme que o botão fica onde você espera na página inicial, em uma página de produto e no carrinho.
2. Toque nele em um celular. O WhatsApp deve abrir com o seu número e o texto pré-preenchido; se não abrir, confira primeiro os dígitos depois de wa.me/.
3. Envie a mensagem de teste para você mesmo e responda, para saber que a passagem funciona nos dois sentidos.
4. Se você usou o app, abra Análises depois de um dia e confira se os toques estão sendo contados. O trecho não informa nada, e esse é o principal motivo pelo qual lojas que querem números migram para o app depois.