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

# 첫 번째 체크아웃 위젯 만들기

> 위젯 선택 및 생성부터 스타일과 동작 사용자 지정까지, Aftersell에서 체크아웃 위젯을 설정하는 과정을 안내해요.

이 문서에서는 Aftersell에서 체크아웃 위젯을 설정하는 과정을 안내해 드릴게요. 사용할 수 있는 다양한 위젯 유형에 대해 알아보려면 [여기를 클릭하세요](/ko/aftersell/checkout_widget_types).

시작해 볼게요.

***

<div id="step-1-selecting-your-widget">
  ## 1단계: 위젯 선택하기
</div>

가장 먼저 필요에 맞는 위젯을 선택하세요. 업셀 위젯이든 후기 위젯이든, Aftersell은 취향에 맞는 다양한 선택지를 제공해요.

이 튜토리얼에서는 업셀 위젯을 선택할게요.

<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="Upsells, Cart Controls, Rewards, Testimonials 위젯 카드가 표시된 Aftersell Checkout 페이지" width="1988" height="1566" data-path="images/aftersell/checkout-widget-create-cards-upsells-cart-controls.png" />

***

<div id="step-2-creating-your-widget">
  ## 2단계: 위젯 만들기
</div>

"Create 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="Create upsell 버튼을 가리키는 화살표가 있는 Checkout Editor Upsells 패널" width="2884" height="1234" data-path="images/aftersell/checkout-widget-create-editor-upsells-panel-arrow.png" />

***

<div id="step-3-selecting-a-preset">
  ## 3단계: 프리셋 선택하기
</div>

최적화된 위젯 프리셋 목록에서 선택하거나 처음부터 직접 만들 수도 있어요.

<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="단일 및 다중 상품 업셀 같은 프리셋 옵션이 있는 Create new campaign 화면" width="1646" height="1674" data-path="images/aftersell/checkout-widget-create-new-campaign-preset-options.png" />

***

<div id="step-4-edit-styling-and-behaviour">
  ## 4단계: 스타일 및 동작 편집하기
</div>

이제 세부 사항을 다듬을 차례예요. 위젯의 스타일과 동작을 완벽하게 조정하세요. 트리거 로직을 조정하거나, 상품 선택을 다듬거나, 디자인에 마지막 손질을 더해 보세요.

<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="트리거, 상품, 스타일 설정과 실시간 미리보기가 표시된 단일 상품 업셀 편집기" width="2968" height="1619" data-path="images/aftersell/checkout-widget-create-single-product-upsell-editor.png" />

***

<div id="step-5-enable-widget-status">
  ## 5단계: 위젯 상태 활성화하기
</div>

위젯 상태가 활성으로 설정되어 있는지 확인하세요.

<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="위젯을 활성화하기 위해 업셀 Status 토글이 켜진 Checkout Editor" width="2892" height="1386" data-path="images/aftersell/checkout-widget-create-editor-upsell-status-toggle.png" />

이제 체크아웃 위젯이 Aftersell에서 활성화되었으니, 마지막 단계인 Shopify 체크아웃에 위젯 배치하기가 남았어요. 방법이 궁금하신가요? 아래를 클릭해 과정을 더 자세히 알아보세요.

[자세히 알아보기](/ko/aftersell/adding_a_checkout_widget_to_your_shopify_checkout)