> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 🎋 Como Configurar uma Announcement Bar > ℹ️ **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 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: | Type | Melhor Para | | ----- | ----- | | **Simple** | Uma única mensagem estática | | **Running** | Um letreiro ou marquee rolante | | **Multiple** | Slides rotativos com várias mensagens | | **Email** | Coletar endereços de e-mail dos visitantes | ### **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\! 🥂