ℹ️ 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 🚀

Actualizado em: 10/09/2026