ℹ️ Note: Este artigo foi traduzido automaticamente utilizando IA e pode conter imprecisões. Se algo parecer errado, entre em contato com nossa equipe de suporte.

Quer transformar a coleção de email em um jogo divertido e interativo? 🎉

Spin Wheel PopUps permite que os visitantes giram uma roda colorida para ganhar descontos, frete grátis, ou ofertas especiais. É uma das formas mais envolventes de aumentar sua lista de assinantes ao mesmo tempo que proporciona aos clientes uma experiência memorável de marca.

Este guia leva você através de toda a configuração para que você possa lançar seu primeiro Spin Wheel PopUp em minutos.

✅ Antes de começar — habilite o aplicativo para incorporar

Para que qualquer popup apareça em seu storefront, o aplicativo embed deve ser ativado dentro de seu Shopify tema.

Ir para:

Shopify Admin → Canais de Vendas → Loja online → Temas → Editar Tema → App Incorpora

Depois:

• Procurar Hoppy Popups
• Alternar ON
• Clique Gravar

ℹ️ Sem este passo, seu popup não renderizará na frente da loja mesmo após a publicação.

⚙️ Passo 1 — Criar uma nova roda de rotação

Abrir o Hoppy PopUps app.

Depois:

→ Clique Criar um Novo PopUp

→ Selecionar Avançar a Roda da lista de tipos de contexto.

A página de configuração abrirá automaticamente com uma roda pré-construída pronta para personalizar.

📝 Passo 2 — Configurar o Conteúdo

Depois de abrir a página de configuração, você vai pousar dentro do Conteúdo tab.

Esta seção controla o que seus visitantes veem e como eles interagem com o popup.

🏷️ Nome da janela

Este campo é utilizado apenas para fins internos. Os clientes nunca verão este nome.

Você pode usar qualquer nome reconhecível como:

• Campanha de Volta e Vitória
• Roda de descontos
• Popup de Volta da Sorte
• Oferta de roda de aniversário

💡 Usar a nomenclatura interna adequada torna mais fácil identificar configurações mais tarde, especialmente se sua loja executar várias campanhas.

💬 & Descrição do Título

Estes aparecem no topo do seu popup e deve convidar os visitantes para jogar.

Exemplo

• Título: "Acelere a roda e ganhe"
• Descrição: "Tente a sua sorte e desbloqueie um desconto especial"

Você pode personalizar estes para corresponder à sua voz de campanha.

📧 Coleção de e- mail e telefone

Escolha os campos a mostrar no seu popup:

• Mostrar o campo de recolha de e- mails — captura e-mails de visitantes
• Mostrar campo de número de telefone — capta números de telefone com selecção de código de país

Você pode mostrar ambos, apenas um, ou nenhum dos dois, se você estiver executando puramente um jogo sem coleção.

⚙️ Configuração Adicional do Cupom da Colecção

Esta seção lhe dá controle adicional sobre como as informações do visitante são coletadas e como os descontos são apresentados dentro do popup.

📩 Substituição do Campo de Colecção de E- mail

Personalize o texto do placeholder mostrado dentro do campo de entrada de e- mail.

Exemplo

• "Entra no teu email"
• "O teu melhor endereço de e-mail"

Isso ajuda a orientar os visitantes sobre quais informações devem inserir.

❌ Mensagem de Erro de E- mail

Defina a mensagem de validação mostrada quando um visitante entra em um endereço de e- mail inválido.

Exemplo

• "Introduza um endereço de e-mail válido"

Isto aparece automaticamente se o formato de e- mail introduzido estiver incorreto.

📱 Código padrão do país

Escolha o código padrão do país para o campo de número de telefone.

Exemplo

• Estados Unidos (+1)
• Reino Unido (+44)
• Índia (+91)

Os visitantes ainda podem mudar o país manualmente, a menos que restrito.

📞 Número de telefone

Personalize o texto do placeholder mostrado dentro do campo de número de telefone.

Exemplo

