Extensibilidade de checkout do Shopify Plus: experiências de checkout personalizadas

O checkout do Shopify converte em média 15% – um dos mais altos do comércio eletrônico. Essa estatística é a razão pela qual o Shopify historicamente restringiu a personalização do checkout: seu checkout é bem otimizado e as modificações personalizadas tendem a reduzir a conversão. Mas os comerciantes têm motivos legítimos para personalizar: exibição de pontos de fidelidade, preferências de entrega, mensagens de presentes, campos de pedidos de compra B2B e requisitos de conformidade que o checkout padrão não pode acomodar.

A extensibilidade do checkout é a resposta do Shopify Plus para essa tensão. Ele permite uma personalização significativa do checkout, mantendo intacta a arquitetura de checkout otimizada do Shopify e mantendo atualizações automáticas à medida que o Shopify evolui a plataforma. A abordagem obsoleta checkout.liquid falhava sempre que o Shopify atualizava o checkout. As extensões são seguras para atualização por design.

Principais conclusões

• A extensibilidade do Checkout substitui o obsoleto checkout.liquid — todos os comerciantes Plus devem migrar até 2025 (já passado)
• Extensões de UI adicionam componentes React a slots de checkout específicos sem substituir o modelo de checkout principal do Shopify
• As funções de checkout permitem lógica personalizada do lado do servidor para descontos, envio e filtragem de métodos de pagamento
• As extensões são executadas em um ambiente de sandbox — elas não podem acessar o DOM fora do seu destino de renderização
• API de branding permite personalização visual completa de cores de checkout, tipografia e raio de canto
• Extensões pós-compra adicionam ofertas de upsell com um clique após a confirmação do pedido (colocação de conversão mais alta)
• A página de agradecimento e a página de status do pedido agora são totalmente personalizáveis com extensões
• Desempenho: as extensões são renderizadas no lado do servidor na infraestrutura da Shopify — sem penalidade de desempenho no lado do cliente

---

A arquitetura da extensibilidade do checkout

Compreender a arquitetura técnica ajuda você a tomar melhores decisões sobre o que construir e como.

Pontos de Extensão (Slots)

A IU de checkout do Shopify tem pontos de extensão predefinidos – locais específicos onde você pode injetar componentes React personalizados. Pense neles como espaços estruturados em um modelo de checkout que aceita componentes aprovados:

A caixa de areia de extensão

As extensões são executadas em um ambiente JavaScript isolado. Eles se comunicam com o checkout do Shopify por meio de uma API padronizada (o pacote @shopify/ui-extensions) em vez da manipulação direta do DOM. Isso significa:

• As extensões não podem ler ou modificar outras partes da página de checkout
• As extensões não podem acessar cookies do navegador, localStorage ou JavaScript externo
• As solicitações de rede de extensões devem passar pelos endpoints aprovados da Shopify
• As extensões podem ler dados de checkout (conteúdo do carrinho, informações do cliente, seleção de envio) por meio da API

Esse sandboxing é o motivo pelo qual as extensões são seguras para atualização: o Shopify pode atualizar o modelo de checkout sem interromper as integrações de extensões.

---

Configurando seu ambiente de desenvolvimento de extensão

Pré-requisitos

• Loja Shopify Plus com acesso à loja de desenvolvimento
• Node.js 18+ e npm/pnpm
• Shopify CLI 3.x

Configuração inicial

npm install -g @shopify/cli @shopify/theme
shopify app create
# Select: Add extension → Checkout UI extension

Isso cria uma estrutura de extensão de checkout no diretório do aplicativo Shopify.

Estrutura do arquivo de extensão

extensions/
  my-checkout-extension/
    src/
      Checkout.tsx    # Main React component
    shopify.extension.toml   # Extension configuration
    package.json

A extensão mínima (TypeScript/React)

Uma extensão de checkout que exibe uma mensagem personalizada:

import {
  reactExtension,
  useSettings,
  Banner,
} from "@shopify/ui-extensions-react/checkout";

export default reactExtension(
  "purchase.checkout.block.render",
  () => <MyExtension />
);

function MyExtension() {
  const { message } = useSettings();
  return (
    <Banner status="info">
      {message || "Default message"}
    </Banner>
  );
}

Nota: Os exemplos de código são ilustrativos; a API real de extensões de interface do Shopify evolui – sempre consulte a documentação atual do desenvolvedor do Shopify.

---

Casos de uso de extensões de alto valor

**1. Exibição e resgate de pontos de fidelidade **

Mostre o saldo atual de pontos de fidelidade de um cliente e permita que ele aplique pontos como desconto:

A extensão lê o ID do cliente no contexto de checkout, chama a API da sua plataforma de fidelidade (Smile.io, LoyaltyLion) por meio do proxy fetch do Shopify, exibe o saldo e, na confirmação, aplica um código de desconto por meio da API de desconto do Shopify.

