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

# Upcart HTML 위치 라이브러리

> 커스텀 HTML과 JavaScript가 카트 드로어의 어디에 표시되는지 알아보세요.

<div id="overview">
  # 개요
</div>

Upcart에서는 **Custom HTML** 편집기를 사용해 장바구니 전체의 특정 위치에 HTML이나 JavaScript를 삽입할 수 있어요. 이를 통해 장바구니 경험 내 레이아웃, 표시 여부, 조건부 콘텐츠를 완전히 제어할 수 있어요.

이 가이드를 참고해 각 위치가 어떻게 동작하고 콘텐츠가 어디에 표시되는지 알아보세요.

<div id="available-html-locations">
  ## 사용 가능한 HTML 위치
</div>

<div id="above-announcementsrewards">
  #### **Above announcements/rewards**
</div>

장바구니 헤더 바로 아래, 모든 모듈 앞에 렌더링돼요.\
사이트 전체 메시지, 플래그, 동적 배너를 추가할 때 사용하세요.

<div id="below-headerannouncementsrewards">
  #### **Below header/announcements/rewards**
</div>

Announcements 및 Rewards 모듈 바로 뒤, 상품 목록 바로 앞에 표시돼요.

<div id="between-each-line-item">
  #### **Between each line item**
</div>

장바구니의 모든 상품 뒤마다 HTML이 반복돼요.\
면책 문구나 상품별 추가 정보를 표시하기에 적합해요.

<div id="below-cart-items">
  #### **Below cart items**
</div>

모든 장바구니 라인 아이템 뒤, 상품 목록 아래에 렌더링돼요. 상품 아래이지만 업셀과 애드온 위에 표시되어야 하는 메시지, 배너, 커스텀 콘텐츠에 사용하세요.

<div id="above-footeradd-ons">
  #### **Above footer/add-ons**
</div>

상품 목록과 업셀 아래, Add-ons 섹션 위에 표시돼요.\
보증이나 배송 보호 오퍼로 이어지는 메시지에 적합해요.

<div id="above-checkout-button">
  #### **Above checkout button**
</div>

푸터 영역 안, 결제 버튼과 소계 바로 위에 표시돼요.\
가격 세부 내역, 배송 안내, 약관 표시에 자주 사용돼요.

<div id="below-checkout-button">
  #### **Below checkout button**
</div>

역시 푸터에 있으며, 결제 버튼 뒤이자 간편 결제 버튼 앞에 위치해요. 애드온은 푸터 상단, 이 위치보다 훨씬 위에 렌더링돼요.\
보조 CTA나 법적 고지에 유용해요.

<div id="bottom-of-cart">
  #### **Bottom of cart**
</div>

푸터 영역 밖, 카트 드로어의 맨 아래에 표시돼요.\
푸터의 배경 색상을 상속받지 않아요.

<div id="on-empty-cart-screen">
  #### **On empty cart screen**
</div>

장바구니가 비어 있을 때만 표시돼요.\
"Your cart is empty" 메시지 바로 **아래**, 추천 모듈 위에 표시돼요 — 보조 문구나 컬렉션으로 연결되는 링크에 유용해요.

<div id="scripts-before-load">
  #### **Scripts (Before Load)**
</div>

장바구니가 로드되기 **전에** JavaScript를 실행하는 보이지 않는 위치예요.\
변수 정의, 조건 설정, Upcart 동작 수정에 사용하세요.

* 모든 커스텀 HTML 위치는 다음에서 관리해요:\
  **Upcart > Cart Editor > Settings > Custom HTML**

<div id="visual-reference">
  ## 시각적 참고 자료
</div>

각 위치가 장바구니 안 어디에 렌더링되는지 명확히 이해하려면 아래의 라벨이 표시된 레이아웃을 참고하세요

<Frame>
  <img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/html-locations-labeled-cart-drawer.gif?s=fd801e149233b51066ee15010556c375" alt="각 커스텀 HTML 위치가 렌더링되는 곳을 표시한 Upcart 카트 드로어" width="700" height="1080" data-path="images/upcart/html-locations-labeled-cart-drawer.gif" />
</Frame>