> ## 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 Cart를 미리보기하세요 — 에디터 캔버스와 라이브 스토어프런트 테마에서 확인할 수 있어요.

장바구니는 두 가지 방법으로 미리볼 수 있어요: 구축하면서 에디터에서 실시간으로, 그리고 공개하기 전에 스토어프런트 테마에서요.

<div id="the-editor-canvas">
  ## 에디터 캔버스
</div>

장바구니 에디터의 중앙은 실제 장바구니를 렌더링하는 라이브 미리보기예요. **두 장바구니 상태를 나란히** 보여줘요 — **Filled cart** 카드와 **Empty cart** 카드 — 그래서 작업하면서 두 상태를 모두 볼 수 있어요.

* 사이드바의 **Filled / Empty** 토글이나 카드 **위의 제목**을 클릭해서 **편집할 상태를 선택**하세요. 카드 *안쪽*을 클릭하면 상태가 전환되지 않고 커서 아래의 블록이 선택돼요. 활성 카드에는 외곽선이 표시되고, 편집 중인 블록에는 자체 하이라이트가 표시돼요.
* 캔버스 자체의 줌 컨트롤로 **확대/축소**하세요(25%–200%): `+`와 `−`는 10%씩 조정하고, 백분율을 클릭하면 75%로 초기화돼요. Ctrl/Cmd + 스크롤은 커서를 중심으로 확대/축소하고, 일반 스크롤과 드래그는 화면을 이동해요.
* 미리보기는 [디자인 설정](/ko/aftersell/cart/design-settings)과 [커스텀 CSS](/ko/aftersell/cart/custom-css)를 변경하는 즉시 실시간으로 반영해요.

<div id="preview-on-your-storefront">
  ## 스토어프런트에서 미리보기
</div>

장바구니의 **Preview**를 사용하면 공개하지 않고 새 탭에서 실제 테마로 확인할 수 있어요:

* **라이브 장바구니**는 스토어프런트를 바로 열어요 — 라이브 장바구니는 이미 쇼핑객이 보는 것이에요.
* **초안 장바구니**는 **테마 미리보기**를 열어요. 미리보기할 테마를 선택하면(메인 테마가 기본값), Aftersell이 라이브 장바구니를 건드리지 않고 미리보기 세션 동안만 해당 테마에 초안 장바구니를 스테이징해요. 선택한 테마에 앱 임베드가 활성화되어 있어야 해요.

<Note>
  초안 미리보기는 라이브 장바구니의 동작을 완전히 반영하지 않을 수 있어요 — 근사치로 여기고, 게시 후 최종 확인을 하세요.
</Note>

미리보기 전에 변경 사항을 저장하세요 — 미리보기가 최신 작업을 반영하도록 에디터가 저장을 안내해요.

<div id="empty-vs-filled-states">
  ## 빈 상태와 채워진 상태
</div>

두 상태 모두 에디터 캔버스(두 개의 카드)에서 항상 사용할 수 있으므로, 빈 장바구니와 채워진 장바구니를 독립적으로 디자인하고 확인할 수 있어요. 스토어프런트에서는 쇼핑객의 장바구니에 맞는 상태가 표시돼요.

<div id="sample-data-scenarios">
  ## 샘플 데이터 시나리오
</div>

[장바구니 상품 블록](/ko/aftersell/cart/cart-items-block) 설정 패널에는 **Sample data** 선택기가 있는 **Preview** 섹션이 있어, 에디터 미리보기를 라인 아이템 시나리오 간에 전환할 수 있어요. 일치하는 장바구니를 직접 만들지 않고도 각 시나리오가 어떻게 보이는지 확인할 수 있어요:

| 시나리오                  | 표시 내용                                |
| --------------------- | ------------------------------------ |
| **Standard product**  | 할인이 적용된 단일 상품이에요.                    |
| **Long product name** | 텍스트 줄바꿈과 오버플로 확인을 위한 아주 긴 제목의 상품이에요. |
| **Bundle**            | 하위 아이템이 있는 번들 앵커 라인이에요.              |
| **Subscription**      | 판매 플랜 레이블이 있는 구독 라인이에요.              |
| **All item types**    | 긴 상품명, 구독, 번들 라인을 하나의 장바구니에 함께 보여줘요. |

선택 사항은 에디터 미리보기에만 영향을 줘요. 장바구니에 저장되지 않으며, 에디터를 다시 로드하면 초기화돼요.