Skip to main content
Este guia mostra como configurar e posicionar widgets de checkout no Aftersell, desde a habilitação dos widgets até a otimização do posicionamento no Shopify Checkout para maximizar as taxas de conversão.. Observação: os widgets de checkout estão disponíveis apenas para lojistas Shopify Plus devido às restrições da API de Checkout Extensibility da Shopify.

​
Etapa 1: habilite seu widget no Aftersell

Antes de adicionar widgets ao seu checkout, você precisa habilitá-los no admin do Aftersell.
  1. Navegue até a aba Checkout no admin do Aftersell
  2. Selecione o tipo de widget que deseja configurar (Upsells, Cart Controls, Rewards, Trust Badges, Testimonials, Notes, Images ou Text)
  3. Clique em Create para criar um novo widget ou selecione um widget existente para editar
  4. Configure as opções do seu widget (consulte Tipos de widget e configuração abaixo)
  5. Clique no botão de alternância Enable no canto superior direito das configurações do widget
  6. Para upsells restritos ou avançados, certifique-se de habilitar gatilhos personalizados antes de prosseguir

​
Etapa 2: abra o Shopify Checkout Editor

Há duas maneiras de acessar o Shopify Checkout Editor: Opção 1: pelo admin da Shopify
  1. Vá para Settings no seu admin da Shopify
  2. Clique em Checkout na navegação à esquerda
  3. Clique em Customize ao lado do perfil de checkout desejado
Opção 2: pelo Aftersell
  1. Clique no botão Open Shopify Checkout Editor no canto inferior direito da página do editor de Checkout do Aftersell
💡 Dica: a opção 1 oferece mais controle sobre qual perfil de checkout você está editando. Recomendamos testar primeiro em uma versão de rascunho antes de colocá-la no ar. Página inicial do admin da Shopify com o link Settings destacado para abrir o editor de checkout

​
Etapa 3: adicione o bloco de app ao seu checkout

  1. No Shopify Checkout Editor, clique em Add app block
  2. Selecione o widget do Aftersell desejado na lista de widgets disponíveis
  3. Escolha o posicionamento correto para o seu widget (consulte Posicionamentos disponíveis abaixo)
  4. Se quiser que seus widgets sejam exibidos no checkout do Shop Pay, marque a opção Include app block in Shop Pay
  5. Clique em Save no canto superior direito
Shopify Checkout Editor com uma seta apontando para o botão Add block na barra lateral

​
Etapa 4: posicione seu widget

  1. Arraste e solte o bloco de app no local desejado dentro da área de posicionamento selecionada
  2. Clique em Save no canto superior direito
Lista de blocos do Shopify Checkout Editor ao lado de uma prévia do checkout ao vivo mostrando widgets do Aftersell

​
Tipos de widget e configuração

​
Posicionamentos

Os posicionamentos são criados no editor de Checkout do Aftersell e permitem executar vários widgets do mesmo tipo na mesma página de checkout. Por exemplo, se você quiser exibir duas ofertas de upsell na mesma página, cada uma deve ser atribuída a um posicionamento diferente.

​
Posicionamentos disponíveis

  • Default placement: o posicionamento principal. Todo tipo de widget começa aqui.
  • Additional placement 1: um segundo espaço de posicionamento para exibir outro widget do mesmo tipo na mesma página.
  • Additional placement 2: um terceiro espaço de posicionamento para separação adicional.
Você também pode criar novos posicionamentos diretamente no menu suspenso de posicionamentos do Aftersell selecionando + Add new placement. Editor de Checkout do Aftersell mostrando o menu suspenso de posicionamento acima da lista de Upsells e da prévia

​
Quando usar vários posicionamentos

Use vários posicionamentos quando quiser:
  • Exibir mais de um widget do mesmo tipo em uma única página de checkout
  • Mostrar widgets em seções diferentes da página
  • Segmentar públicos diferentes com ofertas diferentes
  • Executar widgets com gatilhos semelhantes ou sobrepostos
O Aftersell usa um sistema de prioridade. Você não pode executar vários widgets com gatilhos idênticos dentro do mesmo posicionamento. Se dois widgets compartilharem as mesmas condições de gatilho em um posicionamento, apenas um será exibido, com base na prioridade. Para usar gatilhos semelhantes, atribua cada widget a um posicionamento diferente, para que possam funcionar de forma independente e sem conflito.

