Quer compartilhar atualizações, promoções ou mensagens importantes com cada visitante que chegar à sua loja? 📢

Uma Announcement Bar é uma das formas mais fáceis de chamar a atenção sem interromper a experiência de compra. Seja uma liquidação relâmpago, uma atualização de envio ou um convite para inscrição na newsletter, uma barra bem posicionada mantém os clientes informados desde o momento em que chegam.

Este guia mostra todo o processo de configuração — desde a criação da sua primeira barra até deixá-la no ar na sua loja 🚀

📍 O Que Você Vai Aprender

Ao final deste guia, você saberá como:

• Criar uma nova Announcement Bar
• Escolher o posicionamento e o tipo de barra certos
• Adicionar sua mensagem e call-to-action
• Aplicar um design que combine com a sua marca
• Definir onde e quando ela aparece
• Publicá-la na sua loja

✅ Antes de Começar

Certifique-se de que o app embed Hoppy Announcement Bar está ativado no seu tema. Sem isso, a sua barra não aparecerá na loja, não importa o quão perfeitamente configurada esteja.

Para ativá-lo:

1. Acesse Shopify Admin → Sales Channels → Online Store → Themes
2. Clique em Edit Theme no seu tema ativo
3. Selecione App Embeds na barra lateral esquerda
4. Encontre Announcement Bar/Banner
5. Ative a opção ON
6. Clique em Save

💡 Já está ativado? Você está pronto para começar!

⚙️ Etapa 1 — Criar um Novo Anúncio

Abra o app Hoppy Banners no seu admin da Shopify.

No painel, clique em Create New Announcement.

Você será levado à tela de seleção de posicionamento.

📌 Etapa 2 — Escolher um Posicionamento

O posicionamento define onde a sua Announcement Bar aparecerá na loja.

Você verá seis opções:

• Storefront Page — Aparece na sua loja principal (início, produtos, coleções etc.)
• Email Collection Bar — Uma barra focada em coletar e-mails dos visitantes
• Cart Page — Aparece na página dedicada do carrinho
• Cart Drawer — Aparece dentro do carrinho lateral deslizante
• Checkout Page — Aparece durante o checkout (apenas Shopify Plus)
• Custom Position — Posicione manualmente em páginas específicas de produto ou coleção

Selecione a que se encaixa no seu objetivo. Para a maioria dos lojistas, Storefront Page é o melhor ponto de partida.

Depois de selecionar, clique em Continue.

🎨 Etapa 3 — Escolher um Preset (ou Começar do Zero)

Em seguida, você verá uma coleção de visual presets — combinações pré-projetadas de cores, fontes e layouts.

Você pode:

• Choose a preset para agilizar o seu design
• Ou clicar em Make your Own para construir tudo manualmente

Não se preocupe — você pode alterar todos os detalhes do design depois. Os presets apenas economizam tempo ⏱️

Depois de selecionar um preset (ou escolher começar do zero), o editor abrirá automaticamente.

📝 Etapa 4 — Adicionar o Seu Conteúdo

Você chegará na aba Content. É onde você escreve a sua mensagem e escolhe como a barra se comporta.

🏷️ Announcement Name

Isso é apenas para a sua referência interna. Os clientes não verão.

Use algo reconhecível, como:

• Banner de Liquidação de Verão
• Alerta de Frete Grátis
• Cabeçalho da Black Friday

💡 Bons nomes ajudam quando você tem várias barras ativas ao mesmo tempo.

📢 Announcement Type

Isso controla como a sua mensagem é exibida. Existem quatro tipos:

Escolhendo um Tipo

• Simple é perfeito para uma mensagem clara — como "Frete Grátis em Pedidos Acima de US$ 50."
• Running funciona muito bem para urgência ou liquidações relâmpago. Quando selecionado, você verá um controle deslizante Animation Speed e uma caixa de seleção para alterar a direção da rolagem.
• Multiple permite alternar entre até 20 slides diferentes. Quando selecionado, aparece um controle deslizante Display Duration para controlar quanto tempo cada slide fica visível.
• Email transforma a barra em uma ferramenta de captura de leads. Quando selecionado, as opções padrão de CTA são substituídas por um campo Success Message e Email Placeholder.

