> ## 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에서 체크아웃 위젯을 구성하는 완벽한 단계별 가이드로, 모든 위젯 유형, 배치 옵션, 모바일 및 데스크톱을 위한 전환 모범 사례를 다뤄요

이 가이드는 위젯 활성화부터 최대 전환율을 위한 Shopify Checkout 내 배치 최적화까지, Aftersell에서 체크아웃 위젯을 구성하고 배치하는 방법을 안내해요..

**참고:** Shopify의 Checkout Extensibility API 제한으로 인해 체크아웃 위젯은 Shopify Plus 머천트만 사용할 수 있어요.

***

<div id="step-1-enable-your-widget-in-aftersell">
  ## 1단계: Aftersell에서 위젯 활성화하기
</div>

체크아웃에 위젯을 추가하기 전에, Aftersell 관리자에서 위젯을 활성화해야 해요.

1. Aftersell 관리자에서 **Checkout** 탭으로 이동하세요
2. 구성할 위젯 유형을 선택하세요([Upsells](#upsells), [Cart Controls](#cart-controls), [Rewards,](#rewards) [Trust Badges,](#trust-badges) [Testimonials](#testimonials), [Notes](#notes), [Images](#images), 또는 [Text](#text))
3. **Create**를 클릭해 새 위젯을 만들거나 기존 위젯을 선택해 편집하세요
4. 위젯 설정을 구성하세요(아래 [위젯 유형 및 구성](#widget-types-and-configuration) 참고)
5. 위젯 설정 오른쪽 상단의 **Enable** 토글을 클릭하세요
6. 제한적이거나 고급 업셀의 경우, 진행하기 전에 사용자 지정 트리거를 활성화했는지 확인하세요

***

<div id="step-2-open-the-shopify-checkout-editor">
  ## 2단계: Shopify Checkout Editor 열기
</div>

Shopify Checkout Editor에 접근하는 방법은 두 가지예요:

**옵션 1: Shopify 관리자에서**

1. Shopify 관리자에서 **Settings**로 이동하세요
2. 왼쪽 탐색 메뉴에서 **Checkout**을 클릭하세요
3. 원하는 체크아웃 프로필 옆의 **Customize**를 클릭하세요

**옵션 2: Aftersell에서**

1. Aftersell Checkout 편집기 페이지 오른쪽 하단의 **Open Shopify Checkout Editor** 버튼을 클릭하세요

💡 **팁:** 옵션 1을 사용하면 어떤 체크아웃 프로필을 편집할지 더 세밀하게 제어할 수 있어요. 라이브로 설정하기 전에 먼저 초안(draft) 버전에서 테스트하는 것을 권장해요.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-config-admin-settings-link.gif?s=a182cd42cf41d7b53e5e5765afeb65d9" alt="체크아웃 편집기를 열기 위해 Settings 링크가 강조 표시된 Shopify 관리자 홈" 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">
  ## 3단계: 체크아웃에 앱 블록 추가하기
</div>

1. Shopify Checkout Editor에서 **Add app block**을 클릭하세요
2. 사용 가능한 위젯 목록에서 원하는 Aftersell 위젯을 선택하세요
3. 위젯에 맞는 올바른 배치를 선택하세요(아래 [사용 가능한 배치](#available-placements) 참고)
4. Shop Pay 체크아웃에도 위젯을 표시하려면 [**Include app block in Shop Pay**](/ko/aftersell/show_checkout_widgets_in_shop_pay) 옵션을 체크하세요
5. 오른쪽 상단의 **Save**를 클릭하세요

<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="사이드바의 Add block 버튼을 가리키는 화살표가 있는 Shopify Checkout Editor" width="3486" height="1964" data-path="images/aftersell/checkout-widget-install-add-app-block-button.png" />

***

<div id="step-4-position-your-widget">
  ## 4단계: 위젯 배치하기
</div>

1. 선택한 배치 영역 내 원하는 위치로 앱 블록을 드래그 앤 드롭하세요
2. 오른쪽 상단의 **Save**를 클릭하세요

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-install-drag-app-block.gif?s=7d17314d5e47e74b202e18baf3867e7a" alt="Aftersell 위젯이 표시된 실시간 체크아웃 미리보기 옆의 Shopify Checkout Editor 블록 목록" width="1916" height="1080" data-path="images/aftersell/checkout-widget-install-drag-app-block.gif" />

***

<div id="widget-types-and-configuration">
  ## 위젯 유형 및 구성
</div>

<div id="placements">
  ## 배치(Placements)
</div>

배치는 Aftersell Checkout 편집기에서 생성되며, 같은 체크아웃 페이지에서 같은 유형의 위젯을 여러 개 실행할 수 있게 해줘요.

예를 들어, 같은 페이지에 두 개의 업셀 오퍼를 표시하려면 각각 다른 배치에 할당해야 해요.

<div id="available-placements">
  ### 사용 가능한 배치
</div>

* **Default placement**: 기본 배치예요. 모든 위젯 유형은 여기서 시작해요.
* **Additional placement 1**: 같은 페이지에 같은 유형의 위젯을 하나 더 표시하기 위한 두 번째 배치 슬롯이에요.
* **Additional placement 2**: 추가 분리를 위한 세 번째 배치 슬롯이에요.

Aftersell의 배치 드롭다운에서 **+ Add new placement**를 선택해 새 배치를 직접 만들 수도 있어요.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-config-placement-dropdown.gif?s=e43a141a2b6db37cb17ed0fcb1e2f8ef" alt="Upsells 목록과 미리보기 위에 배치 드롭다운이 표시된 Aftersell Checkout 편집기" width="1912" height="1080" data-path="images/aftersell/checkout-widget-config-placement-dropdown.gif" />

***

<div id="when-to-use-multiple-placements">
  ### 여러 배치를 사용해야 하는 경우
</div>

다음과 같은 경우 여러 배치를 사용하세요:

* 하나의 체크아웃 페이지에 같은 유형의 위젯을 두 개 이상 표시하고 싶을 때
* 페이지의 서로 다른 섹션에 위젯을 표시하고 싶을 때
* 서로 다른 고객층에 서로 다른 오퍼를 타기팅하고 싶을 때
* 비슷하거나 겹치는 트리거로 위젯을 실행하고 싶을 때

Aftersell은 우선순위 시스템을 사용해요. 같은 배치 내에서 동일한 트리거를 가진 여러 위젯을 실행할 수 없어요. 한 배치에서 두 위젯이 같은 트리거 조건을 공유하면, 우선순위에 따라 하나만 표시돼요.

비슷한 트리거를 사용하려면 각 위젯을 다른 배치에 할당해서 충돌 없이 독립적으로 실행되게 하세요.

***

<div id="matching-placements-in-the-shopify-checkout-editor">
  ## Shopify Checkout Editor에서 배치 일치시키기
</div>

Aftersell의 각 배치는 Shopify Checkout Editor의 별도 앱 블록에 대응해요. Shopify에서 선택한 배치는 Aftersell에서 설정한 배치와 일치해야 해요.

예를 들어, 위젯이 Aftersell에서 **Additional placement 1**에 할당되어 있다면, Shopify의 앱 블록도 **Additional placement 1**로 설정되어야 해요.

배치가 일치하지 않으면 위젯이 나타나지 않거나 잘못된 위치에 표시될 수 있어요.

**중요:** 배치 불일치는 위젯이 표시되지 않는 가장 흔한 원인 중 하나예요. 위젯이 나타나지 않는다면, 추가 문제 해결에 앞서 Aftersell과 Shopify 양쪽에서 배치가 일치하는지 확인하세요.

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-config-block-placement-dropdown.gif?s=b9fc5f328cbf3bf04a63cfbdde505cb4" alt="Placement 드롭다운이 추가 배치로 설정된 Shopify Checkout Editor의 Upsell Widget 블록 설정" width="2192" height="1080" data-path="images/aftersell/checkout-widget-config-block-placement-dropdown.gif" />

***

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

체크아웃 중에 고객에게 상품을 제안하여 평균 주문 금액(AOV)을 높이세요.

**구성 옵션:**

**위젯 모드:**

* **Single Product Upsell:** Add to Cart 버튼과 함께 상품 하나를 표시해요
* **Multi-Product Upsell:** 스택 또는 캐러셀 레이아웃으로 여러 상품을 표시하여 고객이 여러 오퍼를 수락할 수 있게 해요
* **Checkmark Upsell:** Add to Cart 버튼 대신 체크박스와 함께 상품 하나를 표시해요(배송 보호 같은 저가 애드온에 이상적이에요)

**상품 선택 방법:**

* **Specific Products:** 업셀할 개별 상품을 수동으로 선택해요
* **Collection:** 컬렉션을 선택해 최대 5개의 무작위 상품을 표시해요(이미 장바구니에 있는 상품은 자동으로 제외돼요)
* **Automatic upsell(s):** 장바구니 내용을 기반으로 상품을 자동으로 추천해요
* **Most Expensive Product:** 장바구니에서 가장 비싼 상품을 자동으로 업셀해요
* **Spend threshold:** 고객이 리워드 기준 금액에 도달하도록 돕는 상품을 추천해요(같은 업셀 위젯에서 **Show rewards bar**가 활성화된 경우에만 선택 가능해요)
* **Strategy:** 규칙 기반 타기팅으로 상품을 동적으로 선택해요. [Strategies](/ko/aftersell/strategies_overview)가 활성화된 스토어에서만 표시돼요

**추가 기능:**

* 위젯 내에서 직접 할인 추가
* 구독 플랜을 특정 옵션으로 고정
* 상품 리뷰 별점 표시(호환되는 리뷰 앱 필요)
* 위젯당 수락 가능한 최대 오퍼 수 설정(Single 및 Multi 업셀 유형만 해당)

[업셀 위젯에 대해 더 알아보기](/ko/aftersell/checkout_widget_types#upsells)

***

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

고객이 체크아웃 페이지에서 직접 장바구니를 수정할 수 있게 해요.

**사용 가능한 컨트롤:**

* **Variant selector:** 재고가 있는 다른 변형 상품으로 변경
* **Quantity selector:** 상품 수량 조정
* **Remove item:** Show Remove Item Button은 장바구니에서 업셀 상품을 제거해요. 연동 설정인 **Allow Removal of Non-Upsell Products**(기본적으로 꺼짐)를 켜면 장바구니의 모든 상품으로 제거 대상이 확장돼요
* **Subscription selector:** 구독 주기 변경
* **Subscription upgrade:** 일회성 구매를 구독으로 업그레이드
* **Custom text:** 라인 아이템 아래에 사용자 지정 텍스트 추가

**상품 타기팅:**

* 장바구니의 모든 상품에 적용
* 선택한 상품에만 적용
* 선택한 상품을 제외한 모든 상품에 적용

**추가 기능:**

* 장바구니 내 상품에 상품 리뷰 별점 표시

[장바구니 컨트롤에 대해 더 알아보기](/ko/aftersell/checkout_widget_types#cart-controls)

***

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

고객이 리워드 획득까지 얼마나 남았는지 보여 주는 진행률 바를 표시해요.

**구성 옵션:**

* 리워드 기준: **Cart total** 또는 **Item count**
* 금액 기준(Cart total의 경우): **Order total (includes shipping and tax)**, **Subtotal (before discounts)**, 또는 **Subtotal after discounts (excludes tax and shipping)**
* 리워드 메시지 및 스타일
* 진행률 바 색상 및 디자인

**모범 사례:**

* 업셀 위젯과 함께 사용해 고객이 리워드 기준 금액에 도달하도록 도우세요
* 업셀에서 spend threshold 상품 유형을 사용해 부족한 금액을 채워 주는 상품을 자동으로 추천하세요
* Shopify에서 Automatic Discounts(할인 리워드) 또는 Shipping Rules(무료 배송)를 사용해 리워드를 만드세요
* 무료 배송을 제공할 때는 금액 기준으로 \*\*Subtotal after discounts (excludes tax and shipping)\*\*를 사용해, 할인 코드가 적용될 때 바가 Shopify 자체의 기준 금액 평가와 일치하도록 하세요

[리워드에 대해 더 알아보기](/ko/aftersell/checkout_widget_types#rewards)

***

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

사용자 지정 아이콘과 텍스트로 신뢰를 쌓아 체크아웃 전환율을 높이세요.

**구성 옵션:**

* 배지 레이아웃: 세로 스택 또는 가로 표시
* 각 배지에 대한 사용자 지정 아이콘 및 텍스트
* 스타일 및 간격 옵션

**모범 사례:**

* 보안 기능 강조(안전한 체크아웃, SSL 암호화)
* 보증 표시(환불 보장, 무료 반품)
* 배송 혜택 표시(무료 배송, 빠른 배송)

[신뢰 배지에 대해 더 알아보기](/ko/aftersell/checkout_widget_types#trust-badges)

***

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

체크아웃에서 직접 고객 리뷰를 표시해 신뢰를 쌓으세요.

**구성 옵션:**

* **Flex Testimonials(권장):** 리뷰 앱(Judge.me, Klaviyo, Okendo, Yotpo)에서 실제 리뷰를 자동으로 가져와요
* 선택 모드: Manual(특정 리뷰 선택) 또는 Dynamic(장바구니 내용에 따라 리뷰 자동 가져오기)
* 표시 유형: 가로 캐러셀 또는 세로 스택
* 최소 별점 필터

**설정 요구 사항:**

* Settings > Product Reviews에서 리뷰 앱 자격 증명 구성
* 리뷰는 24시간 이내에 자동 동기화되며, 이후 매주 동기화돼요

[고객 후기에 대해 더 알아보기](/ko/aftersell/checkout_widget_types#testimonials)

***

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

고객이 주문에 메모를 추가할 수 있게 해요.

**구성 옵션:**

* Manual notes: 고객이 입력하는 자유 텍스트 필드
* Pre-written notes: 선물 포장이나 친환경 포장 같은 옵션을 위한 체크박스

[노트에 대해 더 알아보기](/ko/aftersell/checkout_widget_types#notes)

***

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

체크아웃에 사용자 지정 이미지를 업로드하고 표시하세요.

**구성 옵션:**

* 이미지 업로드
* 너비 조정 슬라이더
* 최소 크기 요구 사항 없음

[이미지에 대해 더 알아보기](/ko/aftersell/checkout_widget_types#images)

***

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

체크아웃에 사용자 지정 텍스트가 있는 배너를 삽입하세요.

**구성 옵션:**

* **Container Style:** **Plain Text**(기본값) 또는 **Badge**. 아래의 배너 색상은 Badge를 선택한 후에만 표시돼요
* **Banner Type**(Badge만 해당):
  * **Info (Blue):** 정보 아이콘이 있는 파란색 배경
  * **Success (Green):** 체크 표시 아이콘이 있는 초록색 배경
  * **Warning (Yellow):** 경고 삼각형 아이콘이 있는 노란색 배경
  * **Critical (Red):** 느낌표 아이콘이 있는 빨간색 배경
* **Body** 필드의 텍스트 크기(Small 또는 Base) — Heading 필드에는 크기 조절 기능이 없어요
* Heading 및 Body 필드 모두에 대한 정렬
* 간격: None, Extra Tight, Tight, Base, Loose, 또는 Extra Loose

[텍스트에 대해 더 알아보기](/ko/aftersell/checkout_widget_types#text)

***

<div id="troubleshooting">
  ## 문제 해결
</div>

<div id="widgets-not-displaying">
  ### 위젯이 표시되지 않아요
</div>

설정 후에도 위젯이 표시되지 않는다면:

1. Aftersell 관리자에서 위젯이 활성화되어 있는지 확인하세요
2. Shopify Checkout Editor에 앱 블록이 추가되어 있는지 확인하세요
3. Shopify Checkout Editor에서 앱 블록이 저장되어 있는지 확인하세요
4. 올바른 배치가 선택되어 있는지 확인하세요. Shopify Checkout Editor에서 앱 블록을 추가할 때 Default placement, Additional placement 1, Additional placement 2 등 일치하는 배치를 선택해야 해요. 잘못된 배치가 선택되면 위젯이 나타나지 않거나 잘못된 위치에 표시될 수 있어요. 앱 블록을 제거한 후 다시 추가하면서 의도한 배치가 선택되었는지 확인하세요.
5. Shop Pay의 경우: "Include app block in Shop Pay"가 체크되어 있는지 확인하세요
6. 브라우저 캐시를 지우거나 시크릿 모드를 사용해 보세요
7. 변경 사항이 반영될 때까지 몇 분 기다려 보세요

<div id="shop-pay-widgets-not-showing">
  ### Shop Pay에서 위젯이 표시되지 않아요
</div>

Shop Pay 체크아웃에 위젯을 표시하려면:

1. Shopify Checkout Editor에서 위젯을 여세요
2. Checkout behaviour 아래의 **Include app block in Shop Pay** 옵션을 체크하세요
3. 변경 사항을 저장하세요

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-config-editor-sidebar-app-block.gif?s=63de90b2b7e5807806e2390316de688d" alt="Main 아래에 Aftersell Upsell Widget 앱 블록이 표시된 Shopify Checkout Editor 사이드바" width="1416" height="1080" data-path="images/aftersell/checkout-widget-config-editor-sidebar-app-block.gif" />

[Shop Pay 위젯에 대해 더 알아보기](/ko/aftersell/show_checkout_widgets_in_shop_pay)

***

<div id="next-steps">
  ## 다음 단계
</div>

* 위젯을 조건부로 표시하려면 [체크아웃 트리거에 대해 알아보세요](/ko/aftersell/checkout_triggers)
* 배치를 최적화하려면 [체크아웃 A/B 테스트를 설정하세요](/ko/aftersell/checkout_a_b_testing)
* 스토어 디자인에 맞추려면 [체크아웃 브랜딩을 구성하세요](/ko/aftersell/checkout_branding_settings)
* AOV를 극대화하려면 [고급 업셀 전략을 살펴보세요](/ko/aftersell/best_practices)