Extensibilidade de checkout do Shopify: guia completo para 2026

Shopify processa mais de 235 bilhões de dólares em GMV anual por meio de seu checkout. Com a descontinuação do checkout.liquid e a implementação completa da Extensibilidade do Checkout, cada comerciante do Shopify precisa entender como o novo sistema funciona, o que ele permite e como migrar sem perder conversões.

Este guia cobre todos os principais componentes da extensibilidade do Shopify Checkout: extensões de interface do usuário, funções do Shopify, API de marca, blocos de checkout, personalização de pagamento e envio e as estratégias que transformam o checkout em uma vantagem competitiva.

Principais conclusões

• A extensibilidade do Checkout substitui checkout.liquid por uma arquitetura segura e com atualização segura, construída em extensões de UI e funções do Shopify
• As extensões da UI do Checkout são executadas em um ambiente de área restrita usando componentes baseados em React renderizados por meio de destinos de checkout
• As funções do Shopify permitem personalizar a lógica de descontos, a filtragem de métodos de pagamento e a manipulação da taxa de envio no servidor sem chamadas externas de API
• A API Checkout Branding fornece controle granular sobre cores, tipografia, espaçamento e layout sem tocar no código de extensão
• A migração do checkout.liquid é obrigatória para lojistas do Shopify Plus e deve ser planejada sistematicamente para evitar quedas nas conversões
• Fluxos de checkout personalizados podem aumentar as taxas de conversão em 8 a 15% quando implementados com testes UX adequados

O que é extensibilidade de checkout?

Extensibilidade de checkout é a estrutura do Shopify para personalizar a experiência de checkout. Ele substitui a abordagem legada checkout.liquid por um sistema projetado em torno de três pilares:

1. Extensões de UI do Checkout --- Componentes baseados em React que são renderizados em locais específicos dentro do fluxo de checkout
2. Funções do Shopify --- Lógica do lado do servidor executada na infraestrutura do Shopify para personalizar regras de negócios
3. Checkout Branding API --- Uma API GraphQL para controlar a aparência visual do checkout

Ao contrário do checkout.liquid, que dava aos comerciantes controle total de HTML/CSS/JS, mas criava riscos de atualização e segurança, a Extensibilidade do Checkout oferece personalização em um ambiente controlado que o Shopify pode continuar a otimizar.

Extensões de IU do Checkout

Como eles funcionam

As extensões de IU do Checkout são criadas usando a estrutura de extensão de IU do Shopify. Eles são renderizados dentro de destinos de extensão predefinidos (também chamados de pontos de extensão) dentro do fluxo de checkout. Each target corresponds to a specific location: before the shipping method selector, after the order summary, inside the payment section, and so on.

As extensões usam um conjunto limitado de componentes de IU fornecidos pela Shopify:

| Componente | Finalidade | Casos de uso comuns | |-----------|---------|-----------------| | Bandeira | Exibir alertas ou promoções | Limites de frete grátis, ofertas por tempo limitado | | BlockStack/InlineStack | Layout de contêineres | Organizando campos e conteúdos personalizados | | Campo de texto | Coleta de entrada de texto | Mensagens de presente, instruções personalizadas | | Caixa de seleção | Seleções booleanas | Inscrição na newsletter, aceitação dos termos | | Selecione | Seleções suspensas | Delivery date preferences | | Título/Texto | Tipografia | Cabeçalhos de seção, texto auxiliar | | Imagem | Conteúdo visual | Emblemas de confiança, elementos de marca | | Divisor | Separação visual | Quebras de seção |

Alvos de extensão no fluxo de checkout

O fluxo de checkout oferece dezenas de alvos de extensão agrupados por seção:

Antes e depois de todo o checkout --- Purchase.checkout.header.render-after e Purchase.checkout.footer.render-after permitem que você adicione conteúdo em todo o checkout.

Seção de endereço de entrega --- Renderize o conteúdo antes ou depois do formulário de endereço de entrega com destinos Purchase.checkout.shipping-address.render-before e render-after.

