Skip to main content
⚠️ Aviso importante O snippet de tema abaixo se aplica a ambas as versões dos módulos de carrinho do Upcart — ele faz a Shopify renderizar os botões de checkout acelerado na página, que é o que o Upcart precisa, independentemente da versão do módulo. O seletor .additional-checkout-buttons abaixo é a classe da própria Shopify no contêiner de checkout acelerado, não uma classe de módulo do Upcart, então ele é o mesmo em qualquer versão do carrinho.

​
Visão geral

Às vezes, os botões de checkout expresso não são clicáveis ou não aparecem dentro do Upcart. Este é um problema comum causado pela forma como a Shopify controla a renderização dos botões de pagamento expresso nos temas. Este guia explica por que isso acontece e o que você pode fazer para corrigir.

​
Configuração necessária para o novo módulo

⚠️ Importante: estas etapas se aplicam ao novo módulo Express Payments do Upcart, não à versão legada. Para fazer os botões de checkout expresso funcionarem corretamente no Upcart, você precisa adicionar um pequeno snippet de código ao seu tema da Shopify. Sem esse snippet, a Shopify não carregará os botões de pagamento corretamente dentro do cart drawer. Antes de fazer essas alterações, verifique se os métodos de pagamento relevantes (por exemplo, Shop Pay, PayPal, Apple Pay, Google Pay) estão ativados nas configurações da sua conta no Shopify Admin. Sem ativar esses métodos, os botões não ficarão visíveis. Além disso, garanta que o snippet esteja colocado diretamente abaixo da tag de abertura <body> no arquivo do seu tema (por exemplo, <body class="...">). Se colocado incorretamente, como depois da tag de fechamento </body>, os botões de checkout expresso podem não funcionar corretamente.

​
Como corrigir

  1. Vá para o seu Shopify Admin.
  2. Navegue até Online Store > Themes > Edit Code.
  3. Abra layout/theme.liquid, encontre a linha <body> e adicione o snippet abaixo em uma nova linha diretamente abaixo dela. Ele precisa ficar aí — não em cart-drawer.liquid nem em outro lugar — porque os botões precisam existir em todas as páginas em que o carrinho pode abrir.
  1. Salve as alterações e atualize a sua loja.
  2. Reabra o cart drawer para verificar se os botões de checkout expresso (como Shop Pay, PayPal, Apple Pay ou Google Pay) agora aparecem e são clicáveis.
Consulte o Guia do módulo Express Payments para instruções completas de configuração.

​
Por que isso acontece

Os botões de pagamento expresso são totalmente gerenciados pela Shopify, não pelo Upcart. Isso significa que:
  • O Upcart não renderiza os próprios botões. Ele clona os botões de checkout acelerado da Shopify da página para dentro do cart drawer, e é por isso que eles precisam estar presentes na página em primeiro lugar — é isso que o snippet de tema acima garante.
  • O Apple Pay só aparecerá em dispositivos Apple com o Apple Pay configurado.
  • O Upcart não controla quais botões expressos aparecem, já que o conteúdo e a funcionalidade são gerenciados pela Shopify.
🎨 Nota:
Os botões no Upcart atuam como contêineres visuais, enquanto a Shopify controla sua exibição e comportamento. O Upcart não pode modificar sua aparência ou função.

​
Problemas comuns e correções

​
1. Os botões não são renderizados na página

Esta é a causa mais comum. O Upcart clona os botões da Shopify a partir da página; portanto, se a página não os renderiza, não há nada para clonar e o carrinho mostra um espaço vazio. O que fazer:
  • Adicione o snippet de tema de Como corrigir acima, diretamente abaixo da linha <body> em layout/theme.liquid.
Não remova os botões expressos do seu próprio tema para “evitar um conflito”. O Upcart depende da presença deles. Removê-los do tema, ou desativá-los nas configurações do tema, remove a fonte de onde o Upcart clona — o que piora esse problema em vez de melhorar.

​
3. O CSS está bloqueando os botões

Alguns temas ocultam os botões expressos por padrão usando CSS. Por exemplo:
O que fazer:
  • Revise o CSS do seu tema.
  • Peça ao desenvolvedor do seu tema para garantir que nenhuma regra de CSS esteja ocultando ou desativando os botões no drawer do Upcart.

​
4. Configurações legadas estão interferindo

Se você usou a versão mais antiga do módulo Express Payments, configurações salvas podem entrar em conflito com a nova configuração. O que fazer:
  • Abra o módulo Express Payments antigo (se ainda estiver visível).
  • Desmarque quaisquer opções anteriores e salve.
  • Teste novamente usando o novo módulo.

​
Ainda com problemas?

​
Desative o Shadow DOM no Upcart

Em alguns casos, os botões de pagamento expresso podem não carregar ou não atualizar porque o Shadow DOM está ativado no Upcart. O que é Shadow DOM?
O Shadow DOM isola o Upcart do restante do código da sua loja para melhorar a estabilidade. No entanto, em casos raros, essa separação pode impedir que os botões expressos da Shopify sejam atualizados corretamente. Como desativar o Shadow DOM:
  1. Vá para Upcart > Cart Editor > Settings > Cart settings e expanda Advanced Settings.
  2. Desmarque Render Cart in Shadow DOM.
  3. Salve e teste novamente.
⚠️ Importante:
Sempre teste seu carrinho depois de desativar o Shadow DOM, pois isso pode afetar como outros apps ou elementos do tema interagem com o Upcart. 💡 Nota: desativar o Shadow DOM pode corrigir esse problema, mas pode introduzir conflitos de CSS com o seu tema. Veja o documento Configuração de Shadow DOM para a compensação completa.

​
Precisa de mais ajuda?

Se o problema persistir após concluir estas etapas:
  • Entre em contato com o desenvolvedor do seu tema para ajudar a remover código ou configurações conflitantes.
  • Você também pode falar com um Shopify Expert para edições avançadas de tema ou assistência de integração.

​
Referências

  • Ajuda da Shopify – Checkouts acelerados
  • Documentação para desenvolvedores da Shopify – Botões de pagamento expresso