No momento, você está visualizando Como editar checkout Shopify Payments na prática

Como editar checkout Shopify Payments na prática

Como editar checkout Shopify Payments envolve duas frentes diferentes. De um lado, qualquer plano pago da Shopify permite mudar logo, cores, fontes, imagem de banner, posição do resumo do pedido e textos legais. Por outro lado, mudanças estruturais como adicionar campos novos, CSS personalizado ou scripts complexos só funcionam com Shopify Plus ou via apps de Checkout Extensibility. Em outras palavras, dá pra deixar o checkout com a cara da loja sem trocar de plano, mas mexer no fluxo exige outro nível.

Quem chega no painel da Shopify procurando como editar checkout Shopify Payments quase sempre quer uma de duas coisas. Em primeiro lugar, alinhar a aparência do checkout com a identidade visual da loja. Em segundo, adicionar um campo (CPF, instruções de entrega, brinde) que o template padrão não cobre.

Cada uma dessas frentes tem caminho próprio dentro do painel. Por isso, a confusão começa porque a Shopify mistura tudo em “Configurações → Checkout e contas”. Esse post separa os dois caminhos e mostra o que dá pra fazer em cada plano, antes de você assinar Shopify Plus ou trocar de gateway sem precisar.

O que vem editável de fábrica no checkout Shopify Payments

A Shopify libera essas personalizações em todos os planos pagos, inclusive no Basic.

  • Logo da loja no topo do checkout, com tamanho e posição ajustáveis.
  • Cores do botão de finalizar compra, do destaque, do fundo e dos erros.
  • Imagem de banner no topo do checkout, em desktop e mobile separados.
  • Posição do resumo do pedido (lateral direita ou esquerda em desktop).
  • Tipografia dentro de um conjunto de fontes pré-aprovadas.
  • Idioma com mais de 20 opções, incluindo PT-BR.
  • Formulário com controle sobre campos como nome da empresa, telefone e endereço secundário.
  • Textos legais como política de privacidade, devolução e termos de serviço.
  • Mensagem de agradecimento na página final do pedido.

Em outras palavras, esse conjunto cobre a maior parte da demanda de uma loja pequena ou média. Por isso, antes de assinar Shopify Plus (que custa cerca de US$ 2.000 por mês) ou trocar de gateway, vale testar até onde o editor padrão chega.

Como editar checkout Shopify Payments passo a passo

Os ajustes visuais ficam no editor de checkout, e o caminho mudou nos últimos dois anos. Atualmente, a Shopify usa o sistema Checkout Extensibility, que substituiu o antigo checkout.liquid em agosto de 2024.

Para abrir o editor, siga esse caminho.

  1. Acesse o painel admin da loja em shopify.com/admin.
  2. Vá em Configurações e em seguida em “Checkout e contas”.
  3. Clique em “Personalizar checkout” no topo da página.
  4. Use o editor visual para ajustar logo, cores, fontes e layout.
  5. Para textos legais e regras de formulário, volte à tela “Configurações” e mexa nas seções de formulário e políticas.
  6. Salve e teste o checkout fazendo um pedido real de R$ 1 com cartão (e depois reembolse).

Em primeiro lugar, testes em sandbox não pegam todos os comportamentos do antifraude e da rede. Por isso, sempre rode um pedido de verdade antes de considerar a mudança como pronta.

Em paralelo, dá pra editar o e-mail de confirmação do pedido pelo mesmo painel, em “Notificações”. De fato, esse e-mail é um dos pontos de maior abertura da loja, por isso vale dedicar tempo nele tanto quanto no visual do checkout.

O que só dá pra mudar com Shopify Plus

Algumas personalizações continuam exclusivas do plano Plus, mesmo depois do Checkout Extensibility.

  • Custom CSS dentro do editor de checkout.
  • Domínio próprio no checkout (em vez de checkout.shopify.com).
  • Liquid script para regras complexas no order summary, em descontinuação progressiva.
  • Branding em e-mails transacionais com controle total via HTML.

Para a maior parte das lojas brasileiras, isso não compensa. O plano Plus custa cerca de US$ 24.000 por ano, ou seja, é um investimento que só faz sentido a partir de algumas centenas de milhares de reais por mês em faturamento, segundo benchmarks do E-Commerce Brasil.

Como adicionar campos personalizados sem ser Plus

Aqui entra a parte que confunde mais lojista. Por isso, vale separar o que é mito do que é fato.

Em primeiro lugar, a Shopify não permite adicionar campo novo direto pelo editor padrão (CPF, observação, data de entrega, brinde). No entanto, a partir do Checkout Extensibility, qualquer plano pago pode instalar apps que injetam componentes no checkout.

Os apps mais usados no Brasil para esse tipo de extensão são esses.

  • Shop Quiz / Shop Form para perguntas extras antes do pagamento.
  • Rebuy / Cartloop para upsell e order bump dentro do checkout.
  • HelpCenter para FAQ flutuante na lateral.
  • Klaviyo / Omnisend para captura de e-mail no momento do abandono.