• "Digite o seu número de telefone"
• Número móvel

Isso melhora a clareza e incentiva a formatação adequada.

⚠️ Mensagem de Erro do Número de Telefone

Configure a mensagem exibida quando for inserido um número de telefone inválido.

Exemplo

• "Introduza um número de telefone válido"

Isso ajuda os visitantes a entender por que a submissão falhou.

🔘 Texto do Botão

Personalize o texto do botão chamada a ação mostrado dentro da janela.

Exemplo

• "Compra Agora"
• "Claim Discount"
• "Desbloquear a Oferta"

Usar texto orientado para ação pode melhorar conversões.

☑️ Adicionar uma opção de seleção

Escolha se deve mostrar uma opção adicional dentro da janela.

Isto pode ser utilizado para:

• Autorização de comercialização
• Autorização SMS
• Subscrições da Newsletter
• Reconhecimento dos termos

Opções disponíveis:

• Sim. — mostra a caixa de verificação
• Não — esconde a caixa de verificação

❎ Fechar Ícone

Activar ou desactivar o ícone de fecho mostrado na janela.

• Activado — os visitantes podem fechar manualmente o popup
• Desactivado — remove o ícone de perto do popup

Isso ajuda a controlar o quanto a experiência popup deve ser descartável.

✉️ Mensagens de Sucesso

Depois de um visitante enviar seus detalhes e girar a roda, aparece uma mensagem de sucesso.

• Mensagem de Sucesso: "Bem-vindo à nossa loja!"

Você também pode adicionar um Descrição do Sucesso — por exemplo, instruções sobre como redimir o prémio que acabaram de ganhar.

🖱️ Comportamento do Botão de Clique

ℹ️ Esta opção só está disponível quando "Mostrar campo de e-mail" e "Mostrar campo de número de telefone" não estiverem assinalados.

Ele permite que você controle o que acontece quando um visitante clica no botão CTA dentro do popup. Trata de um dos seguintes elementos:

1. Fechar o Popup — o popup fechará
2. Revele o Código dos Cupões — o código do cupom será revelado ao visitante, mas você terá configurado o Código do Cupom como descrito acima na seção "Mostrar Código do Cupom".
3. Redirecionar para a Ligação — selecionando isso lhe daria um campo de entrada chamado "Link" onde você pode especificar o URL para o qual o visitante será redirecionado

☁️ Botão de ação flutuante

Você pode adicionar um Botão de ação flutuante que permanece visível na página para que os visitantes possam reabrir o popup após fechá-lo.

Escolha uma posição:

• Inferior direito
• Fundo esquerdo
• Ecrã à direita
• Tela à esquerda

Em seguida, digite o Texto do Botão — por exemplo, "Oferta aberta", "Get Discount" ou "Learn More".

Para desativar completamente o botão flutuante, selecione Desactivar o botão de acção flutuante.

🎡 Passo 3 — Configurar as Recompensas da Roda

Ainda dentro da Conteúdo tab, rolagem para o Recompensas da Roda secção.

É aqui que você define cada fatia na roda — o que os visitantes podem ganhar e como é provável que eles ganhem.

💸 Aplicação de Desconto

Esta opção controla como o desconto é aplicado. Tem duas opções:

1. O cliente terá que aplicar o desconto manualmente — o cliente terá de indicar o código do cupão durante o checkout para receber o desconto.
2. Aplicar o Desconto automaticamente — o desconto será aplicado automaticamente durante o check-out sem que o cliente tenha de introduzir o código do cupão.

⚠️ Importante:

• Nosso aplicativo não cria ou gerencia códigos/descontos de cupom. Você deve criá-los em Shopify Admin → Descontos antes de usá-los no popup.

🎁 Adicionando & Edição de cortes

Cada fatia na roda tem quatro configurações:

Configuração

O que ele faz

Legenda

O texto mostrado na fatia da roda (por exemplo, "10% OFF", "Free Ship")

Peso da probabilidade

Um número que controla com que frequência esta fatia ganha. Maior = mais provável.

