Skip to main content
⚠️ 重要なお知らせ このドキュメントのカスタマイズ例は、Upcart カートモジュールの V1.0 でのみ動作します。最近カートをバージョン 2 にアップグレードした場合、これらのカスタマイズコードは動作しません。移行ガイドで提供されているバージョン 2 用の新しいセレクターを使用する必要があります。 V2.0 のソリューションについては、他のカスタマイズドキュメントをご確認ください。

​
概要

Upcart では、カスタム HTML、カスタム CSS、JavaScript を使用して、カートの外観と動作を自由に変更できます。これらのツールを使うと、新しい機能の追加、ブランドに合わせたカートのスタイリング、カートの動作を改善するロジックの導入が可能です。 このガイドでは、それぞれの基本を説明し、始め方を紹介します。各セクションには、変更が実際にどのように見えるかを理解するのに役立つ簡単なビジュアル例が含まれています。
始める前に、Upcart のカスタマイズポリシーを確認して、私たちのチームがサポートする範囲としない範囲を把握しておいてください。

​
HTML でコンテンツを追加する

HTML は、テキスト、バナー、ボタンなどの静的コンテンツをカートに追加するために使用します。Custom HTML エディタでは、複数の HTML 挿入位置（チェックアウトボタンの上、カートの下部、アイテムの間など）から選択できます。 一般的な使用例：
  • カスタムメッセージの追加
  • 法的な免責事項やポリシーリンクの挿入
  • 配送期限や配達情報の強調表示
例：
チェックアウトボタンの上にお礼のメッセージを追加する Upcart のカスタム HTML エディタ

​
JavaScript でロジックを追加する

JavaScript は、カートの動作とロジックを制御します。要素の表示/非表示、条件付きのスタイリング適用、カートの変更へのリアルタイムな応答などに使用できます。 コードを <script> タグで囲み、実行タイミングに応じて Custom HTML > Scripts (Before Load) または Above Announcements に配置します。 例：カートのアップセルを一度に 1 つに制限する：
レガシーに関する注意： window.upcartOnItemRemoved、window.upcartOnAddUpsell、window.upcartOnCartLoaded のコールバックは引き続き動作しますが、非推奨であり、コンソールに警告が記録されます。新しいスクリプトにはすべて upcartSubscribeItemRemoved、upcartSubscribeUpsellsAddedToCart、upcartSubscribeCartLoaded を使用してください。
アップセルモジュールを非表示にする JavaScript が入力された Upcart のカスタム HTML Scripts Before Load エディタ
🔧 開発者向けの注意：
Upcart は、高度なカスタマイズに利用できるすべての関数、変数、ベストプラクティスのパターンをまとめた完全な Public API ドキュメントを提供しています。より複雑なスクリプトや連携を構築する際には、こちらの確認をおすすめします。

​
CSS でカートをスタイリングする

CSS は、カート内の要素の見た目を制御します。余白、色、フォントサイズの調整や、不要な要素の非表示に使用します。Custom CSS は Settings 配下のタブの 1 つです（タブが収まりきらない場合は More settings の中にあります）。 一般的な使用例：
  • 商品タイトルやボタンの色の変更
  • フォントサイズや配置の調整
  • セクション間の余白の追加
例：V1.0 でアップセルタイトルの色を変更する：
変更保存の確認とともにアップセルタイトルの色をスタイリングする Upcart のカスタム CSS エディタ

​
その他のリソース

HTML、CSS、JavaScript のスキルを高めたいですか？以下の無料ツールをご覧ください：

​
カスタマイズに関するサポート

Upcart のサポートチームは、カスタムコードの実装支援は行っていません。より高度な変更については、Shopify Expert への依頼をおすすめします。