> ## 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 definir a Oferta de Pacotes para colocação personalizada

> ℹ️ **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 sua oferta do pacote apareça _exatamente_ onde você quer isso em sua página de produto — não apenas abaixo do botão Adicionar ao Carrinho? 🎯

Isso é exatamente o que o **Colocação Personalizada** opção em Hoppy Bundles foi concebido para o efeito.

Por padrão, cada oferta do pacote é mostrada **abaixo do botão Adicionar ao Carrinho** automaticamente. Mas com Colocação Personalizada, você pode posicionar a oferta em qualquer lugar em sua página de produto usando qualquer um:

*   🧩 A **Hoppy Bloco de aplicação em pacote** dentro da Shopify editor de temas (sem codificação necessária!)
*   📝 Uma pequena **excerto de código** colado em seu código de tema ou uma seção de líquido personalizado

Este guia orienta você através de ambos os métodos passo a passo ✨

---

# **🤔 Quando você deve usar a colocação personalizada?**

Colocação personalizada é útil quando você deseja:

*   Mostrar a oferta do pacote **acima** o botão Adicionar ao Carrinho
*   Coloque a oferta ao lado da descrição do produto, imagens ou comentários
*   Mova a oferta para baixo na página — por exemplo, abaixo dos detalhes do produto
*   Tenha controle total sobre a posição exata dentro do layout do tema

ℹ️ Trabalhos de colocação personalizados **apenas na página do produto**. Outras páginas não são afetadas por esta configuração.

---

# **✅ Antes de começar**

Antes de configurar uma colocação personalizada, certifique-se de ter:

*   ✅ A **Hoppy Bundles** app instalado na sua loja
*   ✅ A **Oferta do pacote** já criado (ou criar um novo)
*   ✅ A **Aplicativo Incorporar** habilitado no seu tema (veja o próximo passo)

💡 Os mesmos passos também funcionam para **Quebra de Quantidades** ofertas — a seção Colocação olha e se comporta exatamente o mesmo.

---

# **⚙️ Passo inicial — Habilitar a incorporação da aplicação**

Para que a oferta do pacote apareça em qualquer lugar em sua loja, a incorporação do aplicativo deve ser ativado dentro de seu Shopify tema.

Ir para:

**Shopify Admin → Canais de Vendas → Loja online → Temas → Personalizar → App Inbeds**

Depois:

*   Procurar **Oferta de desconto em massa** (o Hoppy Bundles incorporar)
*   Activar
*   Clique **Gravar**

⚠️ Sem o aplicativo incorporado habilitado, nem a colocação padrão nem a colocação personalizada renderizará em sua frente de loja.

---

# **🛠️ Passo 1 — Selecione a colocação personalizada em sua oferta**

Abrir o **Hoppy Bundles** app e abra a oferta do pacote que você deseja colocar manualmente.

Depois:

1.  Ir para o **& Colocação de Destino** aba
2.  Rolar para baixo para o **Colocação** secção
3.  Na lista, selecione **Personalizado (somente na página do produto)** em vez de _Abaixo Adicionar ao Botão do Carrinho (Padrão)_

---

# **💾 Passo 2 — Salve Primeiro a Oferta**

Este passo é importante ⚠️

A **Hoppy bundles ID** e o **excerto de código** são apenas gerados **após a oferta ser salva**.

Se você selecionar _Personalizado_ colocação em uma nova oferta (não salva), você verá esta mensagem em vez disso:

> _Gravar para ver Hoppy bundles ID e trecho de código_

Então...

1.  Clique **Gravar** no topo da página
2.  Voltar para **Alvo & Colocação → Colocação**

Agora você verá duas coisas 👇

---

# **🆔 Passo 3 — Copie Hoppy bundles Excerto de ID & Código**

Uma vez salva, a seção Colocação mostra:

*   **Hoppy bundles ID** → um ID único para esta oferta específica, com um ícone de cópia ao lado dele
*   **Hoppy bundles excerto de código** → um trecho HTML pronto para usar, também com um ícone de cópia:

ℹ️ Cada oferta tem sua própria ID única. Se você criar várias ofertas de pacotes, certifique-se de copiar o ID/snippet da correta.

Agora você pode colocar a oferta usando **quer** dos dois métodos abaixo 👇

---

# **🧩 Método 1 — Coloque a oferta usando o bloco de aplicativo do editor do tema (recomendado)**