Código de Desconto

O código de cupão que o visitante recebe se esta fatia cair. Pode ficar em branco.

Mensagem

Uma mensagem personalizada mostrada após girar (por exemplo, "Tente novamente da próxima vez...")

Configuração do Exemplo

Legenda

Probabilidade

Código

Mensagem

3 dólares de desconto

20

SAVE3

""

NAVIOS LIVRE

20

LIBERDADE7

""

7% OFF

20

SAVE7P

""

Sem sorte.

10

""

"Tente novamente da próxima vez..."

12% OFF

10

SAVE12P

""

🎟️ Adicionando códigos de cupons de desconto

Para exibir um código de cupom, você pode:

1. Selecione um dos códigos de cupons em que você criou Shopify Admin → Descontos clicando em Selecionar / Mudar Desconto.
2. Você pode criar um novo clicando em Criar um novo desconto.

Exemplo

• SAVE10
• Bem-vindo20
• COUPON123

➕ Adicionar mais cortes

Clique Adicionar mais criar segmentos adicionais de roda. Não há limite estrito — adicione quantos você gosta de fazer a roda se sentir emocionante e variada.

🗑️ Remover os cortes

Clique no ícone de lixo ao lado de qualquer fatia para removê-lo. As probabilidades de cortes restantes determinarão automaticamente as novas chances de vitória.

🎨 Passo 4 — Projete sua Roda (Opcional)

Mudar para o Desenho aba para ajustar como a roda de giro parece.

Opções específicas da roda você encontrará aqui:

• Cor dos cortes — cores alternadas para segmentos de rodas
• Cor e fonte da etiqueta da fatia — estilo de texto na própria roda
• Cor da Roda — o anel exterior da roda
• Cor da Seta — o indicador no topo
• Cor do Círculo Central — o centro no meio
• Cor e fonte da mensagem de corte — styling para mensagens pós-folha

💡 A roda de rotação PopUp vem com cores quentes, playful padrão. Você pode mantê-los ou alinhá-los com sua marca.

Para uma análise completa de todas as opções de design, consulte a documentação dedicada ao Design & Styling.

🖱️ Passo 5 — Definir as Regras de Ativação e Exibição

Mover para o Colocação/Targeting aba para controlar quando e onde a sua roda de rotação aparece.

Configurações de chave que você encontrará:

• Tipo de gatilho — After Time, Page Scroll, Exit-intent, Add to cart button clicked or After page views
• Frequência de exibição — Mostrar sempre, uma vez por visita, ou limitar com uma refrigeração
• Alvo da Página — Cada página, casa apenas, produtos específicos, coleções, ou etiquetas
• Alvo do Cliente — Status de login, etiquetas de cliente, vida útil
• Geolocalização — Todos os países mundiais ou específicos
• Agendamento — Datas de início e de termo facultativas

Para explicações profundas de cada opção de segmentação, consulte a documentação de Segmentação Avançada dedicada.

✅ Passo 6 — Salvar e Publicar

Depois de tudo parecer bom:

1. Clique Gravar para guardar a sua configuração
2. Clique Publicar para fazer o popup ao vivo em sua loja

⚠️ Salvar sozinho não torna o popup visível para os clientes. Tem de publicá-lo.

Se o aplicativo incorporado ainda não está habilitado, um banner irá lembrá-lo de ativá-lo em seu Shopify Editor de temas.

🎉 Resultado Final

Uma vez configurado com sucesso:

✅ Visitantes vêem uma roda de giro interativa em sua loja
✅ Cada rotação oferece uma recompensa aleatória com base em suas configurações de probabilidade
✅ E-mails e números de telefone são coletados automaticamente (se ativado)
✅ Códigos de desconto são revelados após a rotação
✅ Seu popup respeita regras de segmentação, agendamento e configurações do dispositivo

Sua roda de giro PopUp está agora ao vivo e pronto para encantar seus visitantes 🚀

Actualizado em: 10/09/2026