💡 Você sempre pode voltar e trocar de tipo depois.

✍️ Title & Subheading

• Title — Esta é a sua mensagem principal. Aceita formatação de texto rico (negrito, itálico, links, cores).
• Subheading — Uma linha de apoio menor abaixo do título.

ℹ️ O campo Subheading fica oculto se você selecionar o tipo Running, já que barras marquee normalmente usam uma única linha de texto.

🔗 Call to Action (CTA)

O seu CTA diz aos clientes o que fazer em seguida.

Escolha um CTA Type:

• No Call to Action — Sem botão ou link
• Button — Um botão clicável com texto personalizado e um link
• Make entire bar clickable — A barra inteira se torna clicável
• Coupon — Exibe um código de cupom com um botão para copiar
• Trigger App Event — Dispara um evento personalizado para uso com outros apps

Se você selecionar Button, Make entire bar clickable ou Trigger App Event, verá campos para o link ou texto do botão. Se selecionar Coupon, aparece um campo Coupon Code junto com uma caixa de seleção para mostrar um ícone de cópia.

🚪 Close Icon

Ative isso se quiser que os clientes possam fechar a barra.

Quando ativado, dois campos extras aparecem:

• Appear again after — Quanto tempo até a barra reaparecer para aquele visitante
• Unit — Horas ou dias

Isso é útil se você não quiser incomodar visitantes recorrentes com a mesma mensagem.

🎭 Banner Icons

Os Banner Icons permitem adicionar ícones clicáveis de redes sociais ou da marca diretamente dentro da Announcement Bar para maior engajamento e acesso rápido a plataformas externas.

Isso é especialmente útil para promover perfis de redes sociais, comunidades ou links externos importantes sem adicionar texto extra à barra.

📌 Número Máximo de Ícones Permitidos

Você pode adicionar até 6 Banner Icons em uma única configuração de Announcement Bar.

Isso ajuda a manter um layout limpo e equilibrado tanto em desktops quanto em dispositivos móveis.

🖥️ Visibilidade em Desktop e Mobile

Cada ícone pode ser configurado para aparecer em:

• Dispositivos desktop
• Dispositivos móveis
• Ou em ambos simultaneamente

Isso oferece mais flexibilidade, dependendo de como você quer que a Announcement Bar apareça em diferentes tamanhos de tela.

🔄 Substituir Ícone

Os ícones podem ser substituídos a qualquer momento usando a Icon Library integrada.

Comportamento Disponível

• Navegar pelos ícones disponíveis na Icon Library
• Substituir ícones existentes instantaneamente
• Atualizar ícones sem afetar o restante da configuração

⚠️ Importante:

O upload de ícones personalizados não é suportado no momento. Apenas ícones disponíveis na Icon Library podem ser usados.

🔗 Call to Action (CTA)

Cada Banner Icon pode, opcionalmente, ter o seu próprio comportamento de Call to Action.

Opções Disponíveis

• No call to action
• Add Link

➕ Add Link

Quando Add Link é selecionado:

→ Aparece o campo CTA Link

Isso permite que o ícone redirecione visitantes para páginas externas ou internas.

Exemplos de Uso

• Perfis de redes sociais
• Chats do WhatsApp
• Comunidades do Discord
• Coleções de produtos
• Páginas de destino promocionais

⚠️ Observações Importantes

• Cada ícone pode ter o seu próprio comportamento de CTA independente
• Alguns ícones podem permanecer não clicáveis enquanto outros redirecionam visitantes
• Remover um ícone remove apenas esse ícone específico e não afeta os demais
• A disposição dos ícones pode impactar o espaçamento e a visibilidade em telas menores de dispositivos móveis