​
Correspondendo posicionamentos no Shopify Checkout Editor

Cada posicionamento no Aftersell corresponde a um bloco de app separado no Shopify Checkout Editor. O posicionamento selecionado na Shopify deve corresponder ao posicionamento definido no Aftersell. Por exemplo, se um widget estiver atribuído ao Additional placement 1 no Aftersell, o bloco de app na Shopify também deve estar definido como Additional placement 1. Se os posicionamentos não corresponderem, o widget pode não aparecer ou pode ser exibido no local errado. Importante: uma incompatibilidade de posicionamento é um dos motivos mais comuns para um widget não ser exibido. Se um widget não estiver aparecendo, confirme se o posicionamento corresponde tanto no Aftersell quanto na Shopify antes de continuar a solução de problemas. Configurações do bloco Upsell Widget no Shopify Checkout Editor com o menu suspenso Placement definido para um posicionamento adicional

​
Upsells

Ofereça produtos aos clientes durante o checkout para aumentar o valor médio do pedido (AOV). Opções de configuração: Modos de widget:
  • Single Product Upsell: exibe um produto com um botão Add to Cart
  • Multi-Product Upsell: mostra vários produtos em um layout de pilha ou carrossel, permitindo que os clientes aceitem várias ofertas
  • Checkmark Upsell: exibe um único produto com uma caixa de seleção em vez de um botão Add to Cart (ideal para adicionais de baixo custo, como proteção de envio)
Métodos de seleção de produtos:
  • Specific Products: selecione manualmente produtos individuais para o upsell
  • Collection: selecione uma coleção e exiba até 5 produtos aleatórios (produtos que já estão no carrinho são automaticamente excluídos)
  • Automatic upsell(s): recomende produtos automaticamente com base no conteúdo do carrinho
  • Most Expensive Product: faça upsell automaticamente do produto mais caro do carrinho
  • Spend threshold: recomende produtos que ajudem os clientes a atingir os limites de recompensa (selecionável somente quando Show rewards bar estiver habilitado no mesmo widget de upsell)
  • Strategy: selecione um produto dinamicamente usando segmentação baseada em regras. Exibido apenas em lojas com Estratégias habilitadas
Recursos adicionais:
  • Adicione descontos diretamente no widget
  • Trave planos de assinatura em opções específicas
  • Exiba estrelas de avaliação de produtos (requer app de avaliações compatível)
  • Defina um número máximo de ofertas aceitas por widget (apenas nos tipos de upsell Single e Multi)
Saiba mais sobre widgets de upsell

​
Cart Controls

Permita que os clientes modifiquem o carrinho diretamente na página de checkout. Controles disponíveis:
  • Variant selector: mudar para outra variante em estoque
  • Quantity selector: ajustar as quantidades dos produtos
  • Remove item: Show Remove Item Button remove produtos de upsell do carrinho. Uma configuração associada, Allow Removal of Non-Upsell Products (desativada por padrão), estende a remoção a tudo o que está no carrinho
  • Subscription selector: alterar a frequência da assinatura
  • Subscription upgrade: converter compras avulsas em assinaturas
  • Custom text: adicionar texto personalizado abaixo dos itens do pedido
Segmentação de produtos:
  • Aplicar a todos os produtos do carrinho
  • Aplicar apenas aos produtos selecionados
  • Aplicar a todos os produtos, exceto os selecionados
Recursos adicionais:
  • Exibir estrelas de avaliação para os produtos no carrinho
Saiba mais sobre cart controls

​
Rewards

Exiba uma barra de progresso mostrando aos clientes o quão perto estão de ganhar uma recompensa. Opções de configuração:
  • Base da recompensa: Cart total ou Item count
  • Base do valor (para Cart total): Order total (includes shipping and tax), Subtotal (before discounts) ou Subtotal after discounts (excludes tax and shipping)
  • Mensagem e estilo da recompensa
  • Cores e design da barra de progresso
Melhores práticas:
  • Combine com widgets de upsell para ajudar os clientes a atingir os limites de recompensa
  • Use o tipo de produto spend threshold nos upsells para recomendar automaticamente produtos que fechem a lacuna
  • Crie recompensas na Shopify usando Automatic Discounts (para recompensas de desconto) ou Shipping Rules (para frete grátis)
  • Use Subtotal after discounts (excludes tax and shipping) como base do valor ao oferecer frete grátis, para que a barra corresponda à avaliação de limite da própria Shopify quando códigos de desconto forem aplicados
