カスタムHTML

Upcartの Custom HTML セクションでは、カートドロワーのさまざまな部分にカスタムコードを挿入できます。
また、<script> タグを使用してJavaScriptを書き、Upcartの Public API（例: upcartOnCartLoaded (deprecated — use upcartSubscribeCartLoaded for new scripts)）を使ってカートと連携することもできます。

場所

次の場所に移動します: Cart Editor > Settings > Custom HTML

仕組み

HTML Location ドロップダウンで、コードをカートレイアウト内のどこに表示するかを選択できます。選択に基づいて、コードは対応するカートエリアに挿入されます。これを使用して、次のようなものを追加できます:

カスタムメッセージ
信頼を高めるテキスト
アプリ連携
分析用のスニペット
スタイル設定用のフック
パーソナライズされたオファーやディスカウントを掲載したバナーなどのプロモーションコンテンツ
お客様の信頼を高める商品保証

動的トークン

任意のCustom HTMLフィールド内で、次のトークンを使用してライブのカートデータを挿入できます:

トークン	レンダリングされる内容
`{{UPCART_SUBTOTAL}}`	ストアの通貨でフォーマットされた現在のカート小計

例:

<p>Your current total: <strong>{{UPCART_SUBTOTAL}}</strong></p>

このトークンは、Scripts (Before Load) を除くすべてのHTML location フィールドで機能します。Scripts (Before Load) では、代わりにJavaScript APIを使用してください。これは、Custom HTMLフィールドで利用可能な唯一の動的トークンです。

利用可能なHTMLの場所


場所	説明
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を実行する非表示エリア。トラッキング、条件ロジック、カスタム動作に最適。

カスタムCSS（任意）

次の場所にある Custom CSS エディターを使用して、HTMLにスタイルを適用できます:
Upcart > Cart Editor > Settings > Custom CSS たとえば、空のカートの配置を調整するには:

[class*="styles_CartPreview__empty__"] { flex-direction: column; } [class*="styles_CartPreview__empty__"] h3 { margin: unset; }

はじめに

カートモジュール

カート設定

スティッキーカートボタン

Multicart

カスタマイズ

アナリティクス

連携と互換性

請求とアカウント

トラブルシューティング

場所

仕組み

動的トークン

利用可能なHTMLの場所

カスタムCSS（任意）

​場所

​仕組み

​動的トークン

​利用可能なHTMLの場所

​カスタムCSS（任意）

場所

仕組み

動的トークン

利用可能なHTMLの場所

カスタムCSS（任意）