ℹ️ 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.

O Hoppy Announcement Bar oferece quatro formas distintas de apresentar mensagens na sua loja online. Cada tipo comporta-se de forma diferente, suporta configurações de conteúdo diferentes e foi concebido para casos de uso específicos.

Escolher o tipo certo no início da configuração ajuda-o a evitar retrabalho e garante que o anúncio funcione exatamente como esperado na loja publicada.

⚠️ Antes de Começar

O tipo de anúncio é selecionado no separador Content (Conteúdo) ao criar ou editar um anúncio.

Pode mudar de tipo a qualquer momento, mas tenha em conta:

• Alguns campos aparecem ou desaparecem consoante o tipo selecionado
• Os itens de conteúdo podem ser cortados ou expandidos ao mudar entre determinados tipos
• As definições de design e posicionamento são partilhadas entre todos os tipos

ℹ️ O tipo de anúncio não é o mesmo que o posicionamento. O posicionamento controla onde a barra aparece. O tipo controla como a barra se comporta.

📋 Os Quatro Tipos de Anúncio

1️⃣ Simple Announcement

O tipo Simple apresenta uma única mensagem estática. É o formato mais utilizado porque é direto e funciona para quase todos os casos de uso.

O que faz

• Mostra um anúncio com um título, subtítulo e apelo à ação opcional
• Mantém-se estático na página até o cliente sair ou fechá-lo
• Suporta todos os tipos de CTA: botão, clique em toda a barra, cupão, evento de acionamento ou sem CTA

Campos de conteúdo disponíveis

• Title (Título) — A mensagem principal. Suporta formatação de texto rico.
• Subheading (Subtítulo) — Uma linha secundária abaixo do título.
• Call to action type (Tipo de apelo à ação) — Escolha como os clientes interagem com a barra.

Comportamento do CTA

ℹ️ Quando Trigger App Event é selecionado, aparece um campo adicional Trigger ID (ID de acionador). Este ID deve corresponder ao nome do evento configurado na app receptora.

Melhor utilizado para

• Anúncios de promoções em toda a loja
• Atualizações da política de envio
• Ofertas por tempo limitado
• Promoções gerais

2️⃣ Running Line Announcement

O tipo Running cria um ticker horizontal contínuo em scroll — semelhante a uma faixa de notícias. O texto do título anima-se através da barra em loop.

O que faz

• Apresenta uma mensagem de título num scroll suave e contínuo
• A direção e a velocidade são totalmente configuráveis
• O campo Subheading fica oculto porque o formato depende de uma única linha em movimento

Campos de conteúdo disponíveis

• Title (Título) — A mensagem que corre pela barra. Suporta texto rico.
• Animation speed (Velocidade da animação) — Um cursor de 1 a 80 que controla a velocidade do movimento do texto.
• Run left to right (Correr da esquerda para a direita) — Uma caixa de verificação que inverte a direção de scroll predefinida.

Como funciona a velocidade de animação

• Valores mais baixos = scroll mais lento e legível
• Valores mais altos = movimento do ticker mais rápido
• A velocidade é calculada dinamicamente com base no comprimento do texto do título

Comportamento do CTA

Os anúncios Running suportam CTA de botão, cupão, acionamento e sem CTA. A opção Make entire bar clickable envolve a área de scroll num link.

Se for usado um botão ou cupão, estes aparecem estaticamente ao lado do texto em movimento.

Melhor utilizado para

• Alertas de vendas-relâmpago
• Prazos urgentes de envio
• Slogans de marca repetitivos
• Lembretes sensíveis ao tempo

⚠️ Importante: As barras em linha corrida funcionam melhor com títulos mais curtos. Mensagens muito longas podem criar ritmos de scroll desiguais em ecrãs mais pequenos.

3️⃣ Multiple Rotating Announcements

O tipo Multiple permite agrupar vários anúncios numa única barra que os percorre automaticamente. Os clientes veem uma mensagem de cada vez, com setas de navegação para consultar manualmente.

O que faz

• Percorre vários slides de anúncios
• Cada slide tem o seu próprio título, subtítulo e CTA
• Avança automaticamente com base numa duração de exibição configurável
• Inclui navegação por setas para a esquerda/direita

Campos de conteúdo disponíveis

• Announcement display duration (Duração de exibição do anúncio) — Um cursor de 1 a 10 segundos que controla quanto tempo cada slide fica visível antes de rodar automaticamente.
• Announcement #1, #2, #3... (Anúncio n.º 1, 2, 3...) — Cada slide é um bloco de conteúdo independente com o seu título, subtítulo e CTA.
• Add new announcement (Adicionar novo anúncio) — Adiciona slides adicionais.

Limites de slides

• Mínimo: 2 slides
• Máximo: 20 slides

Pode reordenar os slides usando as setas para cima/baixo e remover slides se tiver mais de 2.

Comportamento do CTA

Cada slide pode ter o seu próprio CTA independente. Um slide pode ter um botão, outro pode mostrar um cupão e um terceiro pode não ter CTA.

