> ## 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에서 사용할 수 있는 구매 후 위젯과 이를 활용해 구매 후 업셀 경험을 구성하는 방법을 안내해요. 위젯은 범위와 기능에 따라 그룹화되며, 중복을 피하기 위해 각 위젯은 한 번만 설명해요.

***

<div id="funnel-wide-widgets">
  # 퍼널 전체 위젯
</div>

<div id="progress-bar">
  ## Progress Bar(진행 표시줄)
</div>

**Progress Bar**는 고객이 구매 후 흐름에서 어느 단계에 있는지 보여줘요.

활성화하면 진행 표시줄이 퍼널 내 모든 업셀 오퍼에 표시돼요. 진행 표시줄에 대한 변경 사항은 퍼널 전체에 적용돼요.

<img src="https://mintcdn.com/aftersell/SnVX3h-PpMMxQMDU/images/aftersell/ppu-widgets-post-purchase-progress-bar.gif?s=f9ee14053add6280b48524aca197a791" alt="Cart, Order placed, Special offer, Done 단계가 표시된 구매 후 진행 표시줄" width="2936" height="480" data-path="images/aftersell/ppu-widgets-post-purchase-progress-bar.gif" />

**구성 옵션**

* 퍼널의 진행 표시줄을 켜거나 끄기
* 표시 스타일 선택:
  * **Minimal**
  * **Minimal with labels**
  * **Maximal**
* **Black** 또는 **White** 스타일 선택
* 상단·하단 패딩을 조정해 간격 제어

***

<div id="offer-level-widgets">
  # 오퍼 단위 위젯
</div>

오퍼 단위 위젯은 개별 업셀 오퍼의 콘텐츠와 동작을 제어해요.

이 위젯들은 메시지, 긴박감 요소, 상품 정보, 가격 세부 정보, 액션 등 특정 업셀 단계에서 고객이 보게 되는 내용을 정의해요.

퍼널 내 각 오퍼는 오퍼 단위 위젯을 사용해 독립적으로 커스터마이징할 수 있으므로, 모든 단계의 경험을 원하는 대로 조정할 수 있어요.

