Como adicionar um Popup no Shopify

Adicionar um popup à sua loja Shopify é algo que você vai querer fazer quando precisar capturar a atenção do visitante no momento exato—talvez para aumentar sua lista de e-mails, anunciar uma promoção relâmpago ou lembrar gentilmente alguém sobre uma oferta especial antes que eles saiam do seu site. Popups podem ajudar a aumentar o engajamento, manter as pessoas interessadas e incentivar mais visitas de retorno, especialmente quando aparecem exatamente quando os visitantes precisam deles.

Um widget pop-up é uma forma prática de gerenciar isso. Ele permite criar, personalizar e gerenciar popups diretamente no painel do Shopify, para que você não precise lidar com códigos complicados ou atualizações manuais. Tudo permanece atualizado automaticamente, o design se alinha à sua identidade de marca, e você ganha tempo garantindo que seus visitantes vejam as mensagens que importam.

Para facilitar, as instruções estão divididas em etapas claras, para que você configure rapidamente seu pop-up e ajuste os detalhes sempre que estiver pronto.

Como Adicionar Popup no Shopify Rapidamente

Aqui está o atalho para adicionar um popup ao seu site Shopify, em quatro passos simples.

1. Abra o Construtor da Elfsight e escolha um modelo.
2. Personalize o seu widget de pop-up.
3. Clique em ‘Adicionar ao site gratuitamente’ e copie o código.
4. Cole-o no back-end do seu site Shopify.

Crie e visualize seu pop-up personalizado do Shopify no editor ao vivo!

Popups que ajudam seu site a conectar e converter

Você viu como é fácil estilizar um popup. Veja o que o widget pode fazer para ajudar você a alcançar seus objetivos:

Funcionalidade-chave	Por que isso importa
Qualquer tipo de popup: notificações, descontos, captação de e-mails, intenção de saída	Escolha a mensagem ou oferta que melhor se conecta com seu público e com a sua campanha, para que cada popup tenha relevância.
Segmentação precisa com gatilhos e condições	Exiba pop-ups no momento certo para os visitantes certos, para que sua mensagem seja vista.
Personalização completa de design para layout, cores, imagens e mensagens	Alinhe os popups com a sua marca, mantendo o visual do seu site consistente.
Editor ao vivo, sem código, com pré-visualizações instantâneas e código de incorporação	Configure popups rapidamente, veja as mudanças em tempo real e lance‑as sem dor de cabeça técnica.
Templates prontos e flexibilidade de criar do zero	Economize tempo ao começar com um modelo ou crie um popup único para qualquer campanha.

Essas funcionalidades são apenas algumas das maneiras pelas quais o widget Popup da Elfsight ajuda a envolver seus visitantes e gerar resultados. Para ver tudo o que ele oferece, confira a página de recursos do Popup. Em seguida, vamos percorrer cada passo para conectar o widget ao seu site.

Guia Completo para Adicionar e Personalizar Popup no Seu Site Shopify

Esta seção detalha cada etapa para criar, personalizar e incorporar seu popup em um site Shopify, incluindo dicas úteis para segmentar diferentes públicos-alvo ou metas de conversão.

1. Escolha um modelo

Ao abrir o Editor de Widget Popup, o primeiro passo é selecionar um modelo. A Elfsight oferece mais de 20 modelos de popup profissionalmente projetados, adequados a diferentes objetivos de marketing — seja para aumentar as vendas com ofertas especiais, coletar assinantes da newsletter ou anunciar lançamentos. Cada modelo vem pré-configurado com blocos de conteúdo relevantes e mensagens para acelerar a configuração.

Selecione o modelo que melhor atende à sua meta de conversão principal e clique “Continuar com este modelo” para avançar para a próxima etapa. Você pode personalizá-lo ainda mais para atender às suas necessidades específicas.

2. Adicionar e Personalizar Blocos de Conteúdo

Vá para a aba Builder para montar seu popup usando o sistema flexível de blocos de conteúdo da Elfsight.

O widget oferece mais de 12 tipos de blocos personalizáveis, permitindo criar popups altamente segmentados, sem necessidade de código:

• Texto e Títulos – Manchetes, textos de corpo e descrições.
• Imagens e Vídeos – Faça o upload de fotos de produtos, imagens promocionais ou conteúdo de vídeo incorporado
• Botões e CTAs – Botões de chamada para ação que redirecionam para URLs específicas ou acionam ações
• Formulários – Campos de inscrição por e-mail, formulários de contato ou elementos de pesquisa
• Cupons – Exiba códigos de desconto que os visitantes podem copiar com um único clique
• Espaçamento e Divisores – Organize o conteúdo visualmente para melhor legibilidade
• IFrame & HTML Personalizado – Incorpore conteúdo externo ou código personalizado para casos de uso avançados