Isso substitui um ponto de atrito comum: clientes que desejam resgatar pontos de fidelidade, mas precisam sair da finalização da compra para encontrar seu código, o que geralmente resulta no abandono do carrinho.

Impacto de conversão esperado: aumento de 3 a 8% na taxa de conclusão de checkout para membros do programa de fidelidade que veem os pontos disponíveis.

2. Mensagem para presente e opções de embalagem

Adicione um campo de mensagem de presente e uma opção de embrulho de presente à finalização da compra. A extensão:

• Exibe um botão de alternância "Isto é um presente"
• Quando ativado, revela um campo de texto para a mensagem do presente
• Opcionalmente, mostra um upsell de embrulho para presente (preço fixo adicionado como item de linha)
• Salva a mensagem como um atributo do pedido acessível em seu fluxo de trabalho de embalagem

Impacto esperado: 2–5% dos pedidos usam mensagens de presente; o upsell cria receita incremental.

3. Campo Número do pedido de compra B2B

Os compradores B2B exigem um número de ordem de compra para seus sistemas de compras. Sem este campo, o atrito do checkout B2B é significativo:

A extensão adiciona um campo de entrada de texto "Número do pedido de compra", marca-o como obrigatório para clientes B2B (detectado por meio de tags de cliente) e salva o número do pedido como um atributo do pedido. O número do pedido aparece nas faturas e no administrador do pedido.

Considerações de implementação: detecte clientes B2B verificando as tags dos clientes usando o gancho useCustomer.

4. Preferência de data de entrega

Para comerciantes que oferecem diversas opções de velocidade de entrega, a exibição de datas de entrega estimadas junto com as opções de envio reduz a incerteza da decisão e aumenta a seleção de remessas premium:

A extensão se conecta a purchase.checkout.shipping-option-item.render-after para injetar um cálculo de data de entrega abaixo de cada opção de envio. O cálculo da data usa a data atual + dias de trânsito de remessa (obtidos na API da sua operadora ou codificados por zona de remessa).

Impacto esperado: aumento de 8 a 15% na seleção de envio rápido quando datas de entrega precisas são mostradas.

5. Upsell/venda cruzada na finalização da compra

Um bloco de upsell de produto antes do botão "Concluir pedido" - a última oportunidade de aumentar o AOV antes da compra:

A extensão lê o conteúdo do carrinho, chama a API do mecanismo de recomendação e exibe de 1 a 2 produtos complementares relevantes com adição ao carrinho com um clique. Os itens adicionados por meio da extensão atualizam o total de checkout do Shopify em tempo real.

Impacto esperado: 5–12% dos compradores adicionam um item do bloco de upsell no checkout.

---

Extensões pós-compra: a oportunidade de maior ROI

As extensões pós-compra aparecem na página de confirmação do pedido imediatamente após o cliente concluir a compra. O cliente está em um estado positivo máximo – ele acabou de comprar algo que queria. Este é o posicionamento de maior conversão para ofertas de upsell.

Upsell pós-compra com um clique

A extensão pós-compra pode oferecer um complemento de produto que cobra na forma de pagamento já autorizada do cliente, sem um novo fluxo de checkout:

1. O cliente conclui o pedido nº 1234
2. A extensão aparece: "Conclua sua compra - adicione [Produto] por US$ 19 (um clique, sem inserir novamente as informações de pagamento)"
3. O cliente aceita ou recusa
4. Se aceito: cria uma nova cobrança e um novo item de linha do pedido
5. O cliente é redirecionado para a página de status final do pedido

Impacto esperado: taxa de aceitação de 8 a 20% em ofertas pós-compra bem configuradas e no preço certo (oferta de US$ 10 a US$ 30 para um pedido principal de US$ 100 ou mais).

Personalizações da página de agradecimento

Além das vendas adicionais, a extensão da página de agradecimento pode:

• Exibir pontos de fidelidade ganhos neste pedido
• Mostrar CTA do programa de referência com link de compartilhamento pré-preenchido
• Oferecer atualização de assinatura para compradores ocasionais de produtos consumíveis
• Solicite acompanhamento nas redes sociais com incentivo
• Exibir instruções de cuidados com o produto para compradores iniciantes da categoria

---

Funções de checkout: extensões lógicas do lado do servidor

As funções de checkout são mais poderosas do que as extensões de UI – elas modificam a própria lógica de cálculo de checkout principal. Eles são executados no lado do servidor como WebAssembly compilado, o que significa que são rápidos e não podem ser contornados pela manipulação do lado do cliente.

Funções de desconto

Implemente uma lógica de desconto complexa que o mecanismo de desconto nativo do Shopify não suporta:

Funções de envio

Modifique a forma como o Shopify calcula e apresenta as opções de envio:

• Ocultar determinados métodos de envio com base no conteúdo do carrinho (sem envio padrão para itens grandes)
• Injete taxas de envio personalizadas do seu provedor de logística
• Aplicar sobretaxas de envio para endereços de entrega remotos
• Ofereça frete grátis quando o carrinho atingir um limite (calculado em tempo real)

Funções de personalização de pagamento

Controle quais métodos de pagamento aparecem:

• Ocultar "Pagamento na entrega" para pedidos internacionais
• Mostrar apenas transferência bancária para pedidos acima de US$ 10.000
• Ocultar o PayPal para categorias específicas de produtos (motivos de conformidade)
• Exibir descrições ou ícones de métodos de pagamento personalizados

---

API de branding: personalização de checkout visual

A API Checkout Branding permite uma personalização visual abrangente sem alterar a lógica do checkout:

O que você pode personalizar

Configure por meio do Shopify Admin → Configurações → Checkout e contas de cliente → Personalizar checkout ou por meio da API de marca diretamente para configuração programática em várias lojas.

---

Migração de checkout.liquid

Se sua loja Shopify Plus estava usando checkout.liquid (obsoleto em agosto de 2024, migração forçada concluída), você precisará reconstruir as personalizações como extensões. Personalizações comuns de checkout.liquid e seus equivalentes de extensão:

Limitações vs. checkout.liquid

As extensões não podem replicar injeção arbitrária de JavaScript ou manipulação completa de modelos. Se o seu checkout.liquid continha lógica condicional complexa ou layouts de UI profundamente personalizados, algumas funcionalidades podem exigir a reconstrução com funções de checkout ou podem não ser replicáveis ​​na estrutura de extensões.

---

Perguntas frequentes

Os recursos de extensibilidade do Checkout funcionam em dispositivos móveis e computadores?

Sim. As extensões de UI são renderizadas usando os componentes de UI do Shopify, que são inerentemente responsivos. O checkout do Shopify cuida da capacidade de resposta do layout – sua extensão é renderizada dentro do slot designado, que se adapta automaticamente ao tamanho da tela. Você não precisa escrever layouts separados para dispositivos móveis e desktop.

As extensões podem retardar a experiência de checkout?

As extensões de UI são renderizadas pelo servidor na infraestrutura do Shopify — elas não exigem execução de JavaScript do lado do cliente para a renderização inicial. No entanto, extensões que fazem chamadas de API (para buscar saldos de fidelidade, dados de recomendação etc.) adicionam latência à rede. Mantenha as chamadas de API abaixo de 200 ms armazenando respostas em cache e otimizando seus endpoints. Extensões que retardam consistentemente o checkout são detectadas pela Shopify e podem ser desativadas.

Como faço para testar as extensões do Checkout antes de colocá-las no ar?

Use a loja de desenvolvimento da Shopify para testar extensões sem afetar a finalização da produção. A CLI do Shopify fornece um servidor de desenvolvimento local que visualiza sua extensão no ambiente real de checkout do Shopify. As extensões também podem ser implantadas em sua loja de produção em um estado "oculto", visível apenas por meio de um URL de visualização — útil para revisão das partes interessadas antes do lançamento público.

Quais habilidades técnicas são necessárias para criar extensões do Checkout?

Extensões de UI requerem conhecimento de React e TypeScript. As funções de checkout requerem Rust ou JavaScript (compilado para WebAssembly por meio de um conjunto de ferramentas fornecido pelo Shopify). A maioria dos desenvolvedores com experiência em React pode criar extensões de UI após revisar a documentação do Shopify. As funções de checkout são mais exigentes tecnicamente - um desenvolvedor sênior com experiência de back-end é apropriado para funções não triviais.

As extensões do Checkout estão disponíveis em planos do Shopify diferentes do Plus?

Extensões pós-compra e extensões de página de agradecimento estão disponíveis em todos os planos do Shopify. As extensões de UI do Checkout (personalização no meio do checkout) são apenas Plus. As funções de checkout são apenas Plus. A API Branding para personalização visual de checkout é apenas Plus (embora a personalização básica de checkout do editor de tema esteja disponível em todos os planos).

---

Próximas etapas

A extensibilidade do Checkout é o recurso tecnicamente mais complexo do conjunto de recursos do Shopify Plus. O ROI é claro – resgate de fidelidade, campos B2B, upsell pós-compra e transparência na data de entrega têm impacto de conversão documentado. A implementação requer habilidade de desenvolvimento React e familiaridade com as APIs de extensão do Shopify.

A equipe Shopify Plus da ECOSIRE cria e mantém extensões de checkout para comerciantes que vão desde marcas DTC até distribuidores B2B. Nossos desenvolvedores são parceiros certificados do Shopify Plus com experiência específica em extensibilidade de checkout, funções de checkout e API de marca.

Entre em contato para discutir seus requisitos de personalização de checkout — avaliaremos suas necessidades e projetaremos uma arquitetura de extensão que aumenta as conversões sem comprometer o desempenho do checkout.