Seção de método de envio --- Adicione banners, informações ou interface de usuário personalizada antes ou depois da lista de opções de envio.

Seção de forma de pagamento --- Insira selos de confiança, informações de pagamento ou campos personalizados ao redor do seletor de forma de pagamento.

Resumo do pedido --- Adicione upsells, vendas cruzadas ou conteúdo informativo ao lado dos itens de linha do carrinho e do total do pedido.

Construindo uma extensão de UI do Checkout

Um projeto típico de extensão de IU de checkout é estruturado usando a CLI da Shopify com o tipo de extensão checkout_ui. O ponto de entrada da extensão usa a função reactExtension para registrar um componente em um local de destino específico no fluxo de checkout.

Por exemplo, uma extensão de banner de frete grátis usaria o gancho useCartLines para calcular o subtotal do carrinho, compará-lo com seu limite de frete grátis e renderizar um componente Banner mostrando uma mensagem de sucesso ou quanto mais o cliente precisa adicionar. Essa extensão única normalmente aumenta o valor médio do pedido em 5 a 12%.

Ganchos de API de extensão

Shopify fornece um rico conjunto de ganchos para acessar o estado de checkout:

• useCartLines() --- Acesse todos os itens no carrinho com preços, quantidades e metadados do produto
• useBuyerJourney() --- Interceptar e validar a progressão do checkout, bloquear envios inválidos
• useShippingAddress() --- Leia o endereço de entrega para lógica condicional
• useApplyDiscountCodeChange() --- Aplicar códigos de desconto programaticamente com base nas condições
• useApplyMetafieldChange() --- Armazene dados personalizados no pedido para fluxos de trabalho de atendimento
• useExtensionApi() --- Acesse a API de extensão completa, incluindo localização e tokens de sessão

Exemplos práticos de extensão

Coleta de mensagens de presente: coloque um componente TextField no destino shipping-address.render-after. Use useApplyMetafieldChange para armazenar a mensagem como um metacampo de pedido. A equipe de atendimento lê o metacampo durante a embalagem.

Seletor de data de entrega: use um componente Selecionar com datas disponíveis calculadas a partir dos dados de SLA da sua transportadora. Armazene a data selecionada como um metacampo e use-a para agendamento de atendimento.

Exibição de pontos de fidelidade: mostre aos clientes recorrentes seus pontos de fidelidade disponíveis e permita que eles apliquem pontos como desconto usando useApplyDiscountCodeChange.

Funções do Shopify

O que as funções do Shopify substituem

Antes do Shopify Functions, a lógica de negócios personalizada exigia chamadas de API externas que adicionavam latência e pontos de falha ao checkout. As funções são executadas diretamente na infraestrutura do Shopify, em menos de 5 milissegundos, sem sobrecarga de rede.

Tipos de funções

| Tipo de função | O que personaliza | Exemplo | |---------------|-------------------|---------| | Desconto em produtos | Descontos automáticos em produtos | Compre 2 e ganhe 1 grátis com lógica de nível complexo | | Desconto para pedidos | Descontos em todo o pedido | Gaste acima do limite, economize 15% com exclusões | | Desconto de Frete | Descontos nas taxas de envio | Frete grátis para membros fidelizados | | Personalização de Pagamento | Visibilidade e pedido da forma de pagamento | Ocultar COD para pedidos de alto valor | | Personalização de entrega | Nomes e classificação dos métodos de envio | Renomear operadoras, reordenar por prioridade | | Transformação de carrinho | Modificar o conteúdo do carrinho | Agrupamento automático de produtos, expansão de kits | | Restrições de cumprimento | Restringir opções de atendimento | Require signature for high-value items |

Como funcionam as funções

As funções são escritas em Rust (compilado para WebAssembly) ou JavaScript. Cada função recebe um objeto de entrada contendo dados de checkout relevantes e retorna um array de operações descrevendo as alterações a serem aplicadas.