3. Personalizar Aparência e Branding

Clique no campo Fundo para garantir que seu popup esteja alinhado perfeitamente com a identidade da marca e o sistema de design do seu site. Você pode escolher entre:

• Cores sólidas – Escolha entre as cores disponíveis ou defina uma personalizada, ajuste a opacidade
• Fundo com Gradiente – Defina as cores do gradiente e a direção do gradiente
• Carregar Imagem – Adicione uma imagem dos seus arquivos de mídia para usar como plano de fundo
• Link Video – Paste a YouTube or Vimeo URL to set a video background

O editor visual oferece uma pré-visualização em tempo real de todas as suas customizações, para que você veja exatamente como seu popup ficará antes de publicar. Para requisitos avançados de branding, o Elfsight também suporta CSS Personalizado para um estilo pixel-perfeito.

3. Escolha o layout do Popup

Abra a aba Layout para escolher como o seu popup aparecerá no site. O Elfsight Popup oferece três opções de layout poderosas, cada uma projetada para diferentes casos de uso e experiências do usuário:

• Modal (Central) – O pop-up clássico centralizado que sobrepõe o conteúdo da página com um fundo semi-transparente. Perfeito para mensagens de alta prioridade, ofertas de boas-vindas ou anúncios críticos que exijam atenção imediata
• Slide-in – Um pop-up que surge do canto da tela, permanecendo visível sem bloquear totalmente o conteúdo da página. Ideal para ofertas de saída ou captação de leads de forma discreta que respeita a experiência do usuário
• Pane – Um painel dedicado posicionado na borda esquerda ou direita da tela. Ótimo para mensagens persistentes ou formulários em várias etapas que permitem aos usuários interagir aos poucos

Você também pode personalizar as dimensões do popup (largura, altura e alinhamento), adicionar ou remover o botão de fechar e definir a cor ou imagem de sobreposição de fundo para combinar com sua marca.

4. Definir Gatilhos e Comportamento de Exibição

Abra a Configurações para definir quando e como seu Popup aparece. É aqui que as capacidades de segmentação de precisão da Elfsight realmente brilham, permitindo que você mostre a mensagem certa no momento certo. Nosso Popup oferece 6 gatilhos avançados para ativar seu popup com base no comportamento do usuário:

• Ao Carregar a Página – Exibe imediatamente quando a página terminar de carregar. Perfeito para mensagens de boas-vindas ou anúncios com prazo.
• Tempo na Página – Dispare após o usuário permanecer por um número específico de segundos na página. Ideal para quando os visitantes já tiveram tempo de interagir com seu conteúdo
• Ao Rolar (%) – Ative quando o usuário rolar até uma porcentagem específica da página (por exemplo, 50% ou 75%). Eficaz para prender a atenção após o engajamento com o conteúdo
• Rolar até o Elemento – Exiba quando os usuários rolarem até um elemento específico na sua página. Perfeito para promover produtos relacionados ou ofertas especiais em pontos estratégicos de conteúdo
• Ao Clicar – Exiba o pop-up quando os visitantes clicarem em um botão ou link específico. Excelente para botões “Saiba Mais” ou informações detalhadas do produto
• <strong>Intenção de Saída</strong> – Dispara quando o usuário move o cursor para fechar a aba ou sair. A última oportunidade de conversão para recuperação de carrinho ou ofertas especiais

5. Configurar Frequência de Exibição e Segmentação

Permaneça na aba Configurações e ajuste a frequência, o direcionamento por página e o direcionamento por dispositivo para otimizar o alcance do seu popup e evitar a frustração do usuário:

• Opções de Frequência. Defina com que frequência seu popup será exibido: sempre, até fechar, uma vez, todos os dias ou toda semana.
• Segmentação de Páginas – Especifique quais páginas devem exibir o popup ou excluir páginas específicas. Mostre ofertas especiais apenas nas páginas de produto ou oculte popups nas páginas de checkout
• Segmentação por Dispositivo – Escolha se o popup deve aparecer em desktop, mobile, tablet ou em todos os dispositivos. Otimize a experiência do usuário em telas menores.

6. Obter o código de instalação

Depois que o seu popup estiver totalmente configurado e testado, clique em “Adicionar ao Site” — aparecerá um popup com o seu script de instalação exclusivo. Copie todo esse trecho de código; você o utilizará para incorporar o widget ao seu site.

7. Adicionar Popup ao Shopify

Escolha o método abaixo que corresponde ao local onde você gostaria que o widget aparecesse na sua loja:

Página específica — Loja Online 2.0

1. No admin do Shopify vá para Canais de Vendas → Loja Online → Temas e clique em Personalizar.
2. Selecione a página de destino no menu suspenso no topo do editor visual.
3. Clique em Adicionar seção e escolha Liquid Personalizado.
4. Cole o snippet do Elfsight no campo Custom Liquid e clique Salvar.