Este é o método mais fácil — sem necessidade de codificação 🎉

A Hoppy bundles bloco de aplicativo pode ser adicionado, removido, reposicionado e personalizado através do editor de tema usando o seu Bundle ID.

Siga estes passos:

1.  Ir para **Shopify Admin → Loja online → Temas → Editar Tema**
2.  No topo do editor de temas, mude o seletor de páginas para **Produtos → Produto padrão** (ou o modelo de produto que utiliza)
3.  Na barra lateral esquerda, clique **Adicionar bloco** dentro da secção Produto
4.  Debaixo da **Aplicativos** aba, selecione **Hoppy Pacote**
5.  Nas configurações do bloco, cole seu **ID do pacote** na **ID do pacote** campo
6.  Arraste o bloco para cima ou para baixo para posicioná-lo exatamente onde você quer que a oferta apareça
7.  Clique **Gravar**

⚠️ Se deixar o campo de ID do pacote vazio, o bloco mostrará uma _“Por favor, configure o ID para usar App Block”_ aviso em vez de sua oferta — então não se esqueça de colar o ID!

💡 Você pode reposicionar o bloco a qualquer momento simplesmente arrastando-o no editor do tema — a oferta seguirá a posição do bloco na página.

---

# **📝 Método 2 — Fazer a oferta usando o trecho do código**

Use este método se você quiser colocar a oferta dentro de um ponto específico em seu código de tema, ou dentro de um **Liquido Personalizado** Secção/bloco.

## **Opção A — Usar um bloco líquido personalizado no editor do tema**

1.  Ir para **Shopify Admin → Loja online → Temas → Personalizar**
2.  Mudar para o seu **modelo de produto**
3.  Clique **Adicionar bloco** (ou **Adicionar seção**) → escolher **Liquido Personalizado**
4.  Colar o trecho de código do Passo 3:

5.  Posicione o bloco onde deseja que a oferta apareça
6.  Clique **Gravar**

## **Opção B — Diretamente no seu código de tema**

1.  Ir para **Shopify Admin → Loja online → Temas → □ (três pontos) → Editar código**
2.  Abra seu arquivo de modelo de produto — geralmente algo como `product.liquid`, `main-product.liquid`, ou um arquivo JSON produto / seção (o arquivo exato depende do seu tema)
3.  Colar o trecho exatamente onde você quer que a oferta do pacote renderize:

4.  Clique **Gravar**

⚠️ Editar o código do tema diretamente pode quebrar seu layout se feito incorretamente. Se você não está confortável edição código, use **Método 1** ou **Opção A** Em vez disso — ou duplicar o seu tema primeiro como um backup.

---

# **📌 Notas e Avisos Importantes**

*   ⚠️ **Salva primeiro!** O Bundle ID e snippet só aparecem após a oferta ter sido salva pelo menos uma vez.
*   ⚠️ Trabalhos de colocação personalizados **apenas na página do produto** — a oferta não será injectada em posições personalizadas noutras páginas.
*   ⚠️ Certifique-se de que **Aplicativo Incorporar** está habilitado no seu tema, caso contrário o snippet/bloco permanecerá vazio no storefront.
*   ℹ️ O trecho deve manter o nome exato da classe `futureblink-bundle-block` e a sua oferta única `id` — não os renomeie, caso contrário o aplicativo não encontrará o recipiente.
*   ℹ️ Cada oferta de pacote tem a sua **ID próprio único**. Copiar o trecho de uma oferta e esperar que outra oferta apareça não vai funcionar.
*   💡 Se mudar a lista de Colocações para **Abaixo Adicionar ao Botão do Carrinho (Padrão)**, o aplicativo irá renderizar a oferta automaticamente novamente — nenhum ID ou trecho necessário.

---

# **🎉 Resultado Final**

Uma vez tudo configurado:

✅ Sua oferta do pacote aparece na posição exata que você escolheu na página do produto ✅ Você pode reposicioná-lo a qualquer momento do editor de tema (método App Block) ✅ A oferta permanece totalmente dinâmica — preços, descontos e atualizações de variantes em tempo real ✅ Seu layout da página do produto parece exatamente como você o projetou ✨

Usando Personalizado A colocação lhe dá o controle completo sobre onde seu pacote oferece viver na página — para que eles se encaixam perfeitamente no design da sua loja e fluxo de compras 🚀