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

# Criando seu primeiro widget de checkout

> Guia para configurar um widget de checkout na Aftersell, desde a seleção e criação do widget até a personalização de seu estilo e comportamento.

Neste artigo, vamos guiar você pelo processo de configuração de um widget de checkout na Aftersell. Para conhecer os diferentes tipos de widget disponíveis, [clique aqui](/pt/aftersell/checkout_widget_types).

Vamos começar.

***

<div id="step-1-selecting-your-widget">
  ## Etapa 1: Selecionando seu widget
</div>

Antes de tudo, selecione o widget que atende às suas necessidades. Seja um widget de upsell ou de depoimentos, a Aftersell oferece uma variedade de opções para atender às suas preferências.

Neste tutorial, vamos selecionar o widget de upsell.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-create-cards-upsells-cart-controls.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=3302868c50e12461761e6a1300820bd7" alt="Página Checkout da Aftersell mostrando cartões de widget para Upsells, Cart Controls, Rewards e Testimonials" width="1988" height="1566" data-path="images/aftersell/checkout-widget-create-cards-upsells-cart-controls.png" />

***

<div id="step-2-creating-your-widget">
  ## Etapa 2: Criando seu widget
</div>

Clique em "Create Upsell" para começar a construir seu widget de upsell.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-create-editor-upsells-panel-arrow.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=e89c35b59c09c6fd858e910f46d9fcc0" alt="Painel Upsells do Checkout Editor com uma seta apontando para o botão Create upsell" width="2884" height="1234" data-path="images/aftersell/checkout-widget-create-editor-upsells-panel-arrow.png" />

***

<div id="step-3-selecting-a-preset">
  ## Etapa 3: Selecionando um preset
</div>

Escolha em uma lista de presets de widget otimizados ou opte por começar do zero.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-create-new-campaign-preset-options.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=d64607da81a3a4b43e9d5c7c9a7420c2" alt="Tela Create new campaign com opções de preset como upsells de produto único e de múltiplos produtos" width="1646" height="1674" data-path="images/aftersell/checkout-widget-create-new-campaign-preset-options.png" />

***

<div id="step-4-edit-styling-and-behaviour">
  ## Etapa 4: Edite o estilo e o comportamento
</div>

É hora de ajustar os detalhes. Ajuste o estilo e o comportamento do seu widget à perfeição. Refine a lógica de disparo, aprimore a seleção de produtos ou adicione aquele toque final de acabamento ao design.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-create-single-product-upsell-editor.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=e9560a037ceb877ea2d47d261278934b" alt="Editor de upsell de produto único mostrando configurações de gatilho, produto e estilo com pré-visualização em tempo real" width="2968" height="1619" data-path="images/aftersell/checkout-widget-create-single-product-upsell-editor.png" />

***

<div id="step-5-enable-widget-status">
  ## Etapa 5: Ative o status do widget
</div>

Garanta que o status do seu widget esteja definido como ativo.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-create-editor-upsell-status-toggle.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=7f9cedd5ace808ad47a077090be3e29d" alt="Checkout Editor com o botão de alternância Status do upsell ativado para ativar o widget" width="2892" height="1386" data-path="images/aftersell/checkout-widget-create-editor-upsell-status-toggle.png" />

Com o seu widget de checkout agora ativo na Aftersell, resta a etapa final: colocar o widget no seu checkout do Shopify. Quer aprender como? Clique abaixo para se aprofundar no processo.

[Saiba mais](/pt/aftersell/adding_a_checkout_widget_to_your_shopify_checkout)