Página específica — Temas Vintage

1. Na administração do Shopify, vá em Online Store → Themes → Customize.
2. Selecione a página para editar no menu suspenso do topo.
3. Clique em Adicionar seção → Conteúdo Personalizado. Dentro do bloco Conteúdo Personalizado use Adicionar bloco → HTML Personalizado, se necessário.
4. Cole seu código de incorporação no campo HTML, ajuste a largura do contêiner para 100% se necessário, e clique Salvar.

Todas as páginas (em todo o site)

1. Na administração do Shopify, clique no menu … e escolha Editar código.
2. Abrir Layout → theme.liquid
3. Cole seu código antes da tag de fechamento e clique em Salvar.

Páginas de Produtos

Adicionar à descrição do produto

1. Vá para Produtos e abra o produto para editar.
2. Clique no ícone </> para abrir o editor HTML, colar o trecho e clicar em Salvar.

Adicionar a todas as páginas de produto

1. Na administração do Shopify vá para Online Store → Themes → Actions → Edit code.
2. Abra Sections → main-product.liquid
3. Cole o código do Elfsight onde quiser que ele apareça e clique em Salvar.

Se você quiser explorar formas alternativas de adicionar um widget, a seção a seguir apresentará diferentes abordagens para exibir popups no seu site Shopify.

Como adicionar popups no Shopify

Existem algumas formas nativas e oficiais de adicionar um Popup ao seu site Shopify, mas cada uma traz concessões notáveis em comparação com o uso de um Widget Popup dedicado, como o Elfsight.

Editor de temas integrado do Shopify

O editor de temas do Shopify oferece funcionalidade básica de pop-up para anúncios simples ou formulários de inscrição na newsletter.

1. Acesse o Editor de Tema. Vá até o admin do Shopify, selecione “Loja Online”, depois “Temas” e clique em “Personalizar.”
2. Adicionar uma Seção ou Bloco de App. Escolha adicionar uma nova seção ou bloco onde popups são suportados, como um popup de newsletter.
3. Selecione a função Popup ou Barra de Anúncio. Escolha a opção de popup integrada ou barra de anúncios, se o seu tema oferecer suporte.
4. Personalize o Conteúdo e a Aparência. Edite textos, imagens e opções de estilo fornecidas pelo tema.
5. Salvar e Publicar Alterações. Visualize suas alterações e publique-as para tornar o pop-up ativo.

Mais detalhes estão disponíveis na documentação oficial de ajuda da Shopify.

Popups personalizados com o código Shopify Liquid

O Shopify permite criar popups personalizados editando os arquivos Liquid do seu tema e adicionando HTML, CSS e JavaScript personalizados.

1. Acessar o Código do Tema. Vá para “Loja Online”, depois “Temas” e clique em “Editar código”.
2. Adicionar HTML para o Popup. Insira um contêiner de popup e o conteúdo no arquivo de tema relevante, como theme.liquid.
3. Inclua CSS para Estilização. Adicione CSS personalizado na folha de estilo do seu tema para estilizar o popup.
4. Adicione JavaScript para o comportamento. Escreva JavaScript para gerenciar a lógica de exibição do popup, como o timing ou ações do botão.
5. Teste e Publique. Verifique suas alterações no site e publique quando estiver satisfeito.

Mais detalhes estão disponíveis nos recursos para desenvolvedores do Shopify.

Recurso Popup do Shopify Email App

O app Shopify Email inclui um formulário popup de inscrição básico que pode ser ativado para construção de listas.

1. Instale o App de Email do Shopify. Adicione o App de Email do Shopify no seu painel de administração do Shopify.
2. Navegue até a Seção de Formulários. Vá para a área de Formulários ou Formulários de Inscrição no aplicativo.
3. Ative o Formulário Pop-up. Ative o recurso de formulário de inscrição pop-up.
4. Personalize Campos e Mensagem. Edite os campos do formulário, a chamada para ação e a aparência.
5. Ative e monitore.Habilite o popup e acompanhe as inscrições através do painel da aplicação.

Mais detalhes estão disponíveis na seção de ajuda do app Shopify Email.

Como esses métodos de adicionar popups se comparam?

Método	Pro Principal 👍	Principais Contras 👎
Widget Popup da Elfsight	Layouts altamente personalizáveis e gatilhos avançados.	É necessário uma conta para acessar o painel de controle.
Editor de Temas do Shopify	Fácil de configurar, sem necessidade de código.	Tipos de pop-up limitados e opções básicas de gatilho.
Código Liquid personalizado para Shopify	Controle total sobre o design do popup e seus gatilhos.	Exige conhecimentos de programação e é demorado para atualizar.
Popup do Shopify Email App	Captura de e-mails simples e gratuita para ampliar sua lista.	Funciona apenas para cadastros básicos por e-mail, sem popups promocionais.

