Clew

Como colocar um pop-up em uma loja Shopify sem programador

Guia passo a passo para um pop-up na Shopify: instale uma linha, escreva o modal no editor do Clew e decida quando ele aparece — depois de alguns segundos, na rolagem, numa visita de retorno — sem mexer no tema de novo.

Tempo
● 10 minutos
Preço
Teste grátis de 14 dias, sem cartão
Quem faz
Dono da loja ou equipe com acesso ao tema

Exemplo: um pop-up na Shopify

Uma loja de roupas quer que quem volta saiba do frete grátis acima de R$ 250, sem receber com uma camada quem chega pela primeira vez. O pop-up “Frete grátis acima de R$ 250 este mês” aparece nas coleções na segunda visita, uma vez, e o botão abre a página de frete.

Este formato faz parte do plano Pro. Toda conta nova começa com 14 dias de teste grátis com todos os formatos e regras de público, sem cartão. Quando o teste acaba, nada é apagado e o que foi publicado continua aparecendo; tours e tooltips seguem grátis no plano Free.

Como adicionar o pop-up na Shopify, passo a passo

  1. 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>
    Visão geral do admin do Clew com a linha de instalação e a chave do site oculta (pop-up na Shopify)
    Passo 1 · ilustração esquemática
  2. 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.

    Caminhos até o campo de código do head em construtores populares, incluindo o theme.liquid da Shopify (pop-up na Shopify)
    Passo 2 · ilustração esquemática
  3. 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.

    Editor de código do tema com o script do Clew antes do fechamento do head (pop-up na Shopify)
    Passo 3 · ilustração esquemática
  4. 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.

    Barra superior da loja com o botão Save em destaque (pop-up na Shopify)
    Passo 4 · ilustração esquemática
  5. Passo 05

    Escreva o pop-up no Clew

    No Clew abra Fluxos → + Novo fluxo e escolha Formato Janela modal. Adicione um passo: um título curto, uma ou duas frases e, em Texto do link / URL do link, o texto do botão e a página que ele abre. O modal não precisa de seletor: sempre aparece centralizado.

    Um pop-up (janela modal) com título, texto e botão-link sobre um site (pop-up na Shopify)
    Passo 5 · ilustração esquemática
  6. 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çãoValor
    FormatoJanela modal
    Onde mostrar (URL da página)Seção por prefixo /collections
    Quando mostrarNa N-ésima visita: 2
    Segmentação de públicoSem regras: todo mundo que abre a página
    FrequênciaUma vez por visitante
    Editor de tours do Clew com formato, regra de URL, gatilho e regra de público (pop-up na Shopify)
    Passo 6 · ilustração esquemática
  7. 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.

    Visão geral do admin do Clew com o cartão verde de widget ativo (pop-up na Shopify)
    Passo 7 · ilustração esquemática

Armadilhas: pop-up na Shopify

O checkout fica fora do alcance

A Shopify não roda scripts do tema nas páginas de checkout, então um pop-up 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 pop-up: 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.

Não empilhe com os pop-ups do construtor

Se o tema ou um plugin já mostra um pop-up de newsletter ou de cookies na mesma página, o visitante vê duas camadas. Desligue um deles ou dê ao Clew outro gatilho (rolagem ou segunda visita).

Perguntas e respostas

O pop-up pode mostrar um cupom?

Sim, como texto, por exemplo “Use PRIMAVERA10 no checkout”. O Clew não cria nem valida cupons: crie o desconto antes na Shopify.

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.

Dá para mostrar o pop-up numa página só?

Sim. Instale a linha no site inteiro e escolha Caminho exato ou Seção por prefixo em Onde mostrar (URL da página). O pop-up não aparece em nenhuma outra página.

O pop-up é grátis?

O formato modal faz parte do Pro; contas novas têm 14 dias de teste com tudo, sem cartão. Tours e tooltips são grátis no plano Free.

Para onde o botão leva?

Para qualquer página que você colocar em URL do link. Ela abre em outra aba, para o visitante não perder a página em que estava.

Uma linha no seu site e, depois, tours, tooltips e checklists sem deploy.

Pegar minha chave grátisComo o Clew funcionaPlano gratuito para sempre, sem cartão

Tours de produto, pop-ups e onboarding na era da IA

7 padrões com número de passos, regras de texto e métricas, o que a IA muda e um checklist antes de publicar. PDF, 2 páginas. O que tem no guia →

O guia está em inglês.