Pular para o conteúdo principal

Como adicionar comportamento de checkout ou produto ao botão

Use isto quando um CTA deve levar visitantes ao checkout ou iniciar um caminho de compra de produto. O Atomicat suporta checkout por meio de CTAs de Product do catálogo e por meio de ações de clique de Button que abrem URLs de checkout/produto.

Antes de começar​

Confirme que você tem:

  • Um produto (ou bundle) salvo com um link de checkout válido. Veja Como criar um produto.
  • Uma página de vendas aberta no Page Builder.
  • URLs de checkout HTTPS do seu provedor de pagamento para compra única (e assinatura, se usada).

Passo 1: Confirmar URLs de checkout do produto​

  1. Abra Products e edite a oferta que os visitantes comprarão.
  2. Em Call to action, confirme:
    • Button text (por exemplo Add to Cart ou Buy now)
    • Button URL (checkout link)
  3. Se usar quantity tiers, confirme:
    • Use same link for all tiers, ou
    • URLs únicas / de assinatura por tier

Veja Como usar quantity tiers e Subscribe and Save.

Passo 2: Escolher bloco Product ou Button independente​

AbordagemMelhor quando
Bloco ProductVocê quer preço do catálogo, tiers, variantes, selos de confiança e o CTA do produto juntos.
Button com link / comportamento de checkoutVocê precisa de um CTA hero personalizado que ainda abre a mesma URL de checkout.

Opção A — CTA de bloco Product​

  1. Insira um elemento Product.
  2. Selecione o produto do catálogo.
  3. Ative Show full product se os visitantes precisarem de imagens, detalhes e seletores de tier.
  4. O CTA de compra usa a configuração de checkout do produto.

Veja Como adicionar um produto a uma página e Elemento Product.

Opção B — Button com clique para checkout​

  1. Adicione um Button onde quiser um CTA destacado.
  2. Defina o rótulo para corresponder à ação de compra.
  3. Nas configurações de evento de clique, escolha comportamento de checkout suportado quando disponível, ou defina um link normal para a URL de checkout do produto.
  4. Corresponda a URL exatamente ao CTA do catálogo (incluindo parâmetros de query exigidos pela sua ferramenta de pagamento).

Veja Elemento Button (referência).

Passo 3: Alinhar rastreamento e caminho do funil​

  1. Se anúncios dependem de cliques de intenção de compra, anexe eventos de pixel do botão. Veja Como rastrear cliques de botão com pixel.
  2. Se esta página é uma etapa do funil antes do checkout, mantenha a próxima página do funil consistente com a mesma oferta. Veja Como criar um funil.
  3. Evite apontar o Button hero para um SKU diferente do bloco Product abaixo.

Passo 4: Pré-visualizar caminhos de preço​

  1. Use Preview do produto e Preview da página.
  2. Clique em cada opção visível: preço base, cada tier e assinatura vs compra única quando ambos estiverem ativados.
  3. Confirme que cada caminho leva à URL de checkout correta.

Veja Preview de produto.

Passo 5: Publicar e testar ao vivo​

  1. Save e Publish a página.
  2. Teste em uma janela incognito.
  3. Complete (ou alcance) o checkout do CTA principal.
  4. Teste novamente após edições de preço ou tier no catálogo — republique para páginas em cache permanecerem precisas.

Solução de problemas​

ProblemaO que tentar
Botão abre oferta erradaSincronize a URL do Button com o CTA do produto; evite hardcodar links desatualizados.
Tier mostra checkout erradoVerifique URLs por tier e Use same link for all tiers.
Produto não encontradoSelecione novamente o produto do catálogo ou restaure o produto no projeto correto.
Checkout quebrado no mobileTeste URLs HTTPS absolutas; evite links javascript:.

Resultado​

Os visitantes podem iniciar o checkout a partir do CTA da sua página — seja pelo bloco Product ou por um Button independente — com URLs que correspondem à oferta do catálogo.

Documentação relacionada​

Perguntas frequentes​

Devo usar um bloco Product ou um Button para checkout?

Use um bloco Product quando compradores precisam ver opções de preço e merchandising. Use um Button quando você só precisa de um CTA forte que abre a mesma URL de checkout.

O checkout do Button pode reutilizar a URL do produto?

Sim. Copie a Button URL do produto para a ação de link/checkout do Button para que cada CTA permaneça sincronizado com o catálogo.

Bundles funcionam da mesma forma?

Sim para posicionamento. Bundles aparecem no seletor Product com rótulo (Bundle). O CTA ainda usa o link de checkout salvo do bundle.