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

アナウンスメントモジュールとリワードモジュールの直後、商品リストの直前に表示されます。

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

商品リストとアップセルの下、アドオンセクションの上に表示されます。\
保証や配送保護のオファーにつなげるメッセージに最適です。

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