Se você quer dicas práticas para fazer seu pop-up funcionar sem problemas e ficar incrível no seu site Shopify, continue lendo para as próximas dicas práticas.

📝 Checklist Essencial para o Sucesso do Widget de Popup

Com a experiência da equipe da Elfsight ao implantar e testar popups em milhares de sites, sabemos que pequenos ajustes de configuração fazem toda a diferença no desempenho. Abaixo estão nossas principais recomendações para você extrair o máximo do seu Popup Widget.

Em seguida, vamos apresentar um cenário real mostrando como uma empresa adicionou um Widget de Pop-up para destacar uma oferta por tempo limitado e ampliar sua lista de e-mails diretamente na página inicial.

Popup que guia visitantes turísticos sem atrapalhar a experiência.

Let’s Go Peak District, um diretório turístico abrangente que conecta viajantes com atrações, acomodações e experiências do Peak District, precisava de uma forma de comunicar informações importantes aos visitantes do site sem atrapalhar o layout da página ou prejudicar a experiência do usuário.

Antes do Elfsight

A equipe enfrentou desafios críticos de UX:

• Layouts de página estáticos não deixam espaço para mensagens promocionais ou informativas essenciais.
• Atualizações importantes sobre eventos, recursos especiais e serviços estavam se perdendo no conteúdo da página.
• Desenvolver popups personalizados exigia conhecimento de codificação e manutenção contínua.
• Sistemas de notificação genéricos prejudicaram a experiência de sites de turismo premium.

Solução: Implementando o Widget Popup da Elfsight

Phil integrou o widget Popup do Elfsight na página inicial para exibir informações importantes nos momentos estratégicos da jornada do usuário. O popup foi criado para soar nativo ao visual premium do site — aparecendo no momento certo sem soar intrusivo ou agressivo.

A estratégia de popups incluiu gatilhos direcionados e regras de exibição, assegurando que os popups aparecessem apenas quando relevantes para segmentos específicos de visitantes e apenas nas páginas onde agregavam valor, em vez de criar atrito. Essa abordagem direcionada significou que viajantes tomaram conhecimento de novas atrações ou experiências sazonais no momento exato em que tinham maior probabilidade de se envolver.

Resultados Reais

Após implementar o widget Popup do Elfsight:

• Engajamento de visitantes aprimorado: A colocação estratégica de pop-ups elevou as taxas de cliques em atrações e serviços em destaque, sem incomodar os visitantes.
• <strong>Melhor arquitetura de informações:</strong> Mensagens-chave aparecem no momento certo da jornada do usuário, aumentando o reconhecimento e a descoberta.
• Percepção de marca aprimorada: O design profissional de popup elevou a qualidade percebida da plataforma de turismo
• Sem interrupção no design: Ao contrário de banners estáticos tradicionais, popups aparecem de forma contextual, mantendo layouts de página limpos e a hierarquia visual
• Teste A/B fácil: As mensagens de popup e o tempo de exibição podem ser ajustados rapidamente para otimizar as conversões e o engajamento

O Panorama: Marketing Multicanal para Turismo

“Nós usamos bastante Formulários de Contato e vendemos widgets de avaliações ou Feeds do Instagram como upsell ou com nossos pacotes de listagem de maior valor. Isso funciona muito, muito bem.”

Phil Sproson, Let’s Go Peak District

O uso do Popup pela Let’s Go Peak District foi apenas um componente de uma estratégia maior que incluiu a Tabela de Preços para exibir pacotes de publicidade de forma transparente, o Calendário de Eventos para mostrar as atividades futuras do Peak District e o Formulário de Contato para captar consultas de negócios no turismo. Ao combinar essas ferramentas, a plataforma transformou-se em um ecossistema interativo onde viajantes encontram inspiração, descobrem experiências e negócios do turismo aumentam sua visibilidade.

Problemas do Popup do Shopify e Correções Práticas

Adicionar um popup a um site Shopify costuma ser simples, mas a prática mostra que os usuários enfrentam algumas dores persistentes, desde popups que não aparecem após a instalação até falhas de layout em determinados dispositivos. Vamos resolver esses problemas juntos:

Se ainda tiver problemas depois de tentar essas soluções, consulte o Centro de Ajuda oficial da Elfsight e os canais de suporte para orientações mais direcionadas.

Perguntas ou Ideias?

Esperamos que este guia ofereça uma base sólida para começar a adicionar popups ao seu site Shopify. Valorizamos ajudar você a criar uma experiência melhor para seus visitantes — então, se você tem feedback, ideias ou soluções criativas de popups para compartilhar, queremos ouvir você. Conecte-se com a equipe da Elfsight no X, Facebook ou LinkedIn para atualizações e conversas.