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

# Crear tu primer widget de checkout

> Guía para configurar un widget de checkout en Aftersell, desde la selección y creación del widget hasta la personalización de su estilo y comportamiento.

En este artículo, te guiaremos a través del proceso de configuración de un widget de checkout en Aftersell. Para conocer los diferentes tipos de widgets disponibles, [haz clic aquí](/es/aftersell/checkout_widget_types).

Comencemos.

***

<div id="step-1-selecting-your-widget">
  ## Paso 1: Selecciona tu widget
</div>

Lo primero es lo primero: selecciona el widget que se ajuste a tus necesidades. Ya sea un widget de upsell o de testimonios, Aftersell ofrece una variedad de opciones para adaptarse a tus preferencias.

En este tutorial, vamos a seleccionar el 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 de Checkout de Aftersell mostrando tarjetas de widgets para Upsells, Cart Controls, Rewards y Testimonials" width="1988" height="1566" data-path="images/aftersell/checkout-widget-create-cards-upsells-cart-controls.png" />

***

<div id="step-2-creating-your-widget">
  ## Paso 2: Crea tu widget
</div>

Haz clic en "Create Upsell" para comenzar a construir tu 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="Panel de Upsells del Checkout Editor con una flecha señalando el botón 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">
  ## Paso 3: Selecciona un preset
</div>

Elige de una lista de presets de widget optimizados u opta por comenzar desde cero.

<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="Pantalla de creación de nueva campaña con opciones de presets como upsells de un solo producto y de varios productos" width="1646" height="1674" data-path="images/aftersell/checkout-widget-create-new-campaign-preset-options.png" />

***

<div id="step-4-edit-styling-and-behaviour">
  ## Paso 4: Edita el estilo y el comportamiento
</div>

Es hora de afinar los detalles. Ajusta el estilo y el comportamiento de tu widget a la perfección. Modifica la lógica de activación, refina la selección de productos o añade ese toque final de pulido al diseño.

<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 un solo producto mostrando configuraciones de activador, producto y estilo con vista previa en vivo" width="2968" height="1619" data-path="images/aftersell/checkout-widget-create-single-product-upsell-editor.png" />

***

<div id="step-5-enable-widget-status">
  ## Paso 5: Activa el estado del widget
</div>

Asegúrate de que el estado de tu widget esté configurado como activo.

<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 con el interruptor de Status del upsell activado para habilitar el widget" width="2892" height="1386" data-path="images/aftersell/checkout-widget-create-editor-upsell-status-toggle.png" />

Con tu widget de checkout ya activo en Aftersell, queda el último paso: colocar el widget en tu checkout de Shopify. ¿Quieres aprender cómo? Haz clic abajo para profundizar en el proceso.

[Más información](/es/aftersell/adding_a_checkout_widget_to_your_shopify_checkout)
