Como adicionar um tooltip em uma loja Shopify sem programador
Uma dica contextual na Shopify: uma frase ao lado do elemento em que os visitantes hesitam, colocada com um clique no editor visual e mostrada exatamente quando ajuda.
- Tempo
- ● 10 minutos
- Preço
- Plano Free
- Quem faz
- Dono da loja ou equipe com acesso ao tema
Exemplo: um tooltip na Shopify
Trocas por tamanho são o maior custo da loja. Nas páginas de produto, 8 segundos depois de carregar, um tooltip ao lado do seletor de tamanho diz “A forma é pequena: a maioria pede um número acima”.
Grátis no plano Free do Clew, sem cartão e sem prazo: um site e até 3 tours ou tooltips publicados. Regras de público e testes A/B vêm com o Pro.
Como adicionar o tooltip na Shopify, passo a passo
- Passo 01
Copie o seu snippet do Clew
Crie uma conta grátis (ou entre), adicione o seu site e abra Visão geral no admin. Clique na linha do cartão O widget ainda não deu sinal. para copiar: ela já vem com a chave real do seu site no lugar do marcador.
<!-- Clew: troque COLE_AQUI_SUA_CHAVE pela chave do site em Admin > Visão geral --> <script src="https://tryclew.io/widget/COLE_AQUI_SUA_CHAVE.js" async></script>
Passo 1 · ilustração esquemática - Passo 02
Abra o código do tema
No admin da Shopify vá em Online Store → Themes, clique em … ao lado do tema publicado e escolha Edit code.
Passo 2 · ilustração esquemática - Passo 03
Cole a linha no theme.liquid
Abra
layout/theme.liquid, cole a linha do Clew logo antes de</head>e clique em Save. Ela carrega em todas as páginas da loja.
Passo 3 · ilustração esquemática - Passo 04
Confira a loja
Abra a loja numa nova janela anônima (com a senha da loja, se ainda não foi lançada) e veja se as páginas carregam normalmente.
Passo 4 · ilustração esquemática - Passo 05
Prenda o tooltip ao elemento
No Clew abra Fluxos → + Novo fluxo, mantenha Tooltips passo a passo e clique em Editar no seu site. Na sua página clique em Escolher elemento, clique no campo ou botão e escreva um título curto e uma frase. Ajuste Posição se a posição automática cobrir algo importante.
Passo 5 · ilustração esquemática - Passo 06
Escolha onde, quando e para quem aparece
No mesmo editor, preencha Onde mostrar (URL da página), Quando mostrar, Segmentação de público e Frequência. Estas são as configurações do exemplo acima:
Configuração Valor Formato Tooltips passo a passo Onde mostrar (URL da página) Seção por prefixo /productsQuando mostrar Depois de N segundos: 8 segundos Segmentação de público Sem regras: todo mundo que abre a página Frequência Uma vez por visitante 
Passo 6 · ilustração esquemática - Passo 07
Publique e confira no site real
Mude Status para Publicado e salve. Abra a página numa janela anônima: o Clew lembra quem já viu um item de “uma vez”, então o seu navegador de sempre pode pular. Visualizações, conclusões e abandonos aparecem nas estatísticas.
Passo 7 · ilustração esquemática
Armadilhas: tooltip na Shopify
O checkout fica fora do alcance
A Shopify não roda scripts do tema nas páginas de checkout, então um tooltip pode ficar em produto, coleção, carrinho e páginas de conteúdo, não no checkout. Planeje a mensagem antes de o cliente chegar lá.
Pixels personalizados não mostram interface
Settings → Customer events roda código num sandbox sem acesso à página. Serve para analytics, não para um tooltip: use o theme.liquid.
Trocar de tema remove a linha
A linha mora no tema. Quando publicar um tema novo ou atualizado, cole de novo no theme.liquid dele.
O construtor pode recriar elementos ao publicar
Construtores às vezes regeneram ids de elementos quando um bloco é duplicado ou recriado. Depois de mudanças grandes de design, abra Saúde: se a dica perdeu o elemento, escolha de novo.
Perguntas e respostas
Dá para mostrar só em alguns produtos?
Sim. Use Seção por prefixo com o caminho de uma coleção, ou URL contém com parte do handle do produto.
Existe um app do Clew para Shopify?
Não, e nem precisa: uma linha no theme.liquid é a instalação inteira. Não gera cobranças de app nem blocos de app no tema.
O tooltip é grátis?
Sim, no plano Free: até 3 tours e tooltips publicados num site.
Dá para abrir a dica só no clique?
Sim. Escolha Ao clicar num elemento, informe o seletor do ícone ou link que abre a dica e coloque A cada visita.
O que mais dá para adicionar na Shopify
- Como colocar um pop-up em uma loja Shopify sem programador
- Como criar um aviso de paywall na Shopify sem programador