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

# 커스텀 HTML

> 내장 HTML 편집기를 사용하여 카트에 커스텀 HTML 또는 JavaScript를 추가하세요.

Upcart의 **Custom HTML** 섹션을 사용하면 카트 드로어의 다양한 위치에 커스텀 코드를 삽입할 수 있어요.\
`<script>` 태그로 JavaScript를 작성하고 Upcart의 [Public API](https://rokt.notion.site/upcart-public-api)를 사용해 카트와 상호 작용할 수도 있어요(예: `upcartOnCartLoaded (deprecated — use upcartSubscribeCartLoaded for new scripts)`).

<div id="where-to-find-it">
  ## **위치 안내**
</div>

다음 경로로 이동하세요: **Cart Editor > Settings > Custom HTML**

<div id="how-it-works">
  ## **작동 방식**
</div>

**HTML Location** 드롭다운으로 카트 레이아웃 내에서 코드가 표시될 위치를 선택할 수 있어요. 선택에 따라 해당 카트 영역에 코드가 삽입돼요.

이를 사용해 다음을 추가할 수 있어요:

* 커스텀 메시지
* 신뢰 문구
* 앱 연동
* 분석 스니펫
* 스타일링 훅
* 개인화된 오퍼나 할인이 포함된 배너 같은 프로모션 콘텐츠
* 고객 신뢰를 높이는 제품 보증 문구

<div id="dynamic-tokens">
  ## **동적 토큰**
</div>

모든 Custom HTML 필드 안에서 다음 토큰을 사용해 실시간 카트 데이터를 삽입할 수 있어요:

| 토큰                    | 렌더링되는 내용                 |
| --------------------- | ------------------------ |
| `{{UPCART_SUBTOTAL}}` | 스토어 통화로 형식이 지정된 현재 카트 소계 |

**예시:**

```html theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<p>Your current total: <strong>{{UPCART_SUBTOTAL}}</strong></p>
```

이 토큰은 \*\*Scripts (Before Load)\*\*를 제외한 모든 HTML 위치 필드에서 작동하며, 해당 위치에서는 대신 JavaScript API를 사용해야 해요. 이것이 Custom HTML 필드에서 사용할 수 있는 유일한 동적 토큰이에요.

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

|                                        |                                                                        |
| -------------------------------------- | ---------------------------------------------------------------------- |
| 위치                                     | 설명                                                                     |
| **Above announcements/rewards**        | 카트 상단, 카트 헤더 아래.                                                       |
| **Below header/announcements/rewards** | 공지사항이나 리워드 바 바로 아래.                                                    |
| **Between each line item**             | 카트의 모든 제품 아래에 삽입돼요.                                                    |
| **Below cart items**                   | 카트 라인 아이템 바로 아래, 하단 모듈 위.                                              |
| **Above footer/add-ons**               | 카트 아이템과 업셀 아래, 애드온 위.                                                  |
| **Above checkout button**              | 푸터 안, 체크아웃 버튼과 소계 바로 위.                                                |
| **Below checkout button**              | 푸터 안, 체크아웃 버튼 바로 아래.                                                   |
| **Bottom of cart**                     | 드로어의 맨 아래(푸터 바깥).                                                      |
| **On empty cart screen**               | "Your cart is empty" 텍스트 옆에 표시돼요.                                      |
| **Scripts (Before Load)**              | 카트가 로드되기 **전에** JavaScript를 실행하는 보이지 않는 영역. 트래킹, 조건부 로직, 커스텀 동작에 적합해요. |

<div id="custom-css-optional">
  ## **커스텀 CSS (선택 사항)**
</div>

다음 경로에 있는 **Custom CSS** 편집기로 HTML에 스타일을 지정할 수 있어요:\
**Upcart > Cart Editor > Settings > Custom CSS**

예를 들어, 빈 카트 정렬을 조정하려면:

```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
[class*="styles_CartPreview__empty__"] { flex-direction: column; } [class*="styles_CartPreview__empty__"] h3 { margin: unset; }
```