ℹ️ 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 que a sua barra de anúncio apareça em um local específico que o posicionamento automático não cubra? 🎯

O posicionamento personalizado dá a você controle total sobre exatamente onde a barra aparece — seja dentro de uma seção específica do seu tema, abaixo da sua navegação, dentro da área de descrição de um produto ou em qualquer outro lugar onde seja possível adicionar um snippet de código ou um bloco de app.

Este guia mostra passo a passo como configurar uma barra de anúncio com posicionamento manual para que ela seja renderizada exatamente onde você quiser ✨

✅ Antes de começar

Certifique-se de que o embed do app Hoppy Announcement Bar esteja ativado no seu tema. Mesmo com posicionamento personalizado, o embed carrega os scripts e estilos necessários.

Para ativá-lo:

1. Acesse Shopify Admin → Sales Channels → Online Store → Themes
2. Clique em Edit Theme (Editar tema) no seu tema ativo
3. Selecione App Embeds (Embeds de app) na barra lateral esquerda
4. Encontre Announcement Bar/Banner (Barra/Banner de anúncio)
5. Defina-o como ON (Ativado)
6. Clique em Save (Salvar)

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

⚙️ Etapa 1 — Criar um novo anúncio

Abra o app Hoppy Announcement Bar a partir do seu admin Shopify.

No painel, clique em Create New Announcement (Criar novo anúncio).

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

📌 Etapa 2 — Selecionar a posição personalizada

Nas opções de posicionamento, escolha Custom Position (Posição personalizada).

Isso informa ao app que você — e não o injetor automático — decidirá exatamente onde a barra aparece na sua loja.

Depois de selecionar, clique em Continue (Continuar).

🎨 Etapa 3 — Criar o design da sua barra

Monte a sua barra de anúncio como quiser:

• Adicione o title (título), o subheading (subtítulo) e o CTA (call-to-action)
• Escolha um announcement type (tipo de anúncio): Simple (Simples), Running (Rotativo), Multiple (Múltiplo) ou Email (E-mail)
• Estilize-a na aba Design (Design)

💡 Para orientações detalhadas de design — incluindo modelos, cores, animações e CSS personalizado — consulte a documentação dedicada Design & Styling (Design e estilo).

📍 Etapa 4 — Definir a posição de exibição como Manual

Clique na aba Placement (Posicionamento).

No menu suspenso Display Position (Posição de exibição), selecione Manual (Manual).

Ao fazer isso:

• O menu suspenso Page Targeting (Segmentação de página) é automaticamente desativado e definido como Custom (Personalizado)
• A barra não será mais injetada automaticamente na página
• Em vez disso, ela aguardará que você a posicione usando um snippet de código ou um bloco de app

É exatamente isso que faz o posicionamento personalizado funcionar 🛠️

📋 Etapa 5 — Copiar o snippet de posicionamento

Assim que a barra for salva, a aba Placement exibe um snippet de código copiável:

<div class="futureblink-announcement-block" id="{announcementId}"></div>

Cada anúncio tem um ID exclusivo. O snippet informa ao app exatamente qual barra renderizar dentro daquele container.

Clique no botão de cópia para salvá-lo na área de transferência 📋

🧩 Etapa 6 — Adicionar o snippet ao seu tema

Você tem duas formas de posicionar o snippet:

Opção A — Usando um bloco de app (recomendado)

Este é o método mais fácil e funciona com temas da Online Store 2.0.

1. Acesse Shopify Admin → Sales Channels → Online Store → Themes
2. Clique em Edit Theme no seu tema ativo
3. Navegue até a página ou seção onde você deseja a barra
4. Clique em Add Section (Adicionar seção) ou Add Block (Adicionar bloco)
5. Vá para a aba Apps (Aplicativos)
6. Selecione Hoppy Announcement Bar
7. Cole o seu Announcement ID (ID do anúncio) nas configurações do bloco
8. Arraste o bloco até a posição desejada
9. Clique em Save (Salvar)

Opção B — Usando um snippet Liquid personalizado

Use esta opção se quiser posicionar a barra dentro de um arquivo Liquid específico ou de um tema que não seja OS 2.0.