Tipos de CTA suportados por slide: botão, clique em toda a barra, cupão, acionamento ou nenhum.

Efeitos de animação

A transição entre slides é controlada pela definição Animation (Animação) no separador Design (Design):

• Slide — Transição horizontal padrão
• Fade — Transição suave de dissolução
• Cube — Efeito de rotação 3D em cubo
• Flip — Transição em estilo de virar carta

Melhor utilizado para

• Mostrar várias promoções ao mesmo tempo
• Anunciar diferentes categorias de produtos
• Rodar mensagens de envio, devoluções e confiança
• Destacar vários cupões sem sobrecarregar a página

4️⃣ Email Collection Banner

O tipo Email transforma a barra de anúncio num formulário de captura de leads. Apresenta um campo de entrada de email e um botão de submissão e, depois, mostra um estado de sucesso.

O que faz

• Apresenta um título, subtítulo e um campo de entrada de email
• Mostra uma Success Message (Mensagem de sucesso) depois de o cliente submeter o email
• Pode incluir um código de cupão como recompensa pela subscrição

Campos de conteúdo disponíveis

• Title (Título) — A mensagem principal a convidar os clientes a subscreverem.
• Subheading (Subtítulo) — Texto de apoio abaixo do título.
• Button text (Texto do botão) — O rótulo do botão de submissão. Predefinido como Subscribe (Subscrever) se deixado em branco.
• Success Message (Mensagem de sucesso) — O texto de confirmação mostrado após uma submissão de email bem-sucedida.
• Email Placeholder (Placeholder de email) — O texto de sugestão dentro do campo de email vazio.

Comportamento do CTA

As barras de recolha de email suportam dois modos de CTA:

• Button — Um botão de submissão padrão. A barra recolhe o email e mostra o estado de sucesso.
• Coupon — Apresenta um código de cupão junto ou em vez do campo, com um botão de cópia opcional.

As opções Make entire bar clickable e Trigger App Event não estão disponíveis para este tipo porque a barra está construída à volta da submissão do formulário.

Pré-visualização do estado de sucesso

Na pré-visualização da app, verá duas barras empilhadas:

1. O formulário ativo de recolha de email
2. A barra da mensagem de sucesso

Na loja online publicada, os clientes só veem o estado de sucesso depois de submeterem o email.

Melhor utilizado para

• Construir listas de newsletters
• Oferecer códigos de desconto em troca de emails
• Inscrições em listas de espera antes do lançamento
• Promover programas VIP ou de fidelização

🔀 Como a Seleção do Tipo Afeta as Definições Visíveis

Escolher um tipo de anúncio altera dinamicamente os campos que aparecem no separador Content (Conteúdo). Aqui fica uma referência rápida:

Campos que aparecem por tipo

Limites dos itens de conteúdo

• Simple, Running, Email — Apenas é utilizado o primeiro item de conteúdo. Mesmo que existam vários itens no modelo de dados, apenas o primeiro é apresentado.
• Multiple — Todos os itens de conteúdo são utilizados como slides individuais.

⚠️ Se mudar de Multiple para Simple, os slides extra são preservados em segundo plano, mas não são exibidos. Voltarão a aparecer se mudar de volta para Multiple.

🎯 Explicação dos Tipos de Apelo à Ação

O comportamento do CTA é maioritariamente consistente entre os tipos de anúncio, com algumas exceções específicas de cada tipo.

No call to action

A barra é puramente informativa. Não são apresentados botões, links nem áreas clicáveis.

Button

Aparece um botão clicável. Configura:

• Button text (Texto do botão) — O que o botão diz
• Link (Ligação) — Para onde o botão navega

Make entire bar clickable

Toda a área do anúncio torna-se um link. Clicar em qualquer lugar da barra navega para o URL configurado.

ℹ️ Se a barra contiver elementos clicáveis aninhados, como ícones sociais, estes continuam a funcionar independentemente. O clique em toda a barra não os substitui.

Coupon

Apresenta uma caixa de cupão estilizada. Configura:

• Coupon Code (Código do cupão) — O código de desconto real
• Show copy button (Mostrar botão de cópia) — Adiciona um ícone de cópia com um clique ao lado do código

Trigger App Event

Em vez de navegar para um URL, o botão dispara um CustomEvent no navegador. Configura:

• Trigger ID (ID de acionador) — A string do nome do evento (por exemplo, my-app:open-modal)

Outras apps ou scripts personalizados do tema que escutem este nome de evento podem responder.

⚠️ Os CTAs de acionamento não estão disponíveis nas barras de recolha de Email porque a ação principal da barra é a submissão do formulário.

🎨 Comportamento do Design por Tipo

A maioria das definições de design aplica-se universalmente, mas algumas comportam-se de forma diferente consoante o tipo.

Definição Animation (separador Design)