Saiba mais sobre rewards

​
Trust Badges

Gere confiança com ícones e textos personalizados para aumentar as taxas de conversão do checkout. Opções de configuração:
  • Layout dos selos: pilha vertical ou exibição horizontal
  • Ícones e textos personalizados para cada selo
  • Opções de estilo e espaçamento
Melhores práticas:
  • Destaque recursos de segurança (checkout seguro, criptografia SSL)
  • Mostre garantias (garantia de devolução do dinheiro, devoluções gratuitas)
  • Exiba benefícios de envio (frete grátis, entrega rápida)
Saiba mais sobre trust badges

​
Testimonials

Exiba avaliações de clientes diretamente no checkout para gerar confiança. Opções de configuração:
  • Flex Testimonials (recomendado): extrai automaticamente avaliações reais do seu app de avaliações (Judge.me, Klaviyo, Okendo ou Yotpo)
  • Modo de seleção: Manual (escolha avaliações específicas) ou Dynamic (busca automaticamente avaliações com base no conteúdo do carrinho)
  • Tipo de exibição: carrossel horizontal ou pilha vertical
  • Filtro de classificação mínima
Requisitos de configuração:
  • Configure as credenciais do app de avaliações em Settings > Product Reviews
  • As avaliações sincronizam automaticamente em até 24 horas e, depois, semanalmente
Saiba mais sobre testimonials

​
Notes

Permita que os clientes adicionem observações ao pedido. Opções de configuração:
  • Observações manuais: campo de texto livre para o cliente
  • Observações pré-escritas: caixas de seleção para opções como embalagem de presente ou embalagem ecológica
Saiba mais sobre notes

​
Images

Faça upload e exiba imagens personalizadas no seu checkout. Opções de configuração:
  • Upload de imagem
  • Controle deslizante de ajuste de largura
  • Sem requisito de tamanho mínimo
Saiba mais sobre images

​
Text

Insira um banner com texto personalizado no seu checkout. Opções de configuração:
  • Container Style: Plain Text (o padrão) ou Badge. As cores de banner abaixo só aparecem quando você escolhe Badge
  • Banner Type (apenas Badge):
    • Info (Blue): fundo azul com ícone de informação
    • Success (Green): fundo verde com ícone de check
    • Warning (Yellow): fundo amarelo com ícone de triângulo de alerta
    • Critical (Red): fundo vermelho com ícone de ponto de exclamação
  • Tamanho do texto no campo Body (Small ou Base) — o campo Heading não tem controle de tamanho
  • Alinhamento nos campos Heading e Body
  • Espaçamento: None, Extra Tight, Tight, Base, Loose ou Extra Loose
Saiba mais sobre text

​
Solução de problemas

​
Widgets não são exibidos

Se seus widgets não aparecerem após a configuração:
  1. Verifique se o widget está habilitado no admin do Aftersell
  2. Verifique se o bloco de app foi adicionado no Shopify Checkout Editor
  3. Confirme que o bloco de app foi salvo no Shopify Checkout Editor
  4. Verifique se o posicionamento correto está selecionado. Ao adicionar um bloco de app no Shopify Checkout Editor, você deve escolher o posicionamento correspondente, como Default placement, Additional placement 1 ou Additional placement 2. Se o posicionamento errado for selecionado, o widget pode não aparecer ou pode ser exibido no local errado. Remova o bloco de app e adicione-o novamente, garantindo que o posicionamento pretendido esteja selecionado.
  5. Para o Shop Pay: verifique se “Include app block in Shop Pay” está marcado
  6. Limpe o cache do navegador ou tente o modo anônimo
  7. Aguarde alguns minutos para que as alterações sejam propagadas

​
Widgets do Shop Pay não aparecem

Para exibir widgets no checkout do Shop Pay:
  1. Abra o widget no Shopify Checkout Editor
  2. Marque a opção Include app block in Shop Pay em Checkout behaviour
  3. Salve suas alterações
Barra lateral do Shopify Checkout Editor mostrando o bloco de app Aftersell Upsell Widget em Main Saiba mais sobre widgets no Shop Pay

​
Próximos passos