💡 Para a melhor experiência na loja, evite sobrecarregar a Announcement Bar com muitos ícones e links simultaneamente.

🎨 Etapa 5 — Escolher um Design

Clique na aba Design para estilizar a sua barra.

Para uma configuração rápida, foque nesses itens essenciais:

• Template — Escolha entre mais de 20 estilos prontos ou fique com o seu preset
• Visibility — Escolha se ela aparece em Desktop and Mobile, Desktop Only ou Mobile Only
• Background — Selecione Single Color, Gradient ou Pattern
• Typography — Escolha uma fonte e defina a cor do título
• Button — Ajuste a cor do botão, a cor do texto e o raio dos cantos (se estiver usando um CTA do tipo Button)

💡 Para uma personalização mais aprofundada do design — incluindo animações, CSS personalizado, efeitos avançados de botão e estilização de ícones sociais — consulte a documentação dedicada Design & Styling.

📍 Etapa 6 — Definir Posição e Visibilidade

Clique na aba Placement para controlar onde e quando a sua barra aparece.

📐 Display Position

Isso define a localização física da barra:

• Top Push — Empurra o conteúdo da página para baixo
• Top Push (Sticky) — Permanece fixo no topo ao rolar
• Top Overlap — Flutua sobre a parte superior da página
• Top Overlap (Sticky) — Flutua e permanece fixo ao rolar
• Bottom Overlap (Sticky) — Aparece na parte inferior da janela de visualização
• Manual — Você mesmo posiciona usando um snippet de código ou bloco de app

ℹ️ Se você selecionar Manual, o menu suspenso de segmentação de página será desativado e um snippet de código será fornecido para você colar no seu tema.

🎯 Page Targeting

Decida em quais páginas a barra aparece:

• Every page
• Home page only
• All products
• Products in specific collections
• Specific products
• All collections
• Specific collections

Se você escolher uma opção "specific", aparece um botão Select Products ou Select Collections para que você escolha exatamente onde ela será exibida.

⏰ Scheduling

Quer que a barra fique no ar mais tarde ou pare automaticamente? Defina uma Start Date e uma End Date.

Se deixados em branco, a barra aparece imediatamente e permanece no ar até que você a despublique manualmente.

💡 Opções avançadas de segmentação — incluindo tags de cliente, geolocalização, fontes UTM e atrasos de tempo no site — estão disponíveis na mesma aba. Elas são abordadas em detalhes na documentação Advanced Targeting.

🚀 Etapa 7 — Publicar a Sua Barra

Quando estiver tudo certo, é hora de colocar no ar.

Clique em Publish no canto superior direito.

Um banner de sucesso aparecerá. Se o seu App Embed já estiver ativado, está tudo pronto! 🎉

Se o App Embed não estiver ativado, o banner irá lembrá-lo e fornecer um link rápido para ativá-lo no editor do tema.

⚠️ Importante: Salvar sozinho não torna a barra visível para os clientes. Você deve clicar em Publish.

🎉 Resultado Final

Depois de publicada com sucesso:

✅ A sua Announcement Bar aparece nas páginas selecionadas
✅ Os clientes veem a sua mensagem assim que visitam a loja
✅ O seu CTA gera cliques, inscrições ou vendas
✅ O design se integra perfeitamente à identidade visual da sua loja
✅ Você pode editar, duplicar ou despublicar a qualquer momento pelo painel

📚 Documentação Relacionada

Quer ir mais longe? Confira estes guias dedicados:

• Design & Styling — Personalização profunda de cores, fontes, animações e CSS personalizado
• Advanced Targeting — Geolocalização, tags de cliente, filtragem UTM e regras de tempo no site
• Translations — Execução de Announcement Bars multilíngues
• Troubleshooting — O que fazer se a sua barra não estiver aparecendo

Bons anúncios! 🥂

Actualizado em: 01/09/2026