Para personalização de pagamento, a função recebe todos os métodos de pagamento e dados do carrinho disponíveis e, em seguida, retorna operações de ocultação ou reordenação para métodos específicos com base em suas regras de negócios. Para personalização de entrega, as funções podem renomear as opções de envio, reordená-las por prioridade ou ocultá-las com base no conteúdo do carrinho ou no endereço de entrega.

Limitações de função

• Tempo de execução: máximo de 5ms
• Memória: máximo de 10 MB
• Tamanho da entrada: Limitado pela consulta de entrada da função
• Sem chamadas de rede: as funções não podem fazer solicitações HTTP
• Sem estado persistente: cada invocação é sem estado

Essas restrições são intencionais. Eles garantem que o desempenho do checkout permaneça consistente mesmo com dezenas de funções ativas.

API de marca do Checkout

A API Checkout Branding fornece personalização visual sem criar extensões. Ele controla:

Cores --- Cores primárias e secundárias da marca, cores de fundo, cores de texto e links e cores de estado para erros, sucessos e avisos.

Tipografia --- Família de fontes da biblioteca de fontes da Shopify ou fontes personalizadas, tamanhos de fonte para títulos, corpo e rótulos, além de espessuras de fonte e alturas de linha.

Layout e espaçamento --- Raio de canto para botões, entradas e contêineres, espaçamento entre seções e estilos de borda.

Logotipo e favicon --- Logotipo do cabeçalho do checkout com controles de posição e tamanho.

A API Branding é acessada por meio da mutação checkoutBrandingUpsert GraphQL. Você passa um objeto de entrada de perfil e marca especificando seu sistema de design: esquemas de cores, configurações de tipografia e valores de raio de canto. Isso separa a marca visual da personalização funcional para que você possa atualizar a aparência do checkout sem modificar o código de extensão.

Migração de checkout.liquid

Por que a migração é obrigatória

Shopify estabeleceu prazos firmes de suspensão de uso para checkout.liquid. Todos os lojistas do Shopify Plus devem migrar para a Extensibilidade do Checkout.

1. Segurança: checkout.liquid permite a execução arbitrária de JavaScript no checkout, criando riscos de XSS e de exfiltração de dados
2. Desempenho: personalizações de checkout.liquid não otimizadas retardam o carregamento da página
3. Caminho de atualização: a Shopify não pode implementar melhorias de checkout quando os comerciantes substituem todo o modelo de checkout

Lista de verificação de migração

| recurso checkout.liquid | Equivalente de extensibilidade de checkout | |-----------------------------------|----------------------------------| | Estilo CSS personalizado | API de marca do Checkout | | Imagens de emblema de confiança | Extensão UI do Checkout com componente de imagem | | Campo de mensagem de presente | Extensão UI do Checkout com TextField | | Lógica de desconto personalizada | Função Shopify (tipo de desconto) | | Ocultação da forma de pagamento | Função Shopify (personalização de pagamento) | | Renomeação do método de envio | Função Shopify (personalização de entrega) | | Campo de nota do pedido | Extensão UI do Checkout com TextField + metacampo | | Scripts analíticos | Pixels da Web (eventos do cliente) | | Validação personalizada | Gancho useBuyerJourney com lógica de validação |

Processo de migração passo a passo

1. Audite seu checkout.liquid atual --- Documente cada personalização, script e mudança visual
2. Categorize cada personalização --- Mapeie para extensões de IU, funções, API de marca ou pixels da Web
3. Crie e teste em desenvolvimento --- Use a CLI da Shopify para testar extensões localmente em uma loja de desenvolvimento
4. Implantar de forma incremental --- Habilite a extensibilidade do Checkout primeiro em uma loja de teste e depois implemente para produção
5. Monitore as taxas de conversão --- Compare as taxas de conclusão de checkout antes e depois da migração por pelo menos duas semanas
6. Iterar --- Use testes A/B para otimizar o posicionamento de extensões e mensagens

Personalização de pagamento e envio

Estratégias de personalização de pagamento