1. Acesse Shopify Admin → Sales Channels → Online Store → Themes
2. Clique no menu ... do seu tema ativo → Edit Code (Editar código)
3. Abra o arquivo Liquid onde você deseja que a barra apareça
4. • Exemplos comuns: theme.liquid, product.liquid, header.liquid
4. Cole o snippet onde você deseja que ele seja renderizado
5. Clique em Save (Salvar)

⚠️ Importante:

• Cole o snippet apenas uma vez por barra
• Se o mesmo ID aparecer várias vezes na mesma página, a barra pode ser renderizada em cada container correspondente
• Certifique-se de que o container esteja dentro da tag <body>, não dentro de <head>

🚀 Etapa 7 — Salvar e publicar

Volte para o editor do Hoppy Announcement Bar e clique em Save (Salvar).

Em seguida, clique em Publish (Publicar) para torná-lo ativo.

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

Depois de publicar, visite a página onde você colocou o snippet para confirmar se a barra aparece no local correto 👀

🎯 Quando usar o posicionamento personalizado

O posicionamento personalizado é especialmente útil quando:

• Você quer a barra dentro de uma seção específica do tema, em vez de globalmente no topo ou na parte inferior
• O layout do seu tema entra em conflito com o posicionamento automático no topo/na parte inferior
• Você está usando várias barras e precisa controlar exatamente onde cada uma fica
• Você quer a barra dentro de uma seção do construtor de páginas, em uma página de destino personalizada ou em um template de produto específico
• Você precisa que a barra apareça entre blocos de conteúdo existentes, em vez de acima ou abaixo deles

⚠️ Dicas comuns

Mover ou remover a barra

Como a barra está vinculada a um container manual, você pode:

• Mover o bloco de app ou o snippet Liquid para uma nova posição a qualquer momento
• Remover o bloco ou o snippet para impedir que a barra seja renderizada nessa página
• Reutilizar o mesmo snippet em vários templates, se necessário

Combinar com segmentação

Mesmo com posicionamento personalizado, você ainda pode usar:

• Scheduling (Agendamento) — Definir datas de início e término
• Geolocation (Geolocalização) — Exibir apenas para visitantes de países específicos
• Customer Targeting (Segmentação de clientes) — Filtrar por status de login, tags ou gasto vitalício
• UTM Source Filtering (Filtragem por origem UTM) — Exibir apenas para visitantes de fontes de tráfego específicas
• Time-on-Site Delay (Atraso por tempo no site) — Atrasar a aparição da barra

💡 Essas opções são configuradas na mesma aba Placement. Para uma explicação completa, consulte a documentação Advanced Targeting (Segmentação avançada).

Posicionamento personalizado no checkout e no carrinho

• Os posicionamentos Cart Page (Página do carrinho) e Cart Drawer (Gaveta do carrinho) também oferecem suporte ao posicionamento Manual se você quiser controle preciso dentro da área do carrinho
• O posicionamento Checkout Page (Página de checkout) (somente Shopify Plus) usa o sistema de blocos da extensão de UI de checkout em vez de um snippet Liquid

🎉 Resultado final

Depois de configurado com sucesso:

✅ A sua barra de anúncio aparece exatamente onde você a colocou no tema
✅ Ela respeita todas as regras de segmentação ativas (agendamento, geolocalização, segmentos de clientes etc.)
✅ Você pode reposicioná-la ou removê-la a qualquer momento sem alterar o conteúdo ou o design da barra
✅ Várias barras personalizadas podem coexistir na mesma página em seções diferentes
✅ O layout da sua loja permanece limpo e intencional ✨

📚 Documentação relacionada

• How to Set Up an Announcement Bar (Como configurar uma barra de anúncio) — Passo a passo completo para criar e publicar qualquer tipo de barra
• Design & Styling (Design e estilo) — Personalização profunda de cores, fontes, animações e CSS personalizado
• Advanced Targeting (Segmentação avançada) — Agendamento, geolocalização, tags de cliente, filtragem UTM e regras de tempo no site
• Announcement Bar Types Explained (Tipos de barras de anúncio explicados) — Diferenças entre as barras Simple, Running, Multiple e Email

Boa colocação! 🥂

Actualizado em: 10/09/2026