Usando o Bundlex com um construtor de páginas (GemPages, PageFly, Shogun)

Se a sua página de produto foi criada com um construtor de páginas, como GemPages, PageFly ou Shogun, use um trecho de âncora para escolher onde o widget do Bundlex aparece. Cole-o em um bloco de HTML personalizado na página do produto. Se o widget estiver completamente ausente, verifique também a incorporação do app, o pacote publicado e o formulário do produto. A âncora controla apenas o posicionamento.

Por que um construtor de páginas precisa de uma âncora

Normalmente, o widget detecta o formulário do produto e se insere antes do contêiner dele. Um construtor de páginas pode alterar esse layout. A âncora fornece ao widget um local específico para ser renderizado, mas o Bundlex ainda precisa encontrar o formulário de adicionar ao carrinho do produto para conectar a oferta ao botão de compra.

Obtenha o trecho

A âncora é um trecho pronto para copiar no editor do pacote.

1. Abra no painel do Bundlex o pacote que você quer exibir na página criada com o construtor de páginas.
2. Abra a aba Avançado.
3. Encontre a opção Usando um construtor de páginas? e clique nela para expandir.
4. Clique em Copiar para copiar o trecho para a área de transferência.

O trecho é sempre o mesmo:

<div data-bundlex-widget></div>

Cole-o no construtor de páginas

1. Abra a página do produto no editor do construtor de páginas que você usa, como GemPages, PageFly, Shogun ou outro construtor.
2. Adicione um bloco de HTML personalizado ou de código exatamente no local onde você quer que o widget apareça, por exemplo, logo abaixo do preço ou acima do botão de adicionar ao carrinho.
3. Cole o trecho nesse bloco.
4. Visualize a página do produto e, quando o widget estiver no local correto, salve e publique.

Com a incorporação do app ativa e sem nenhum destino de posicionamento personalizado correspondente com prioridade, o widget é renderizado dentro da primeira âncora. Um bloco do app é renderizado na posição do próprio bloco. Mantenha a âncora dentro da área de produto da página, perto dos controles de compra.

Um único trecho funciona para todos os pacotes

Você não precisa de um trecho diferente para cada pacote. Exatamente o mesmo <div data-bundlex-widget></div> é usado para todos eles. O Bundlex decide qual pacote renderizar com base no produto exibido na página. Portanto, a âncora controla apenas onde o widget aparece, nunca qual pacote aparece. Cole-o uma vez em cada página de produto criada com um construtor de páginas que precise dele.

Coloque-o somente na área relevante

Adicione a âncora somente à área da página onde você realmente quer que o widget apareça. Se o mesmo trecho acabar em mais de um local carregado ao mesmo tempo, por exemplo, em um carrinho lateral ou em uma janela pop-up de visualização rápida que repete a marcação do produto, o widget será associado à primeira âncora encontrada na página. Para manter o posicionamento previsível, coloque o trecho em um único local relevante, em vez de espalhá-lo pelos templates.

Verifique os layouts para computador e celular. Alguns construtores mantêm formulários de produto separados para computador e celular na mesma página. Um seletor ou uma âncora que alcance a cópia oculta pode funcionar em uma largura e falhar em outra. Se isso acontecer, peça ao suporte para verificar os dois layouts.

Se o widget não se mover depois que você colar o trecho

Se o widget não tiver sido movido para o novo local:

• Verifique se você está usando a incorporação do app, e não um bloco do app posicionado em outro local. Um seletor de posicionamento personalizado correspondente na incorporação tem prioridade sobre a âncora.
• Atualize completamente a página da loja: Cmd/Ctrl + Shift + R. Isso pode recarregar recursos antigos do navegador, mas não publica uma página em rascunho nem corrige um seletor incorreto.
• Confirme se a página está publicada, e não apenas salva no editor do construtor de páginas.
• Verifique se você colou o trecho exatamente como está, sem caracteres extras ao redor.

Se o widget ainda não aparecer

A âncora apenas posiciona o widget. Ele ainda precisa das condições habituais para carregar:

• A incorporação do app Bundlex precisa estar ativada para este método com âncora. Use um bloco do app quando quiser que o posicionamento seja controlado pelo bloco.
• Um pacote publicado precisa corresponder ao produto dessa página.
• O Bundlex precisa conseguir detectar o formulário correto do produto e o botão de adicionar ao carrinho.

Se a incorporação e o desconto correspondente estiverem ativos, verifique a prioridade do posicionamento e a detecção do formulário do produto. Entre em contato com o suporte informando a URL do produto se a âncora continuar vazia.

As páginas de destino são diferentes

O trecho da âncora funciona somente em páginas de produto. Se você quiser ofertas de pacotes em uma página comum da Shopify, qualquer URL /pages/, adicione a seção Produto em destaque do seu tema e coloque o bloco Bundlex Bundles em destaque dentro dela. Defina o produto do bloco como o mesmo produto da seção ou mantenha a conexão com o produto da seção. A seção fornece o formulário de compra, e o bloco carrega o widget sem um trecho de âncora.

Verifique o resultado

1. Abra a URL real e publicada do produto em larguras de computador e celular.
2. Confirme se um widget aparece na posição desejada, com o produto correspondente e os preços da oferta.
3. Escolha uma oferta e adicione-a ao carrinho. Verifique o produto principal, as variantes, as quantidades e quaisquer complementos selecionados.
4. Continue até o checkout e verifique o desconto e o subtotal antes de fazer o pedido. Se apenas a visualização do construtor de páginas funcionar, envie ao suporte a URL publicada do produto.

Para entender completamente como o Bundlex escolhe um posicionamento, incluindo o bloco de produto em destaque para páginas de destino, o seletor de posicionamento personalizado e o bloco do app do tema, consulte Onde o widget aparece na sua página do produto.