> ## 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 location フィールドで機能します。Scripts (Before Load) では、代わりに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; }
```