• Métodos de pagamento baseados na região: mostre métodos de pagamento locais (iDEAL na Holanda, PIX no Brasil) com base no endereço de entrega
• Limites de valor do pedido: oculte compre agora-pague depois para pedidos de valor baixo ou muito alto
• Filtragem de tags de cliente: mostre as condições de pagamento no atacado apenas para clientes B2B marcados
• Restrições baseadas em produtos: desative determinados métodos de pagamento para produtos digitais ou assinaturas

Estratégias de personalização de envio

• Renomeação de operadora: substitua os nomes técnicos das operadoras por nomes de marca, como "Entrega rápida (3 a 5 dias úteis)"
• Classificação de taxas: coloque os métodos de envio preferidos no topo da lista
• Disponibilidade condicional: Ocultar frete expresso para itens de grandes dimensões ou endereços rurais
• Estimativa de data de entrega: use funções de personalização de entrega para exibir datas de entrega estimadas junto com cada opção de envio

Dicas de otimização de conversão

Reduza o atrito no checkout

• Use o preenchimento automático de endereço (incorporado ao checkout do Shopify) e garanta que funcione para todos os mercados-alvo
• Habilite o Shop Pay para clientes recorrentes --- reduz o tempo de checkout em até 4x
• Minimizar o número de campos personalizados; cada campo adicional reduz as taxas de conclusão em 3-5%

Construa confiança na finalização da compra

• Coloque crachás de segurança e sinais de confiança na área de rodapé do checkout
• Mostre resumos claros da política de devolução perto da seção de pagamento
• Exibir contagens de avaliações de clientes ou índices de satisfação

Aproveite as extensões pós-compra

• Use o alvo de renderização da página de agradecimento para ofertas de upsell
• Mostrar avisos de inscrição na página de confirmação do pedido
• Colete feedback do NPS imediatamente após a compra

Perguntas frequentes

A extensibilidade do Checkout está disponível em todos os planos do Shopify?

As extensões da UI do Checkout e as funções do Shopify estão disponíveis em todos os planos do Shopify. No entanto, alguns recursos avançados, como personalização completa da marca do checkout, são limitados ao Shopify Plus. A marca básica (cores e fontes) está disponível em todos os planos por meio do editor de temas.

Minhas personalizações checkout.liquid deixarão de funcionar?

Sim. Shopify definiu cronogramas de suspensão de uso para checkout.liquid. Os lojistas do Shopify Plus que não migraram passarão automaticamente para a experiência de checkout padrão. Planeje sua migração agora para manter o controle sobre seu checkout.

Posso usar JavaScript de terceiros na extensibilidade do Checkout?

Não. As extensões da IU do Checkout são executadas em um ambiente de área restrita e não podem carregar scripts externos. Esta é uma medida de segurança. Se você precisar de integração de serviços externos, use Shopify Functions para lógica do lado do servidor ou Web Pixels para rastreamento analítico.

Como as funções do Shopify afetam a velocidade de checkout?

As funções do Shopify são executadas em menos de 5 milissegundos na infraestrutura do Shopify. Eles são significativamente mais rápidos do que as chamadas de API externas que substituem. A maioria dos comerciantes vê melhorias no desempenho do checkout após migrar de scripts para Functions.

Posso reverter para checkout.liquid após a migração?

Durante o período de migração, você pode alternar entre checkout.liquid e Checkout Extensibility nas configurações da sua loja. No entanto, assim que o Shopify descontinuar totalmente checkout.liquid para sua loja, a reversão não será mais possível.

Transforme seu checkout no Shopify

A extensibilidade do Checkout representa o futuro do comércio do Shopify. Se você precisa migrar do checkout.liquid, criar fluxos de checkout personalizados ou otimizar suas taxas de conversão, a nova estrutura fornece as ferramentas para criar uma experiência de checkout que corresponda à sua marca e aos requisitos do seu negócio.

ECOSIRE é especializada em configuração de loja Shopify, desenvolvimento de tema personalizado e otimização de conversão. Para personalização avançada de checkout no Shopify Plus, explore nossos serviços do Shopify Plus.

Pronto para atualizar sua experiência de checkout? Entre em contato com nossos especialistas do Shopify para discutir seu projeto de extensibilidade de checkout.