> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Como configurar widgets de checkout

> Guia completo passo a passo para configurar widgets de checkout no Aftersell, incluindo todos os tipos de widget, opções de posicionamento e melhores práticas de conversão para mobile e desktop

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.

***

<div id="step-1-enable-your-widget-in-aftersell">
  ## Etapa 1: habilite seu widget no Aftersell
</div>

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](#upsells), [Cart Controls](#cart-controls), [Rewards,](#rewards) [Trust Badges,](#trust-badges) [Testimonials](#testimonials), [Notes](#notes), [Images](#images) ou [Text](#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](#widget-types-and-configuration) 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

***

<div id="step-2-open-the-shopify-checkout-editor">
  ## Etapa 2: abra o Shopify Checkout Editor
</div>

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.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-config-admin-settings-link.gif?s=a182cd42cf41d7b53e5e5765afeb65d9" alt="Página inicial do admin da Shopify com o link Settings destacado para abrir o editor de checkout" width="1844" height="1080" data-path="images/aftersell/checkout-widget-config-admin-settings-link.gif" />

***

<div id="step-3-add-the-app-block-to-your-checkout">
  ## Etapa 3: adicione o bloco de app ao seu checkout
</div>

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](#available-placements) abaixo)
4. Se quiser que seus widgets sejam exibidos no checkout do Shop Pay, marque a opção [**Include app block in Shop Pay**](/pt/aftersell/show_checkout_widgets_in_shop_pay)
5. Clique em **Save** no canto superior direito

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-install-add-app-block-button.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=f6ba0d6ab535b750f8487c408e99ef69" alt="Shopify Checkout Editor com uma seta apontando para o botão Add block na barra lateral" width="3486" height="1964" data-path="images/aftersell/checkout-widget-install-add-app-block-button.png" />

***

<div id="step-4-position-your-widget">
  ## Etapa 4: posicione seu widget
</div>

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

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-install-drag-app-block.gif?s=7d17314d5e47e74b202e18baf3867e7a" alt="Lista de blocos do Shopify Checkout Editor ao lado de uma prévia do checkout ao vivo mostrando widgets do Aftersell" width="1916" height="1080" data-path="images/aftersell/checkout-widget-install-drag-app-block.gif" />

***

<div id="widget-types-and-configuration">
  ## Tipos de widget e configuração
</div>

<div id="placements">
  ## Posicionamentos
</div>

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.

<div id="available-placements">
  ### Posicionamentos disponíveis
</div>

* **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**.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-config-placement-dropdown.gif?s=e43a141a2b6db37cb17ed0fcb1e2f8ef" alt="Editor de Checkout do Aftersell mostrando o menu suspenso de posicionamento acima da lista de Upsells e da prévia" width="1912" height="1080" data-path="images/aftersell/checkout-widget-config-placement-dropdown.gif" />

***

<div id="when-to-use-multiple-placements">
  ### Quando usar vários posicionamentos
</div>

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.

***

<div id="matching-placements-in-the-shopify-checkout-editor">
  ## Correspondendo posicionamentos no Shopify Checkout Editor
</div>

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.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-config-block-placement-dropdown.gif?s=b9fc5f328cbf3bf04a63cfbdde505cb4" alt="Configurações do bloco Upsell Widget no Shopify Checkout Editor com o menu suspenso Placement definido para um posicionamento adicional" width="2192" height="1080" data-path="images/aftersell/checkout-widget-config-block-placement-dropdown.gif" />

***

<div id="upsells">
  ### Upsells
</div>

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](/pt/aftersell/strategies_overview) 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](/pt/aftersell/checkout_widget_types#upsells)

***

<div id="cart-controls">
  ### Cart Controls
</div>

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](/pt/aftersell/checkout_widget_types#cart-controls)

***

<div id="rewards">
  ### Rewards
</div>

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](/pt/aftersell/checkout_widget_types#rewards)

***

<div id="trust-badges">
  ### Trust Badges
</div>

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](/pt/aftersell/checkout_widget_types#trust-badges)

***

<div id="testimonials">
  ### Testimonials
</div>

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](/pt/aftersell/checkout_widget_types#testimonials)

***

<div id="notes">
  ### Notes
</div>

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](/pt/aftersell/checkout_widget_types#notes)

***

<div id="images">
  ### Images
</div>

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](/pt/aftersell/checkout_widget_types#images)

***

<div id="text">
  ### Text
</div>

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](/pt/aftersell/checkout_widget_types#text)

***

<div id="troubleshooting">
  ## Solução de problemas
</div>

<div id="widgets-not-displaying">
  ### Widgets não são exibidos
</div>

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

<div id="shop-pay-widgets-not-showing">
  ### Widgets do Shop Pay não aparecem
</div>

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

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-config-editor-sidebar-app-block.gif?s=63de90b2b7e5807806e2390316de688d" alt="Barra lateral do Shopify Checkout Editor mostrando o bloco de app Aftersell Upsell Widget em Main" width="1416" height="1080" data-path="images/aftersell/checkout-widget-config-editor-sidebar-app-block.gif" />

[Saiba mais sobre widgets no Shop Pay](/pt/aftersell/show_checkout_widgets_in_shop_pay)

***

<div id="next-steps">
  ## Próximos passos
</div>

* [Saiba mais sobre gatilhos de checkout](/pt/aftersell/checkout_triggers) para exibir widgets condicionalmente
* [Configure testes A/B de checkout](/pt/aftersell/checkout_a_b_testing) para otimizar os posicionamentos
* [Configure a identidade visual do checkout](/pt/aftersell/checkout_branding_settings) para combinar com o design da sua loja
* [Explore estratégias avançadas de upsell](/pt/aftersell/best_practices) para maximizar o AOV