Seu carrinho está vazio no momento!
Olá, futuros mestres do e-commerce! 👋 Sejam muito bem-vindos à nossa Aula 58 do curso “Loja Shopify do Zero ao Avançado”!
Até agora, construímos uma base sólida para a sua loja, desde a estrutura inicial até a otimização de SEO e aprimoramento da experiência do usuário. Chegou a hora de falarmos de algo crucial para o crescimento de qualquer negócio online: a captura de leads de forma inteligente e eficaz. 🚀
Nesta aula, vamos mergulhar no mundo dos pop-ups inteligentes, desmistificando sua criação, otimização e integração para transformar visitantes em potenciais clientes e, eventualmente, em vendas! Preparem-se para aprender a usar essa ferramenta poderosa sem ser intrusivo e garantindo ótimos resultados.
—
Aula 58 – Loja Shopify do Zero ao Avançado: Pop-ups inteligentes e captura de leads eficaz
📚 O que você vai aprender nesta aula
Nesta jornada de conhecimento, você irá:
- Compreender a importância estratégica dos pop-ups para a captura de leads e otimização de conversão (CRO).
- Explorar os diferentes tipos de pop-ups (exit-intent, baseados em tempo, scroll, clique) e suas melhores aplicações.
- Aprender sobre os elementos essenciais que compõem um pop-up de alta conversão.
- Descobrir as melhores ferramentas e apps disponíveis na Shopify App Store para criar pop-ups inteligentes.
- Implementar um pop-up customizado e básico utilizando seus conhecimentos de Liquid, HTML, CSS e JavaScript diretamente no tema da sua loja.
- Dominar as boas práticas de design e experiência do usuário (UX) para garantir que seus pop-ups sejam eficazes, e não irritantes.
- Ter uma base para analisar o desempenho de seus pop-ups e otimizá-los continuamente.
🔗 Conectando com aulas anteriores
Lembram-se de quando falamos sobre Marketing Digital e Estratégias de Venda (lá pelas Aulas 40-45)? Mencionamos a importância da construção de uma lista de e-mails para nutrir leads e fazer marketing de relacionamento. Pois bem, os pop-ups são a linha de frente dessa estratégia! Eles são a ponte que conecta o visitante anônimo à sua lista de contatos.
Nas aulas sobre Otimização de Conversão (CRO), discutimos como pequenas mudanças podem gerar grandes resultados. Pop-ups, quando bem executados, são uma das ferramentas mais poderosas para CRO, transformando o tráfego existente em leads e vendas.
E claro, todo o conhecimento que adquirimos sobre edição de temas Shopify (Liquid, HTML, CSS e JavaScript) será fundamental! Seja para personalizar um app de pop-up ou para construir uma solução customizada do zero, suas habilidades de desenvolvimento serão postas em prática. Vamos aplicar tudo o que aprendemos sobre estrutura de tema, snippets e sections!
📖 Conteúdo Principal
1. Por que Pop-ups são Essenciais para a Captura de Leads? 🤔
Muitas pessoas têm uma imagem negativa de pop-ups, associando-os a spam ou interrupções indesejadas. No entanto, quando bem utilizados, eles são incrivelmente eficazes e podem ser um dos maiores geradores de leads para sua loja.
- Aumento da Lista de E-mails 📧: O objetivo principal! Ter uma lista de e-mails segmentada permite que você se comunique diretamente com seus clientes potenciais, envie promoções, novidades e conteúdo relevante, construindo um relacionamento duradouro.
- Promoção de Ofertas Especiais 🎁: Um pop-up pode ser a vitrine perfeita para um desconto de primeira compra, frete grátis, acesso a um conteúdo exclusivo ou um cupom especial, incentivando a conversão imediata ou a captura do lead.
- Redução da Taxa de Abandono de Carrinho 🛒: Um pop-up de “exit-intent” (quando o usuário está prestes a sair) pode oferecer um último incentivo para que ele finalize a compra ou, no mínimo, capture seu e-mail para um follow-up.
- Segmentação de Audiência: Pop-ups podem ser configurados para aparecer para diferentes públicos ou em diferentes páginas, oferecendo mensagens específicas e relevantes, o que melhora a qualidade do lead.
- Coleta de Feedback: Além de e-mails, você pode usar pop-ups para coletar feedback rápido ou fazer pesquisas.
2. Tipos de Pop-ups e Quando Usá-los 🚦
A inteligência de um pop-up está em seu timing e contexto. Saber qual tipo usar e em que momento faz toda a diferença.
- Pop-up de Exit-Intent (Intenção de Saída):
- Como funciona: Aparece quando o sistema detecta que o usuário está movendo o cursor para fora da janela do navegador, indicando que ele está prestes a sair.
- Quando usar: Ideal para tentar reter o visitante, oferecer um último incentivo (desconto de saída) ou capturar seu e-mail antes que ele vá embora. É um dos tipos mais eficazes e menos intrusivos.
- Pop-up Baseado em Tempo (Time-Based):
- Como funciona: Aparece após o usuário passar um determinado tempo na página (ex: 15 segundos).
- Quando usar: Quando você acredita que o usuário já teve tempo suficiente para interagir com o conteúdo e pode estar pronto para uma oferta ou para se inscrever. Use com moderação para não ser agressivo.
- Pop-up Baseado em Rolagem (Scroll-Based):
- Como funciona: Aparece após o usuário rolar uma determinada porcentagem da página (ex: 50% ou 75%).
- Quando usar: Similar ao time-based, mas mais contextual. Sugere que o usuário está engajado com o conteúdo da página, tornando a oferta mais relevante.
- Pop-up Baseado em Clique (Click-Based):
- Como funciona: Ativado por um clique em um elemento específico (botão, link, imagem).
Quando usar: Perfeito para ofertas contextuais. Ex: um botão “Quero meu e-book grátis” que abre um pop-up de formulário. O usuário escolhe* interagir, tornando-o pouco intrusivo.
- Pop-up de Entrada (Entry-Based – Usar com Cautela!):
- Como funciona: Aparece imediatamente ou poucos segundos após o usuário entrar na página.
- Quando usar: Raramente recomendado para a primeira visita, pois pode ser muito intrusivo e prejudicar a UX. Exceções podem ser em páginas de destino muito específicas com ofertas claras e imediatas.
- Pop-ups Gamificados (Gamified Pop-ups):
- Como funciona: Inclui elementos de jogo, como “roda da fortuna”, raspadinha ou quiz, para oferecer descontos ou prêmios em troca de um e-mail.
- Quando usar: Muito eficazes para aumentar o engajamento e a taxa de captura de leads devido ao elemento de diversão e a chance de ganhar.
3. Elementos Chave de um Pop-up Eficaz 🔑
Um pop-up não é apenas um formulário flutuante. Para ser eficaz, ele precisa de alguns componentes essenciais:
- Título e Mensagem Clara e Concisa: O que você está oferecendo e por que o visitante deveria se importar? “Ganhe 10% de desconto na primeira compra!”, “Receba novidades exclusivas!”.
- Call to Action (CTA) Convincente: Um botão claro e convidativo que instrui o usuário sobre o próximo passo. “Quero meu desconto!”, “Assinar Newsletter”, “Baixar E-book Agora!”.
- Campos de Formulário Relevantes: Geralmente, apenas o campo de e-mail é suficiente para maximizar as conversões. Nome pode ser opcional. Quanto menos campos, maior a taxa de preenchimento.
- Design Atraente e Coerente com a Marca: O pop-up deve ter a cara da sua loja, utilizando cores, fontes e imagens que estejam em harmonia com seu branding.
- Opção Clara para Fechar (X ou “Não, obrigado”): Fundamental para uma boa UX. Se o usuário não quiser interagir, ele precisa de uma saída fácil e visível.
- Proposta de Valor Clara: O visitante deve entender imediatamente o benefício de interagir com o pop-up.
4. Integração com Ferramentas de E-mail Marketing 📧➡️📊
A magia acontece quando seus leads capturados pelos pop-ups são automaticamente enviados para sua plataforma de e-mail marketing (como Klaviyo, Mailchimp, ActiveCampaign, etc.). Isso permite:
- Automações: Enviar e-mails de boas-vindas automáticos, sequências de nutrição de leads.
- Segmentação: Agrupar leads com base em suas interações ou interesses.
- Campanhas: Enviar newsletters e promoções direcionadas.
A maioria dos apps de pop-up da Shopify App Store já vem com integrações nativas para as principais plataformas de e-mail marketing. Se você estiver construindo um pop-up customizado, precisará integrar o formulário diretamente com a API da sua ferramenta de e-mail marketing ou usar a funcionalidade nativa de newsletter do Shopify (que veremos no exemplo).
5. Boas Práticas e UX para Pop-ups ✅
Um pop-up bem-sucedido equilibra a agressividade de marketing com uma experiência de usuário agradável.
- Não Seja Intrusivo:
- Timing: Evite pop-ups de entrada agressivos. Prefira exit-intent, time-based (com tempo razoável) ou scroll-based.
- Frequência: Não mostre o mesmo pop-up repetidamente para o mesmo visitante em um curto período. Use cookies ou localStorage para controlar a frequência (ex: mostrar apenas uma vez por sessão ou a cada 7 dias).
- Relevância é a Chave: A oferta do pop-up deve ser relevante para o conteúdo da página ou para a jornada do usuário.
- Responsividade Mobile: Certifique-se de que seus pop-ups sejam perfeitamente responsivos em dispositivos móveis. Pop-ups que ocupam toda a tela em mobile podem ser penalizados pelo Google.
- Regulamentação (LGPD/GDPR): Se sua loja opera no Brasil (LGPD) ou na Europa (GDPR), garanta que o pop-up inclua um aviso claro sobre a coleta de dados e um link para sua política de privacidade. O consentimento deve ser explícito.
- Teste A/B: Não confie apenas na intuição. Teste diferentes mensagens, CTAs, designs e tipos de pop-ups para ver qual gera os melhores resultados para o seu público.
- Performance: Pop-ups muito pesados ou mal codificados podem atrasar o carregamento da sua página, prejudicando o SEO e a UX.
6. Shopify e Pop-ups: Opções Disponíveis 🛠️
Você tem duas abordagens principais para implementar pop-ups na sua loja Shopify:
- Apps da Shopify App Store (Recomendado para a maioria):
- Vantagens: Facilidade de uso (interface “arrastar e soltar”), funcionalidades avançadas (segmentação, A/B testing, analytics), integração nativa com e-mail marketing, suporte e atualizações constantes.
- Exemplos Populares:
- Privy: Um dos mais completos, com vários tipos de pop-ups, barras de notificação, banners, e integração com várias plataformas de e-mail.
- Klaviyo Forms: Se você já usa Klaviyo para e-mail marketing, os formulários e pop-ups deles são excelentes e totalmente integrados.
- OptinMonster: Outra ferramenta robusta com foco em CRO.
- Justuno: Soluções avançadas de personalização e segmentação.
- Seguno: Uma opção mais simples para e-mail marketing e pop-ups básicos.
- Desvantagens: Geralmente têm um custo mensal (planos freemium podem ter limitações), podem adicionar algum código extra ao seu tema que você não controla totalmente.
- Desenvolvimento Customizado (Para casos específicos e controle total):
- Vantagens: Controle total sobre o código, design e funcionalidades. Sem custos mensais adicionais (além do desenvolvimento inicial). Perfeito para requisitos muito específicos ou para lojas que querem manter o número de apps minimizado.
- Desvantagens: Requer conhecimento técnico avançado (Liquid, HTML, CSS, JavaScript). Manutenção e atualizações ficam por sua conta. Sem funcionalidades de A/B testing ou analytics nativas, precisando de soluções adicionais.
- Quando usar: Quando você tem uma necessidade muito particular que os apps não atendem, ou quando a otimização de performance é crítica e você quer o código mais limpo possível.
Nesta aula, vamos abordar ambas as abordagens, com foco maior na implementação customizada para que você entenda os fundamentos, mas sempre recomendando considerar um app para a maioria dos cenários reais.
—
💻 Exemplos Práticos
Vamos colocar a mão na massa! Criaremos um pop-up de captura de e-mail customizado que aparecerá quando o usuário tentar sair da página (exit-intent). Para simplificar, faremos a integração do formulário com a funcionalidade de newsletter nativa do Shopify, que armazena os e-mails como clientes com a tag newsletter.
Cenário: Pop-up de Exit-Intent com Formulário de Newsletter
Objetivo: Um pop-up discreto que aparece quando o usuário move o mouse para fora da janela do navegador, oferecendo um desconto de 10% para novas inscrições na newsletter.
Pré-requisito: Seu tema em desenvolvimento.
—
Passo 1: Criar um Snippet para o Pop-up (popup-newsletter.liquid)
1. No seu painel de administração Shopify, vá em Loja Virtual > Temas.
2. Clique em Ações > Editar código no seu tema de desenvolvimento.
3. Na pasta Snippets, clique em Adicionar novo snippet.
4. Nomeie-o como popup-newsletter e clique em Criar snippet.
5. Cole o seguinte código HTML e Liquid:
Explicação do Código Liquid:
- A div principal
newsletter-popup-modalserá nosso pop-up, inicialmente oculto. -
newsletter-popup-overlayé uma camada escura que cobre o fundo, focando no pop-up. - O botão
newsletter-popup-closeserá para fechar o pop-up. - O formulário é um
{% form 'customer' %}. Isso é importante! Ele é um formulário nativo do Shopify que, ao ser enviado, cria um novo cliente (ou atualiza um existente) e adiciona o e-mail à sua lista de “Marketing por e-mail” no admin. -
contact[tags]comvalue="newsletter": Adiciona a tag “newsletter” ao cliente, facilitando a segmentação. -
form.posted_successfully?eform.errors: Liquid que verifica se o formulário foi enviado com sucesso ou se houve erros, exibindo mensagens apropriadas.
—
Passo 2: Estilizar com CSS (theme.scss.liquid)
1. Ainda no editor de código, na pasta Assets, localize o arquivo theme.scss.liquid (ou outro arquivo CSS principal do seu tema, como base.css).
2. Adicione o seguinte CSS no final do arquivo:
css
/ Estilos para o Pop-up de Newsletter /
.newsletter-popup-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex; / Para centralizar o conteúdo /
align-items: center; / Centraliza verticalmente /
justify-content: center; / Centraliza horizontalmente /
z-index: 9999; / Garante que fique acima de outros elementos /
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.newsletter-popup-modal.is-visible {
opacity: 1;
visibility: visible;
}
.newsletter-popup-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7); / Fundo semi-transparente /
}
.newsletter-popup-content {
background-color: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
position: relative;
z-index: 10000; / Acima do overlay /
max-width: 500px;
width: 90%; / Responsivo /
text-align: center;
transform: translateY(-20px); / Pequeno efeito de entrada /
transition: transform 0.3s ease;
}
.newsletter-popup-modal.is-visible .newsletter-popup-content {
transform: translateY(0);
}
.newsletter-popup-close {
position: absolute;
top: 10px;
right: 15px;
background: none;
border: none;
font-size: 24px;
cursor: pointer;
color: #333;
padding: 5px;
}
.newsletter-popup-inner h2 {
font-size: 28px;
color: #333;
margin-bottom: 15px;
}
.newsletter-popup-inner p {
font-size: 16px;
color: #666;
margin-bottom: 25px;
}
.newsletter-popup-form {
display: flex;
flex-direction: column;
gap: 15px; / Espaço entre os campos /
}
.newsletter-popup-input {
width: 100%;
padding: 12px 15px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
}
.newsletter-popup-button {
background-color: #007bff; / Cor principal, personalize! /
color: #fff;
border: none;
padding: 12px 20px;
border-radius: 4px;
font-size: 18px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.newsletter-popup-button:hover {
background-color: #0056b3;
}
/ Mensagens de formulário /
.form-message {
padding: 10px;
border-radius: 4px;
font-size: 14px;
margin-bottom: 15px;
}
.form-message--success {
background-color: #d4edda;
color: #155724;
border-color: #c3e6cb;
}
.form-message--error {
background-color: #f8d7da;
color: #721c24;
border-color: #f5c6cb;
}
/ Responsividade básica /
@media (max-width: 768px) {
.newsletter-popup-content {
max-width: 95%;
padding: 20px;
}
.newsletter-popup-inner h2 {
font-size: 24px;
}
}
Explicação do CSS:
-
position: fixedez-index: Garantem que o pop-up fique fixo na tela, acima de tudo. -
opacity: 0evisibility: hiddencomtransition: Para esconder e mostrar o pop-up com um efeito de fade. A classeis-visibleserá adicionada via JavaScript. -
flexbox: Usado para centralizar o conteúdo do pop-up. - Estilos básicos para o overlay, conteúdo, botão de fechar, texto e formulário.
-
@mediaquery: Para garantir que o pop-up seja responsivo em telas menores.
—
Passo 3: Adicionar a Lógica com JavaScript (theme.js ou similar)
1. Ainda no editor de código, na pasta Assets, localize o arquivo JavaScript principal do seu tema (geralmente theme.js, global.js ou custom.js).
2. Adicione o seguinte código JavaScript no final do arquivo:
javascript
document.addEventListener('DOMContentLoaded', () => {
const popupModal = document.getElementById('newsletter-popup-modal');
const popupClose = popupModal ? popupModal.querySelector('.newsletter-popup-close') : null;
const popupOverlay = popupModal ? popupModal.querySelector('.newsletter-popup-overlay') : null;
const form = popupModal ? popupModal.querySelector('.newsletter-popup-form') : null;
// Key for localStorage to prevent showing the popup too often
const popupShownKey = 'newsletterPopupShown';
const popupIntervalDays = 7; // Show popup again after 7 days
// Function to show the popup
function showPopup() {
if (popupModal && !localStorage.getItem(popupShownKey)) {
popupModal.classList.add('is-visible');
// Set a timestamp for when the popup was shown
localStorage.setItem(popupShownKey, Date.now());
}
}
// Function to hide the popup
function hidePopup() {
if (popupModal) {
popupModal.classList.remove('is-visible');
}
}
// Check if popup should be shown based on localStorage
function checkPopupVisibility() {
const lastShown = localStorage.getItem(popupShownKey);
if (lastShown) {
const msPassed = Date.now() - parseInt(lastShown);
const daysPassed = msPassed / (1000 60 60 * 24);
if (daysPassed < popupIntervalDays) {
// If popup was shown recently, don't show it again
return;
}
}
// If not shown or interval passed, allow showing
setupExitIntent();
}
// Setup exit-intent listener
function setupExitIntent() {
document.addEventListener('mouseleave', (e) => {
// Check if mouse left the top of the viewport (common exit intent trigger)
if (e.clientY < 10) {
showPopup();
}
});
}
// Handle popup close events
if (popupClose) {
popupClose.addEventListener('click', hidePopup);
}
if (popupOverlay) {
popupOverlay.addEventListener('click', hidePopup);
}
// If the form was just submitted, keep the popup open to show success/error message
// And also, save the submission success status in sessionStorage
if (form) {
const isFormSubmitted = sessionStorage.getItem('newsletterPopupSubmitted');
if (isFormSubmitted === 'true') {
showPopup(); // Keep it open to show the message
sessionStorage.removeItem('newsletterPopupSubmitted'); // Clear it after showing
}
form.addEventListener('submit', () => {
sessionStorage.setItem('newsletterPopupSubmitted', 'true');
});
}
// Initialize popup visibility check
checkPopupVisibility();
});
Explicação do JavaScript:
-
DOMContentLoaded: Garante que o script só rode depois que a página HTML estiver totalmente carregada. -
showPopup()/hidePopup(): Adicionam ou removem a classeis-visibledo modal, controlando sua exibição via CSS. -
localStorage(popupShownKey,popupIntervalDays): Usado para armazenar um timestamp de quando o pop-up foi mostrado pela última vez. Isso evita que o pop-up apareça repetidamente para o mesmo usuário, melhorando a UX. No nosso exemplo, ele só aparecerá novamente após 7 dias. -
setupExitIntent(): Adiciona um listener para o eventomouseleavenodocument. Se o cursor sair pela parte superior da janela (e.clientY < 10), o pop-up é acionado. - Event Listeners para
popupCloseepopupOverlay: Fecham o pop-up quando o botão "X" ou o fundo escuro são clicados. - Gestão de formulário:
-
sessionStorage: Usado para manter o pop-up visível após o envio do formulário, permitindo que o usuário veja a mensagem de sucesso ou erro do Shopify. Isso é importante porque o Shopify recarrega a página ao enviar o formuláriocustomer, e o pop-up fecharia sem o usuário ver a confirmação. -
form.addEventListener('submit', ...): Antes de enviar o formulário, marcamos nosessionStorageque ele foi submetido.
---
Passo 4: Incluir o Snippet no theme.liquid
Agora precisamos dizer ao Shopify para renderizar o nosso snippet do pop-up.
1. Ainda no editor de código, abra o arquivo theme.liquid (na pasta Layout).
2. Localize a tag de fechamento