• Simple & Email — A animação controla o efeito de entrada quando a barra carrega pela primeira vez.
• Running — A velocidade da animação é controlada no separador Content (Conteúdo), não no separador Design (Design).
• Multiple — A animação controla o efeito de transição entre slides (slide, fade, cube, flip).

Ícones sociais

Podem ser adicionados ícones de banner a todos os tipos. Controla a visibilidade separadamente para desktop e mobile.

• Os ícones aparecem estaticamente ao lado do conteúdo
• Cada ícone pode ligar para um URL ou permanecer não clicável

Ícone de fecho

Todos os tipos suportam o ícone de fecho. Quando ativado, pode configurar:

• Appear again after (Voltar a aparecer após) — Quantas horas ou dias até a barra voltar a aparecer para um visitante recorrente

Se não for definido um tempo de reaparecimento, a barra permanece oculta permanentemente depois de fechada.

📱 Comportamento em Mobile

Os quatro tipos de anúncio são totalmente responsivos. No entanto, os ajustes de layout acontecem automaticamente:

• As barras de recolha de email empilham-se verticalmente em mobile — o campo de entrada e o botão aparecem em linhas separadas
• As barras rotativas Multiple reduzem o espaçamento das setas e diminuem ligeiramente os tamanhos de fonte
• As barras em linha corrida mantêm a velocidade de scroll, mas comprimem os tamanhos dos ícones se os ícones sociais estiverem ativados
• As barras Simples com botões podem alinhar o texto ao centro em ecrãs mais pequenos, consoante o tipo de CTA

Pode substituir a aparência em mobile usando o painel Custom CSS (CSS personalizado) no separador Design (Design), se necessário.

💡 Exemplos de Casos de Uso

Exemplo 1 — Barra simples com cupão

• Type: Simple
• Title: "Summer Sale is Live ☀️"
• Subheading: "Use code SUNNY for 20% off"
• CTA: Coupon
• Coupon code: SUNNY
• Resultado: Uma barra limpa e estática com um código de desconto copiável.

Exemplo 2 — Ticker corrido para urgência

• Type: Running
• Title: "Free shipping ends tonight at midnight ⏰"
• Animation speed: 25
• CTA: None
• Resultado: Uma mensagem de urgência em scroll contínuo no topo da loja.

Exemplo 3 — Vários slides para coleções diferentes

• Type: Multiple
• Slide 1: "Up to 50% off Shoes →" com botão a apontar para /collections/shoes
• Slide 2: "New Arrivals in Accessories →" com botão a apontar para /collections/accessories
• Slide 3: "Free returns on all orders" sem CTA
• Display duration: 4 seconds
• Resultado: Uma barra que percorre automaticamente três promoções distintas.

Exemplo 4 — Recolha de email com recompensa de cupão

• Type: Email
• Title: "Join the VIP list"
• Subheading: "Get 15% off your first order"
• Button text: "Get My Code"
• Success Message: "Welcome! Your code WELCOME15 is ready."
• Email Placeholder: "Enter your email"
• Resultado: Uma barra de captura de leads que recompensa os subscritores com um cupão instantâneo.

⚠️ Notas Importantes e Limitações

Mudança de tipo

Mudar entre tipos não elimina o seu conteúdo. No entanto:

• Mudar de Multiple para Simple oculta os slides extra
• Mudar de Running para Simple revela novamente o campo Subheading
• Mudar para Email oculta os campos Trigger ID se estiverem previamente definidos

Reveja sempre o conteúdo depois de alterar tipos.

Comprimento da linha corrida

Títulos muito longos em barras corrida podem causar ritmos de scroll desiguais, especialmente em mobile. Teste com o comprimento real da mensagem antes de publicar.

Mínimo de slides no Multiple

Não pode publicar um anúncio Multiple com menos de 2 slides. Se precisar de apenas uma mensagem, utilize o tipo Simple.

Estado de sucesso da barra de email

O estado de sucesso só aparece depois de o cliente submeter um email. A pré-visualização dentro da app mostra ambos os estados empilhados para referência, mas os clientes na loja publicada veem primeiro o formulário.

Clique em toda a barra e elementos aninhados

Quando Make entire bar clickable está ativado, clicar nos ícones sociais ou no botão de cópia continua a funcionar como esperado. O clique em toda a barra ignora esses elementos interativos aninhados.

🎉 Resultado Final

Compreender os quatro tipos de barra de anúncio ajuda-o a escolher o formato certo para o seu objetivo:

✅ Simple — Ideal para promoções únicas e estáticas
✅ Running — Ideal para urgência e mensagens em estilo ticker repetitivo
✅ Multiple — Ideal para rodar várias ofertas num único posicionamento
✅ Email — Ideal para recolher leads e aumentar as listas de subscritores

Cada tipo suporta o mesmo sistema de design, regras de posicionamento, agendamento e lógica de segmentação. A diferença está apenas na forma como o conteúdo é apresentado e com o que interage.

Escolher o tipo correto desde o início garante que o anúncio pareça nativo da sua loja online e transmita a mensagem certa no formato certo 🚀

Actualizado em: 10/09/2026