> ## 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 barra de anúncio para posicionamento personalizado

> ℹ️ **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
   * 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\! 🥂