이 위젯에는 다음이 포함돼요:\
[Text](#text)\
[Timer](#timer)\
[Upsell Product](#upsell-product)\
[Product Selection](#product-selection)\
[Discount](#discount)\
[Badge](#badge)\
[Shipping](#shipping)\
[Image](#image)\
[Buttons](#buttons)\
[Price Breakdown](#price-breakdown)\
[Product Details](#product-details)\
[Variant & plan options](#variant--plan-options)\
[Layout](#layout)\
[Video](#video)\
[Testimonials](#testimonials)

***

<div id="text">
  ## Text(텍스트)
</div>

**Text** 위젯은 오퍼 전반의 제목과 보조 문구에 사용돼요.

제목과 선택적 본문 텍스트를 지원하며, 글꼴 크기, 색상, 굵기, 정렬, 취소선, 간격을 제어할 수 있어요.

동적 변수 `{first-name}`을 사용해 고객별로 메시지를 개인화하세요.

***

<div id="timer">
  ## Timer(타이머)
</div>

**Timer** 위젯은 실시간 카운트다운을 표시해 긴박감을 더해줘요.

타이머가 작동하는 동안 오퍼는 계속 표시돼요. 타이머가 0에 도달하면 업셀 오퍼가 자동으로 사라지고 고객은 퍼널의 다음 단계로 이동해요.

***

<div id="upsell-product">
  ## Upsell Product(업셀 상품)
</div>

**Upsell Product** 위젯은 오퍼의 핵심이에요. 어떤 상품을 보여줄지 정의하며, 아래의 모든 상품 관련 위젯을 담는 컨테이너 역할을 해요.

이후에 나오는 모든 항목은 이 위젯 안에서 구성돼요.

***

<div id="product-selection">
  ## Product Selection(상품 선택)
</div>

Product Selection 위젯은 업셀 오퍼에 표시되는 상품을 제어해요.

고정된 상품을 선택하거나 고객의 원래 주문을 기반으로 업셀 상품을 동적으로 결정할 수 있어, 정적인 업셀 경험과 적응형 업셀 경험을 모두 구현할 수 있어요.

<div id="product-type-options">
  #### 상품 유형 옵션
</div>

* **Specific product**\
  항상 동일한 상품을 업셀에 표시해요.
* **Automatic upsell**\
  사전 정의된 업셀 로직을 사용해 상품을 동적으로 선택해요.
* **Most expensive in cart**\
  고객의 원래 주문에서 가격이 가장 높은 상품을 사용해요.
* **Least expensive in cart**\
  고객의 원래 주문에서 가격이 가장 낮은 상품을 사용해요.

<div id="changing-the-product">
  #### 상품 변경하기
</div>

선택된 상품은 위젯 상단에 표시돼요. 변경하려면:

1. **Change product**를 클릭하세요
2. 상품 유형을 선택하세요
3. 상품을 선택하거나 확인하세요

선택기에서 **Products** 탭을 탐색할 때 **Active products only**를 체크하면 목록에서 Draft 및 Archived 상품을 숨길 수 있어요. 이 필터는 기본적으로 꺼져 있으며 Products 탭에만 적용돼요 — Collections에는 영향을 주지 않아요.

<img src="https://mintcdn.com/aftersell/SnVX3h-PpMMxQMDU/images/aftersell/ppu-widgets-offer-editor-edit-product.gif?s=a281ef6837574437297ca063e861d119" alt="실시간 오퍼 미리보기 옆에 Edit upsell product 패널이 표시된 Aftersell 오퍼 편집기" width="948" height="480" data-path="images/aftersell/ppu-widgets-offer-editor-edit-product.gif" />

<div id="identifying-products-with-identical-names">
  #### 이름이 동일한 상품 구분하기
</div>

스토어에 제목이 같은 상품이나 옵션(variant)이 여러 개 있는 경우, 상품 선택기에서 **Show IDs** 토글을 활성화하면 각 이름 아래에 숫자로 된 Shopify 상품 ID와 옵션 ID가 표시돼요. 이를 통해 올바른 상품을 선택하고 있는지 쉽게 확인할 수 있어요.

**Show IDs** 토글은 선택기의 **Product** 탭에서 사용할 수 있으며 기본적으로 꺼져 있어요. Collection 탭에서는 사용할 수 없어요.

***

<div id="discount">
  ## Discount(할인)
</div>

**Discount** 위젯은 프로모션 가격을 적용하고 표시해요.

퍼센트(%) 할인 또는 고정 금액(\$) 할인 중에서 선택할 수 있어요. 원하는 경우 사용자 지정 할인 텍스트를 추가할 수 있고, 할인은 상품의 정가(compare-at price)를 기준으로 하거나 무시하도록 설정할 수 있어요.

<div id="bulk-discount-shortcut-for-multi-product-offers">
  ### 다중 상품 오퍼를 위한 일괄 할인 바로가기
</div>

다중 상품 및 컬렉션 오퍼의 경우, Upsell Products 위젯 설정의 상품 선택 영역 아래에 **Discount** 섹션이 바로 표시돼요. 이를 통해 각 상품의 개별 설정을 열지 않고도 여러 상품의 할인을 더 빠르게 설정하거나 업데이트할 수 있어요.

이 섹션은 기본적으로 접혀 있어요. 펼치면:

* 오퍼에 포함된 모든 상품의 목록이 표시되며, 각 상품에는 체크박스와 현재 할인을 표시하는 배지(예: `17% off` 또는 `$18.00 off`)가 있어요.
* 체크박스를 사용해 업데이트할 상품을 선택하세요. 기본적으로 모든 상품이 선택돼 있어요.
* 목록 아래의 표시(pill)는 변경 사항이 적용될 상품 수를 보여줘요.
* 할인 유형과 값 필드를 사용해 할인을 설정하세요. 변경 사항은 선택된 상품에만 적용돼요 — 선택되지 않은 상품은 기존 할인을 유지해요.

<div id="mixed-discounts-across-products">
  #### 상품 간 할인 설정이 서로 다른 경우
</div>

선택된 상품들의 할인 설정이 서로 다르면, 필드에 이를 나타내는 자리 표시자 텍스트가 표시돼요:

* 상품마다 **할인 유형**이 다른 경우(예: 일부는 % 할인이고 일부는 \$ 할인), 유형 선택기에 **Mixed**가 표시돼요.
* 상품마다 **할인 값** 또는 유형이 다른 경우, 값 필드에 **Multiple values**가 표시되며 새 값을 입력하면 선택된 각 상품의 현재 할인이 덮어쓰여진다는 안내가 함께 표시돼요.

<div id="info-icon-on-product-rows">
  #### 상품 행의 정보 아이콘
</div>

상품에 사용자 지정 할인 제목, 정가(compare-at price), 구독 할인 등 추가 할인 설정이 구성돼 있으면 해당 상품의 할인 배지 옆에 정보 아이콘(i)이 표시돼요. 아이콘에 마우스를 올리면 해당 추가 설정의 요약이 표시돼요.

***

<div id="badge">
  ## Badge(배지)
</div>

**Badge** 위젯은 인기도나 긴박감 같은 핵심 상품 특성을 강조해요.

사전 정의된 배지 라벨을 선택하고, 여러 시각적 스타일 중에서 고르고, 아이콘을 포함하고, 배지가 오퍼 내 어디에 표시될지 또는 상품 이미지 위에 바로 표시될지를 제어할 수 있어요.

<img src="https://mintcdn.com/aftersell/SnVX3h-PpMMxQMDU/images/aftersell/ppu-widgets-post-purchase-offer-trending.png?fit=max&auto=format&n=SnVX3h-PpMMxQMDU&q=85&s=c7c4cf7649723721d24bffff865b6f2b" alt="상품 제목 위에 Trending 배지가 표시된 구매 후 오퍼" width="1920" height="898" data-path="images/aftersell/ppu-widgets-post-purchase-offer-trending.png" />

사용자 지정 배지 이미지는 **Advanced badge settings**에서 업로드할 수 있어요(SVG 또는 PNG, 최대 10MB).

<Note>
  배지 편집은 V2 오퍼에서만 가능해요. V1 오퍼는 이전에 구성된 배지를 그대로 유지하지만, V1 오퍼에서는 배지 설정을 편집할 수 없어요.
</Note>

***

<div id="shipping">
  ## Shipping(배송)
</div>

**Shipping** 위젯은 배송비를 어떻게 안내할지 제어해요.

무료 배송을 제공하거나, 특정 배송비를 설정해 배송비를 청구할 수 있어요.

***

<div id="image">
  ## Image(이미지)
</div>

**Image** 위젯은 상품 이미지가 표시되는 방식을 제어해요.

메인 이미지 크기 조정, 테두리 추가, 이미지 캐러셀 활성화, **Advanced image settings**에서 사용자 지정 상품 이미지 업로드 옵션이 포함돼 있어요.

***

<div id="language">
  ## Language(언어)
</div>

**Language** 섹션은 버튼 텍스트, 구독 라벨, 가격 라벨, 기타 편집할 수 없는 문자열을 포함해 오퍼의 모든 시스템 텍스트에 사용되는 언어를 제어해요.

**Language** 드롭다운에서 언어를 선택하면 해당 오퍼의 시스템 텍스트가 자동으로 번역돼요. Aftersell은 32개 언어를 지원해요.

이 설정은 배지나 사용자 지정 텍스트 필드에는 영향을 주지 않아요 — 시스템에서 생성된 텍스트만 번역돼요.

***

<div id="buttons">
  ## Buttons(버튼)
</div>

**Buttons 위젯**은 고객이 체크아웃 과정에서 업셀을 수락하거나 거절하는 방식을 제어해요.

버튼의 동작과 모양을 다음과 같이 커스터마이징할 수 있어요:

* **기본 수락 버튼 텍스트** 선택
* 업셀 수락 전 **확인 클릭** 요구
* **거절 버튼 스타일** 변경(예: 버튼 또는 링크)
* **버튼 정렬** 및 너비 조정
* 버튼 위 또는 아래에 선택적 **보조 텍스트** 추가(스타일 제어 및 동적 변수 지원)

<div id="button-text">
  ### 버튼 텍스트
</div>

**Default accept button text** 드롭다운을 사용해 구매 후 오퍼의 수락 버튼 텍스트를 구성할 수 있어요. 사용 가능한 옵션은 오퍼 유형에 따라 달라져요:

**표준 오퍼:**

* **Pay Now** - "Pay Now • \[상품 총 가격]"을 표시해요(무료 상품의 경우 "Add Now • Free")
* **Accept Offer** - 가격에 관계없이 "Accept Offer"를 표시해요

**구독 업그레이드 오퍼:**

* **Upgrade Subscription** - "Upgrade Subscription"을 표시해요(새 구독 업그레이드 오퍼의 기본값)
* **Accept Offer** - 가격에 관계없이 "Accept Offer"를 표시해요
* **Pay Now** - "Pay Now • \[상품 총 가격]"을 표시해요(무료 상품의 경우 "Add Now • Free")

버튼 텍스트를 번역하려면 Buttons 섹션 위의 **Language** 섹션을 사용하세요.

<div id="button-layout-options">
  ### 버튼 레이아웃 옵션
</div>

수락 버튼과 거절 버튼의 **상대적 위치**도 제어할 수 있어요. 다음 레이아웃이 지원돼요:

* **Accept above decline** - 수락 버튼을 거절 옵션 위에 표시해요
* **Decline above accept** - 거절 옵션을 수락 버튼 위에 표시해요
* **Accept beside decline** - 수락 버튼과 거절 버튼을 나란히 표시해요

이러한 레이아웃 옵션을 통해 원하는 체크아웃 경험과 메시지 위계에 맞춰 더 유연하게 구성할 수 있어요.

***

<div id="price-breakdown">
  ## Price Breakdown(가격 내역)
</div>

**Price Breakdown** 위젯은 가격을 더 명확하게 보여줘요.

배송비와 세금을 표시하고, 소계와 할인 같은 추가 세부 정보를 포함할 수 있으며, 명확성을 극대화하기 위해 결제 버튼 근처에 정렬하거나 배치할 수 있어요.

<div id="hide-shipping-adjustment-line">
  ### 배송비 조정 항목 숨기기
</div>

오퍼가 교체 업셀("Replace item in original order with upsell" 설정 사용)로 구성된 경우, 가격 내역에 원래 상품과 교체 상품 간의 배송비 차이를 반영하는 **Shipping adjustment** 항목이 포함돼요.

이 항목은 **Hide shipping adjustment line** 체크박스로 숨길 수 있으며, 이 체크박스는 교체 업셀이 구성된 경우에만 Price Breakdown 섹션에 표시돼요. 이 설정은 기본적으로 꺼져 있으므로 기존 오퍼에는 영향이 없어요.

* 체크하면 배송비 조정 항목이 고객의 가격 내역에서 숨겨져요.
* 체크를 해제하면 배송비 조정 항목이 정상적으로 표시돼요.

이 설정은 교체 업셀 오퍼의 배송비 조정 항목에만 영향을 줘요. 교체 업셀이 아닌 오퍼의 표준 배송 항목에는 영향이 없어요.

***

<div id="product-details">
  ## Product Details(상품 상세 정보)
</div>

**Product Details** 위젯은 핵심 상품 정보가 표시되는 방식을 제어해요.

상품 리뷰 평점(리뷰가 없으면 자동으로 숨겨짐), 선택적 수량 선택기, 그리고 상품이 이미 원래 주문에 포함된 경우 오퍼를 건너뛰는 기능을 지원해요.

상품 제목과 가격은 완전히 스타일링할 수 있으며 `{product}`, `{original-price}`, `{current-price}`, `{savings}`, `{savings-line}` 등 일부 동적 변수를 지원해요.

가치나 긴박감을 강조하기 위해 선택적으로 오퍼 설명을 추가할 수 있어요.

<div id="product-review-star-colors">
  ### 상품 리뷰 별 색상
</div>

**Show product reviews rating**이 활성화된 경우, 별점 표시의 색상을 커스터마이징할 수 있어요:

* **Star color** — 채워진(활성) 별의 색상이에요. 기본값은 `#fdcc0d`(노란색)이에요.
* **Empty star color** — 채워지지 않은(비활성) 별의 색상이에요. 기본값은 `#d1d5db`(연한 회색)이에요.

색상을 변경하려면 **Product Details** 위젯 설정을 열고 **Show product reviews rating**을 활성화한 다음, 색상 입력란에서 원하는 16진수(hex) 값을 설정하세요.

<div id="quantity-selector-presets">
  ### 수량 선택기 프리셋
</div>

수량 선택기가 활성화된 경우, **프리셋 수량**을 구성해 오퍼가 표시될 때 몇 개의 수량이 표시되거나 허용될지 제어할 수 있어요. 다음 프리셋 옵션을 사용할 수 있어요:

* **Fixed** — 고객이 시작하는 특정 수량을 설정해요. 수량 선택기가 숨겨지며 고객은 수량을 변경할 수 없어요.
* **Percentage of purchased quantity** — 고객이 원래 구매한 수량의 백분율로 수량을 설정해요.
* **Minimum quantity** — 수량의 최솟값을 설정해요. 고객은 이 값에서 시작해 수량을 늘릴 수 있어요.
* **Maximum quantity** — 수량의 상한을 설정해요. 고객은 1에서 시작하며 구성된 최대치(최대 20)를 초과할 수 없어요. 고객에게 해당 상품의 최대 수량을 알리는 메시지가 표시돼요.

<div id="description-position">
  ### 설명 위치
</div>

단일 상품 오퍼의 경우, CTA 버튼을 기준으로 상품 설명이 표시되는 위치를 제어할 수 있어요:

* **Default (above buttons)** - 설명이 수락 및 거절 버튼 위에 표시돼요
* **Below buttons** - 설명이 수락 및 거절 버튼 아래에 표시돼요

이 설정을 사용하면 메시지 위계와 디자인 선호도에 더 잘 맞도록 레이아웃을 조정할 수 있어요.

***

<div id="variant--plan-options">
  ## Variant & plan options(옵션 및 플랜 설정)
</div>

**Variant & Plan Options** 위젯은 옵션(variant)의 표시 여부, 선택 방식, 구독 플랜 잠금을 제어해요.

품절된 옵션을 표시하거나 숨기고, 모든 옵션이 구매 불가한 경우 상품 전체를 숨기고, 선택지가 하나뿐인 옵션의 표시 여부를 제어할 수 있어요. **고급 설정에서는 옵션 선택기를 완전히 숨길 수도 있어요**.

옵션 사전 선택에는 최초 구매에 맞추는 Smart matching, 사용자의 선택을 요구하는 Unselected, First available variant가 있어요.

여러 옵션 항목이 있는 상품의 경우 모든 옵션이 표시되며 가능한 경우 재고가 있는 옵션이 사전 선택돼요. 품절된 옵션은 구매 불가로 표시돼요. 옵션 항목이 하나뿐인 상품의 경우 품절된 옵션은 숨겨져요.

<div id="subscription-plan-locking">
  ### 구독 플랜 잠금
</div>

여러 구독 플랜이 있는 구독 상품을 제안할 때, 오퍼를 특정 플랜에 고정할 수 있어요. 이렇게 하면 고객이 구매 후 경험 중에 구독 플랜을 변경할 수 없으므로, 구성한 구독 옵션을 정확히 받게 돼요.

**구독 플랜을 잠그려면:**

1. **Variant & Plan Options** 섹션에서 **Lock subscription plan** 드롭다운을 찾으세요
2. 드롭다운에서 특정 플랜을 선택하세요
3. 이제 플랜이 잠겨요 — 고객에게는 변경 가능한 드롭다운 대신 플랜 이름이 고정 텍스트로 표시돼요

<Frame>
  <img src="https://mintcdn.com/aftersell/SnVX3h-PpMMxQMDU/images/aftersell/ppu-widgets-variant-plan-options.gif?s=8851a3d937b3f732660588f555e8743b" alt="Lock subscription plan 드롭다운이 있는 Variant and Plan Options 패널" width="848" height="1080" data-path="images/aftersell/ppu-widgets-variant-plan-options.gif" />
</Frame>

**플랜이 잠기면:**

* 고객에게 플랜 이름이 텍스트로 표시돼요
* 플랜 선택 드롭다운이 숨겨져요
* 고객이 구독 플랜을 변경할 수 없어요
* 잠긴 플랜이 Shopify에서 더 이상 사용할 수 없게 되면, 오퍼는 사용 가능한 모든 플랜을 표시하는 방식으로 자연스럽게 대체돼요

**자동 재설정:**

상품의 구매 옵션을 일회성 구매 전용으로 변경(구독 옵션 제거)하면 잠긴 플랜 설정이 자동으로 재설정돼요.

<div id="variant-selector-position">
  ### 옵션 선택기 위치
</div>

CTA 버튼을 기준으로 옵션 선택기가 표시되는 위치를 제어할 수 있어요:

* **Above CTA buttons (default)** - 옵션 선택기가 수락 및 거절 버튼 위에 표시돼요
* **Below CTA buttons** - 옵션 선택기가 수락 및 거절 버튼 아래에 표시돼요

옵션 선택기와 상품 설명이 모두 CTA 버튼 아래에 배치된 경우, 그 순서를 제어할 수 있어요:

* **Variant selector first** - 옵션 선택기가 상품 설명 앞에 표시돼요
* **Description first** - 상품 설명이 옵션 선택기 앞에 표시돼요

또한 옵션 선택기의 상단·하단 패딩을 조정해 간격을 미세 조정하고 원하는 시각적 레이아웃을 만들 수 있어요.

***

<div id="layout">
  ## Layout(레이아웃)
</div>

**Layout** 위젯은 업셀의 전체적인 구조와 간격을 제어해요.

1열 또는 2열 레이아웃 중에서 선택하고, 최대 레이아웃 너비를 조정하고, 상단·하단 패딩을 미세 조정해 깔끔하고 읽기 좋은 경험을 만들 수 있어요.

***

<div id="video">
  ## Video(동영상)
</div>

**Video** 위젯은 오퍼에 클릭 가능한 썸네일을 추가해요. 썸네일을 클릭하면 스타일이 적용된 배경과 업셀로 돌아가는 버튼이 있는 호스팅 동영상 플레이어가 새 탭에서 열려요. 동영상이 인라인이 아닌 새 탭에서 재생되므로 업셀 오퍼는 원래 탭에서 계속 열려 있어요.

이 위젯은 브랜드에 맞추거나 플레이어에 시선을 집중시키기 위한 **배경 색상**과, 정렬(왼쪽, 가운데, 오른쪽) 및 상단·하단 패딩을 위한 **레이아웃 설정**도 지원해요.

고객 경험을 미리 보려면 편집기의 **오퍼 미리보기**에서 썸네일을 클릭하세요. 호스팅 동영상 플레이어가 스토어프론트에서와 정확히 동일하게 새 탭에서 열리므로, 게시하기 전에 썸네일, CTA, 닫기 동작을 확인할 수 있어요.

<div id="browser-compatibility">
  ### 브라우저 호환성
</div>

동영상 위젯은 플레이어를 새 탭에서 열어요. 데스크톱에서는 항상 작동하므로 위젯이 항상 표시돼요.

모바일에서는 반대로 작동해요: Aftersell은 고객을 체크아웃에서 이탈시키지 않고 새 탭을 열 수 있다고 인식되는 브라우저에서만 위젯을 표시해요. 여기에는 Safari, Chrome, Firefox 및 기타 잘 알려진 네이티브 모바일 브라우저와 Facebook 및 Instagram 인앱 브라우저가 포함돼요.

**그 외 모든 모바일 브라우저에서는 위젯이 숨겨져요.** 여기에는 Google 앱, TikTok, Pinterest 같은 인앱 브라우저, 일반 웹뷰, 그리고 Aftersell이 인식하지 못하는 모든 브라우저가 포함돼요. 인식되지 않는 브라우저는 표시가 아닌 숨김 처리되므로, 위젯이 표시되지 않는 환경의 목록은 고정돼 있지 않아요 — Aftersell이 처음 접하는 브라우저에서도 위젯이 숨겨져요.

위젯이 숨겨지는 환경에서는 대신 표시할 \*\*대체 이미지(Fallback image)\*\*를 업로드할 수 있어요 — 예를 들어 정적 프로모션 이미지나 브랜드 그래픽이요. 이 이미지는 링크나 재생 버튼 없이 표시돼요. 대체 이미지가 설정되지 않은 경우 위젯 자리에 아무것도 렌더링되지 않아요.

<Tip>
  게시하는 모든 동영상 위젯에 **대체 이미지**를 설정하세요. 인식되지 않는 환경은 모두 숨김 처리되므로, 트래픽 소스만으로는 일부 고객이 위젯을 보지 못하는지 알 수 없어요 — 대체 이미지가 없으면 해당 고객에게는 아무것도 표시되지 않아요.
</Tip>

<div id="video-source">
  ### 동영상 소스
</div>

이 위젯은 두 가지 소스 중 하나에서 단일 동영상을 재생해요. 위젯 설정의 **Upload** / **Link** 토글을 사용해 플레이어가 사용할 소스를 선택하세요:

* **Upload** — MP4, WebM 또는 MOV 파일(최대 50MB)을 끌어다 놓거나 선택해 Shopify Files에 직접 호스팅하세요. 업로드 후 Shopify가 파일을 처리하면 편집기에 미리보기가 표시돼요.
* **Link** — YouTube URL, Vimeo URL, 또는 호스팅된 동영상 파일에 대한 직접 링크(예: 자체 CDN의 MP4)를 붙여넣으세요.

둘 다 입력할 수 있지만 토글에서 선택된 소스만 재생돼요 — 다른 소스는 해당 탭 뒤에 보관되며 자동 대체 수단으로 사용되지 **않아요**. 소스가 하나만 설정된 경우, 토글과 관계없이 해당 소스가 재생돼요.

위젯을 저장하려면 업로드된 동영상 또는 동영상 링크 중 최소 하나의 소스를 설정해야 해요.

<div id="supported-link-formats">
  #### 지원되는 링크 형식
</div>

링크 필드는 다음을 허용해요:

* **YouTube** — 표준 동영상 URL을 사용하세요(예: `https://youtu.be/VIDEO_ID` 또는 `https://www.youtube.com/watch?v=VIDEO_ID`). YouTube Shorts URL(`youtube.com/shorts/...`)은 지원되지 않아요 — YouTube에서 동영상을 열고 공유 링크를 대신 사용하세요.
* **Vimeo** — 표준 동영상 URL을 사용하세요(예: `https://vimeo.com/VIDEO_ID`). 특정 동영상을 가리키지 않는 쇼케이스 URL, 채널 또는 프로필 페이지는 지원되지 않아요 — 주소 표시줄에 있는 개별 동영상의 URL을 사용하세요. 숫자 동영상 ID가 포함된 채널 또는 그룹 URL은 작동해요.
* **직접 파일** — 동영상 파일을 가리키는 공개적으로 접근 가능한 HTTPS URL(예: CDN의 MP4)이에요.

<div id="link-validation">
  #### 링크 유효성 검사
</div>

편집기는 두 시점에 링크를 검사해요:

* **필드에서 벗어날 때** — URL 형태가 명백히 잘못된 경우(예: YouTube Shorts 링크 또는 Vimeo 쇼케이스 URL), 대신 무엇을 사용해야 하는지 인라인 오류로 안내해요.
* **저장할 때** — 편집기가 동영상 제공업체에 확인해 동영상이 임베드 가능한지 검증해요. 동영상이 비공개이거나 삭제되었거나 임베드가 꺼져 있으면 저장이 차단되고 그 이유가 링크 필드에 표시돼요. 링크를 수정한 뒤 다시 저장하면 계속 진행할 수 있어요.

제공업체 확인을 사용할 수 없는 경우(예: 네트워크 문제), 저장은 차단 없이 진행돼요.

<div id="shopify-files-permission">
  #### Shopify Files 권한
</div>

동영상을 업로드하려면 `write_files` 권한이 필요해요. 이 권한이 부여되지 않은 경우, 업로드 영역에 **Update** 버튼이 있는 배너가 표시돼요. 클릭해서 권한을 부여하면 업로드가 가능해져요.

<div id="upload-processing">
  #### 업로드 처리
</div>

파일을 끌어다 놓거나 선택하면 파일이 전송되는 동안 업로더에 \*\*Uploading…\*\*이 표시되고, 그다음 Shopify가 트랜스코딩하는 동안 \*\*Processing…\*\*이 표시돼요. 처리가 완료되면 미리보기가 표시돼요. 동영상이 처리되는 동안 다른 위젯 설정을 계속 편집할 수 있어요.

유일한 소스가 아직 처리 중인 동영상인 위젯은 저장할 수 없어요 — 트랜스코딩이 끝나거나, 그동안 소스로 사용할 동영상 링크를 추가할 때까지 저장이 차단돼요. 저장하기 전에 변경 사항을 취소하거나 편집기를 닫으면, 진행 중이던 업로드는 Shopify Files에서 삭제돼요.

동영상 링크는 위젯을 저장할 때 검증돼요.

<div id="thumbnail-and-watch-video-cta">
  ### 썸네일 및 동영상 시청 CTA
</div>

고객이 동영상을 열기 전에 오퍼에서 보게 될 이미지를 업로드하세요. 재생 동작에 시선을 끌기 위해 동영상 시청 CTA가 썸네일 위에 자동으로 배치돼요. CTA 라벨 텍스트는 브랜드에 맞게 스타일링할 수 있어요. 썸네일은 동영상에서 자동 생성되지 않으므로 반드시 업로드해야 해요.

별도의 **모바일 전용 썸네일**도 업로드할 수 있어요. 설정하면 모바일 기기에서는 모바일 썸네일이 표시되고 데스크톱에서는 기본 썸네일이 사용되므로, 화면 크기별로 이미지를 맞춤 설정할 수 있어요.

<div id="fallback-image">
  ### 대체 이미지
</div>

**Fallback image** 설정을 사용하면 고객의 브라우저가 플레이어를 열 수 없어 동영상 위젯이 숨겨질 때 표시할 이미지를 업로드할 수 있어요 — [브라우저 호환성](#browser-compatibility)을 참고하세요. 대체 이미지는 링크나 재생 오버레이 없이 표시되는 정적 이미지예요.

대체 이미지가 업로드되지 않은 경우 위젯 자리에 아무것도 렌더링되지 않아요.

<div id="autoplay">
  ### 자동 재생
</div>

**Autoplay** 토글은 호스팅 플레이어가 열릴 때 동영상이 자동으로 재생을 시작할지 여부를 제어해요.

자동 재생이 활성화되면 동영상은 **음소거** 상태로 시작돼요. 대부분의 최신 브라우저는 고객이 페이지와 상호작용하기 전까지 소리가 있는 동영상의 자동 재생을 차단하므로, 자동 재생이 안정적으로 작동하려면 음소거 재생이 필요해요. 재생이 시작된 후 고객은 플레이어 컨트롤로 음소거를 해제할 수 있어요.

첫 프레임부터 오디오가 재생되기를 원한다면, 자동 재생을 끄고 고객이 직접 동영상의 재생 버튼을 클릭하도록 하세요.

<div id="closing-the-video">
  ### 동영상 닫기
</div>

고객이 호스팅 플레이어를 닫고 업셀 오퍼로 돌아가는 방법은 세 가지예요:

* **오퍼로 돌아가기 버튼** — 플레이어 아래의 버튼으로, 탭을 닫고 업셀로 돌아가요.
* **아무 곳이나 더블 클릭** — 배경의 아무 곳이나 더블 클릭하면 플레이어가 닫혀요.
* **종료 시 자동 닫기** — 동영상 재생이 끝나면 플레이어가 자동으로 닫혀요.

동영상이 새 탭에서 열리기 때문에 플레이어를 닫으면 해당 탭이 닫혀요 — 업셀은 원래 탭에 그대로 남아 있어요.

<div id="language-and-translations">
  ### 언어 및 번역
</div>

동영상 플레이어 페이지의 문구 — 오퍼로 돌아가기 버튼 라벨, 데스크톱·모바일 힌트, 동영상을 사용할 수 없을 때 표시되는 제목과 메시지 — 는 오퍼의 **Language** 설정을 따르며 **Settings > Translations**에서 커스터마이징할 수 있어요.

***

<div id="testimonials">
  ## Testimonials(고객 후기)
</div>

**Testimonials** 위젯은 구매 후 오퍼에 실제 상품 리뷰를 표시해 신뢰를 쌓고 업셀 수락에 대한 고객의 결정을 뒷받침해줘요.

리뷰는 연결된 리뷰 앱에서 가져와요. 이 위젯은 오퍼 편집기 선택기에서 별 아이콘과 함께 \*\*"Testimonials"\*\*로 표시돼요.

이 위젯을 사용하려면 **Settings > Product Reviews**에서 리뷰 앱이 연결돼 있어야 해요. 지원되는 앱에는 Judge.me, Klaviyo, Okendo, Yotpo가 있어요. 설정 방법은 [리뷰 앱 연동](/ko/aftersell/checkout_widget_types#review-app-integrations)을 참고하세요.

<div id="selection-modes">
  ### 선택 모드
</div>

Testimonials 위젯은 두 가지 모드를 지원해요:

* **Manual** — 표시할 리뷰 풀을 직접 선별해요. 리뷰는 저장한 순서대로 표시돼요.
* **Dynamic** — 업셀 오퍼의 상품을 기반으로 리뷰 앱의 동기화된 캐시에서 리뷰를 자동으로 가져와요. 리뷰는 고객의 원래 주문이 아닌 오퍼의 상품을 기준으로 매칭돼요.

<div id="configuration-options">
  ### 구성 옵션
</div>

* **Review app** — 리뷰를 가져올 연결된 리뷰 앱을 선택해요.
* **Mode** — Manual 또는 Dynamic을 선택해요.
* **Minimum rating** — 표시할 리뷰의 최소 별점을 설정해요(예: 별 4개 이상).
* **Display toggles** — 개별 리뷰 요소를 표시하거나 숨겨요:
  * 별점
  * 리뷰 제목
  * 리뷰어 이름
  * 리뷰 날짜
  * 구매 인증(Verified buyer) 배지
* **Truncate review text** — 리뷰 텍스트의 최대 글자 수를 설정해요. 이 제한을 초과하는 리뷰는 말줄임표로 잘려요.
* **Max reviews to show** — 표시할 리뷰 수를 1\~3개로 설정해요.
* **Layout** — 리뷰를 **Horizontal**(나란히) 또는 **Vertical**(세로로 쌓기)로 배치해요.
* **Padding** — 위젯 주변 간격을 조정해요.

<div id="dynamic-mode-and-review-syncing">
  ### 다이내믹 모드 및 리뷰 동기화
</div>

다이내믹 모드에서는 Aftersell이 리뷰 앱에서 리뷰를 가져와 저장하고 오퍼에 표시할 수 있게 해요. 첫 번째 가져오기는 리뷰 앱을 연결한 후 24시간 이내에 자동으로 실행되며, 이후에는 매주 한 번 실행돼요.

리뷰를 즉시 가져오려면 **Settings > Product Reviews**로 이동해 리뷰 앱의 **Sync now**를 클릭하세요.

<div id="verified-buyer-badge">
  ### 구매 인증 배지
</div>

구매 인증 배지가 활성화되면 조건에 맞는 리뷰에 **"Verified buyer"** 라벨이 표시돼요. 이 라벨은 오퍼에 설정된 언어로 자동 번역되며 32개 언어를 지원해요.

***

<div id="adding-additional-widgets">
  ## 추가 위젯 추가하기
</div>

위젯은 **Upsell Product 위젯의 위 또는 아래**에 추가할 수 있어, 상품 앞뒤로 정보의 흐름을 제어할 수 있어요.

추가할 수 있는 위젯은 다음과 같아요:

* **Image** - 오퍼를 시각적으로 강조하는 보조 이미지를 표시해요.
* **Text** - 핵심 메시지를 전달하는 보조 텍스트를 추가해요.
* **Text & Image** - 텍스트와 시각 자료를 결합해 가치를 강조하거나 오퍼를 설명해요.
* **Extra Buy Button** - 오퍼 수락을 유도하는 추가 CTA를 배치해요. 두 개 이상의 상품을 표시하는 오퍼에서는 사용할 수 없어요.
* **Trust Badge** - 보증, 보안, 신뢰도 지표 같은 신뢰 신호를 표시해요.
* **FAQs** - 자주 묻는 질문에 답변해 마찰을 줄이고 신뢰를 높여요.
* **Video** - 상품을 시연하거나 브랜드 스토리를 전달하는 동영상을 삽입해요. [Video](#video)를 참고하세요.
* **Testimonials** - 연결된 리뷰 앱의 실제 상품 리뷰를 표시해요. V2 오퍼에서 사용할 수 있어요. [Testimonials](#testimonials)를 참고하세요.

위젯을 추가하려면:

1. 위젯을 Upsell Product 위젯의 **위 또는 아래** 중 어디에 표시할지 선택하세요
2. 선택한 섹션에서 **Add widget**을 클릭하세요
3. 포함할 위젯을 선택하고 구성하세요

***

구매 후 오퍼가 무엇인지, 어떻게 작동하는지, Aftersell로 어떻게 시작하는지 자세히 알아보려면 [이 문서를 참고하세요](/ko/aftersell/post_purchase_overview).

***

위젯의 동작과 모양은 편집기에서 제공되는 구성 옵션으로 제한돼요.\
Shopify의 제약으로 인해 그 이상의 커스터마이징은 지원되지 않아요.

***

<div id="need-help">
  ## 도움이 필요하신가요?
</div>

구매 후 오퍼 설정에 대해 질문이 있거나 도움이 필요하시면, 저희 지원팀이 도와드릴게요. 언제든지 인앱 채팅이나 이메일로 문의해 주세요.