Você configura cada app fora da Shopify e ele aparece como bloco arrastável no editor de checkout. Em outras palavras, sem código.

Por isso, antes de pesquisar “como editar checkout Shopify Payments” pensando em CSS ou Liquid, vale conferir se algum desses apps já resolve a sua dor sem complicar a manutenção da loja.

Vale lembrar que CPF, por exemplo, é um campo padrão no Shopify Payments brasileiro desde a integração com a Stone em 2023. Por isso, se a loja vende para o Brasil, o campo já aparece automaticamente no formulário sem precisar de app extra.

Quando vale trocar o Shopify Payments por outro gateway

Em casos específicos, a customização do Shopify Payments não vai chegar onde a loja precisa. Esses são os cenários mais comuns.

  • Parcelamento sem juros em 12x com regras próprias por categoria ou ticket.
  • Order bumps complexos com seleção de produto e variante dentro do checkout.
  • Upsell pós-checkout com fluxo de mais de uma página.
  • Checkout no domínio próprio sem precisar do plano Plus.
  • Customização total com formulário em uma única página.

Nesses casos, lojistas brasileiros costumam trocar para Cartpanda, Yampi ou AppMax. Em outras palavras, abandonam a discussão sobre como editar checkout Shopify Payments e adotam outro gateway no lugar. Esses gateways substituem o checkout nativo da Shopify e oferecem controle visual e funcional muito maior. Por outro lado, a loja perde o Shopify Payments e algumas integrações nativas, como cálculo automático de frete em alguns cenários.

A decisão de trocar não tem volta fácil. Por isso, vale testar exaustivamente o que dá pra fazer com Checkout Extensibility antes de migrar. Para entender o que está em jogo no abandono, vale ler também o que a Emanda já cobriu sobre checkout de ecommerce.

Como medir se o checkout está funcionando depois das mudanças

Toda customização visual precisa passar por dois testes antes de ficar.

  1. Teste de compra real com cartão real, do início ao fim, em mobile e desktop.
  2. Análise de taxa de abandono no relatório de checkout da Shopify, comparando duas semanas antes e duas semanas depois da mudança.

Se a taxa de abandono subir mais de 5 pontos percentuais depois de uma mudança, voltar à versão anterior. De forma prática, vale documentar cada ajuste com data e print do antes e depois.

Em paralelo, vale acompanhar o tempo de carregamento da página de checkout no mobile. Acima de 3 segundos, a conversão cai de forma perceptível, independente do quanto o visual ficou bonito.

FAQ sobre como editar checkout Shopify Payments

Dá pra editar checkout Shopify Payments sem plano Plus?
Dá. Todos os planos pagos da Shopify permitem editar logo, cores, fontes, imagem, posição do resumo e textos. O que precisa de Plus é custom CSS, Liquid script e domínio próprio no checkout. Para a maior parte das lojas pequenas e médias, o que vem de fábrica já cobre a personalização visual da marca.

Como adicionar campo de CPF no checkout Shopify?
Para lojas brasileiras com Shopify Payments via Stone, o campo de CPF é automático e aparece no checkout sem precisar configurar. Em caso de não aparecer, vale conferir se a loja está com o endereço fiscal no Brasil e se o Shopify Payments está ativo na conta.

Posso editar o e-mail de confirmação da compra?
Sim, em Configurações → Notificações dentro do admin da Shopify. Cada notificação (confirmação, envio, reembolso) tem um template em HTML que dá pra mexer. Para mudanças visuais grandes, vale duplicar o template antes de editar.

Qual a diferença entre Checkout Extensibility e checkout.liquid?
Checkout Extensibility é o novo padrão da Shopify desde 2023, baseado em React e apps. checkout.liquid era o sistema antigo, que permitia editar HTML direto e era exclusivo do plano Plus. A Shopify aposentou o checkout.liquid em agosto de 2024, então hoje toda customização passa pelo Extensibility, em todos os planos.

Vale trocar o Shopify Payments por um gateway brasileiro?
Depende. Para lojas que precisam de checkout em domínio próprio sem ser Plus, upsell pós-checkout complexo ou parcelamento com regras próprias, vale considerar Cartpanda ou Yampi. Para lojas que só querem alinhar visual com a marca, o Shopify Payments resolve sem trocar.

O essencial

Como editar checkout Shopify Payments começa entendendo o que cada plano libera. Em primeiro lugar, todos os planos pagos cobrem o ajuste visual básico: logo, cores, fontes, banner. Em segundo, a parte estrutural (campos novos, scripts, regras) depende de Checkout Extensibility com apps ou do plano Plus.

Para a maior parte das lojas brasileiras pequenas e médias, o editor padrão da Shopify já entrega o suficiente. Por outro lado, a decisão de trocar de gateway só vale quando há necessidade concreta de controle além do visual.

Independente da customização escolhida, vale lembrar que checkout que converte não é o mais bonito, e sim o mais rápido. Por isso, antes de mexer no design, vale conferir se o tempo de carregamento da página de checkout está abaixo de 2 segundos no mobile.