Shopify Plus Checkout の拡張性: カスタム チェックアウト エクスペリエンス

Shopify のチェックアウトのコンバージョン率は平均 15% で、これは e コマースの中でも最高レベルです。この統計が、Shopify がこれまでチェックアウトのカスタマイズを制限してきた理由です。Shopify のチェックアウトは適切に最適化されており、カスタム変更によりコンバージョンが減少する傾向があります。しかし、加盟店には、ロイヤルティ ポイントの表示、配送設定、ギフト メッセージング、B2B 注文書フィールド、標準のチェックアウトでは対応できないコンプライアンス要件など、カスタマイズする正当な理由があります。

Checkout Extensibility は、この緊張に対する Shopify Plus の答えです。これにより、Shopify の最適化されたチェックアウト アーキテクチャをそのまま維持し、Shopify がプラットフォームを進化させても自動更新を維持しながら、有意義なチェックアウトのカスタマイズが可能になります。非推奨の checkout.liquid アプローチは、Shopify がチェックアウトを更新するたびに機能しなくなりました。拡張機能は設計上、アップグレードしても安全です。

重要なポイント

• Checkout Extensibility が非推奨の checkout.liquid を置き換えます — すべての Plus 加盟店は 2025 年までに移行する必要があります (すでに過去のもの)
• UI 拡張機能は、Shopify のコア チェックアウト テンプレートをオーバーライドすることなく、React コンポーネントを特定のチェックアウト スロットに追加します
• チェックアウト機能により、割引、配送、支払い方法のフィルタリングのためのカスタム サーバー側ロジックが可能になります
• 拡張機能はサンドボックス環境で実行されます - レンダー ターゲット外の DOM にはアクセスできません
• ブランディング API により、チェックアウトの色、タイポグラフィ、角の半径を完全に視覚的にカスタマイズできます
• 購入後表示オプションにより、注文確認後にワンクリックのアップセル オファーを追加します (コンバージョン率が最も高くなります)
• 「ありがとうございます」ページと「注文状況」ページが拡張機能を使用して完全にカスタマイズできるようになりました
• パフォーマンス: 拡張機能は Shopify のインフラストラクチャでサーバー側でレンダリングされ、クライアント側のパフォーマンスに影響はありません

---

チェックアウト拡張性のアーキテクチャ

技術的なアーキテクチャを理解すると、何をどのように構築するかについてより適切な決定を下すのに役立ちます。

拡張ポイント (スロット)

Shopify のチェックアウト UI には、事前定義された拡張ポイント、つまりカスタム React コンポーネントを挿入できる特定の場所があります。これらは、承認されたコンポーネントを受け入れるチェックアウト テンプレート内の構造化されたスロットと考えてください。

拡張サンドボックス

拡張機能は、分離された JavaScript 環境で実行されます。これらは、直接 DOM 操作ではなく、標準化された API (@shopify/ui-extensions パッケージ) を介して Shopify のチェックアウトと通信します。これは次のことを意味します。

• 拡張機能はチェックアウト ページの他の部分を読み取ったり変更したりすることはできません
• 拡張機能はブラウザーの Cookie、localStorage、または外部 JavaScript にアクセスできません。
• 拡張機能からのネットワークリクエストはShopifyの承認されたエンドポイントを経由する必要があります
• 拡張機能は API 経由でチェックアウト データ (カートの内容、顧客情報、配送選択) を読み取ることができます

このサンドボックス化により、拡張機能はアップグレードしても安全です。Shopify は、拡張機能の統合を中断することなくチェックアウト テンプレートを更新できます。

---

拡張機能開発環境のセットアップ

前提条件

• 開発ストアへのアクセスが可能な Shopify Plus ストア
• Node.js 18+ および npm/pnpm
• Shopify CLI 3.x

初期セットアップ

npm install -g @shopify/cli @shopify/theme
shopify app create
# Select: Add extension → Checkout UI extension

これにより、Shopify アプリのディレクトリにチェックアウト拡張機能のスキャフォールドが作成されます。

拡張ファイルの構造

extensions/
  my-checkout-extension/
    src/
      Checkout.tsx    # Main React component
    shopify.extension.toml   # Extension configuration
    package.json

最小限の拡張機能 (TypeScript/React)

カスタム メッセージを表示するチェックアウト拡張機能:

import {
  reactExtension,
  useSettings,
  Banner,
} from "@shopify/ui-extensions-react/checkout";

export default reactExtension(
  "purchase.checkout.block.render",
  () => <MyExtension />
);

function MyExtension() {
  const { message } = useSettings();
  return (
    <Banner status="info">
      {message || "Default message"}
    </Banner>
  );
}

注: コード例は説明用です。実際の Shopify UI 拡張機能 API は進化しています。常に最新の Shopify 開発者ドキュメントを参照してください。

---

高価値の拡張機能の使用例

1.ロイヤルティ ポイントの表示と引き換え

顧客の現在のロイヤルティ ポイント残高を表示し、ポイントを割引として適用できるようにします。

この拡張機能は、チェックアウト コンテキストから顧客の ID を読み取り、Shopify の fetch プロキシ経由でロイヤルティ プラットフォームの API (Smile.io、LoyaltyLion) を呼び出し、残高を表示し、確認時に Shopify の割引 API 経由で割引コードを適用します。

これは、顧客がロイヤルティ ポイントを引き換えたいが、コードを見つけるためにチェックアウトを終了する必要があり、その結果、カート放棄につながるという、よくある問題点に取って代わるものです。

予想されるコンバージョン効果: 利用可能なポイントを確認したロイヤルティ プログラム メンバーのチェックアウト完了率が 3 ～ 8% 増加します。

2.ギフトメッセージと包装オプション

チェックアウトにギフト メッセージ フィールドとギフト ラッピング オプションを追加します。拡張子:

• 「これはギフトです」トグルを表示します
• 有効にすると、ギフト メッセージのテキスト フィールドが表示されます
• オプションでギフト ラッピングのアップセルを表示します (固定価格が項目として追加されます)。
• メッセージを梱包ワークフローでアクセスできる注文属性として保存します

予想される影響: 注文の 2 ～ 5% がギフト メッセージングを使用しています。アップセルにより収益が増加します。

3. B2B 発注書番号フィールド

B2B バイヤーは、調達システムに PO 番号を必要とします。このフィールドがないと、B2B チェックアウトの摩擦が大きくなります。

この拡張機能は、「購入注文番号」テキスト入力フィールドを追加し、B2B 顧客に必須としてマークし (顧客タグによって検出)、PO 番号を注文属性として保存します。 PO 番号は請求書および管理者に表示されます。

実装に関する考慮事項: useCustomer フックを使用して顧客タグをチェックすることで、B2B 顧客を検出します。

4.配達日の希望

複数の配送速度オプションを提供する販売業者の場合、配送オプションと一緒に配送予定日を表示すると、決定の不確実性が軽減され、より優れた配送の選択肢が増えます。

この拡張機能は purchase.checkout.shipping-option-item.render-after にフックして、各配送オプションの下に配達日の計算を挿入します。日付の計算には、現在の日付 + 配送日数 (配送業者 API から取得されるか、配送ゾーンによってハードコードされます) が使用されます。

予想される影響: 正確な配達日が表示されると、お急ぎ配送の選択が 8 ～ 15% 増加します。

5.チェックアウト時のアップセル/クロスセル

[注文を完了する] ボタンの前の製品アップセル ブロック - 購入前に AOV を増やす最後の機会:

この拡張機能はカートの内容を読み取り、レコメンデーション エンジン API を呼び出し、ワンクリックでカートに追加できる関連するアドオン製品を 1 ～ 2 個表示します。拡張機能を介して追加されたアイテムは、Shopify チェックアウトの合計をリアルタイムで更新します。

予想される影響: 購入者の 5 ～ 12% がチェックアウトのアップセル ブロックから商品を追加します。

---

購入後の拡張機能: 最高の ROI の機会

購入後の拡張機能は、顧客がチェックアウトを完了した直後に注文確認ページに表示されます。顧客は最高にポジティブな状態にあり、欲しかったものを購入したばかりです。これは、アップセル オファーのコンバージョン率が最も高い配置です。

購入後のワンクリックアップセル

購入後の拡張機能では、新しいチェックアウト フローを行わずに、顧客のすでに承認されている支払い方法に請求する製品アドオンを提供できます。

1. 顧客が注文 #1234 を完了する
2. 拡張機能が表示されます: 「購入を完了します — [製品] を $19 で追加します (ワンクリック、支払い情報の再入力は不要)」
3. 顧客が承諾または拒否する
4. 承認された場合: 新しい料金と新しい注文品目を作成します。
5. お客様は最終注文ステータスページにリダイレクトされます。

予想される効果: 適切な価格帯で適切に構成された購入後のオファーの承諾率は 8 ～ 20% (100 ドル以上の初回注文に対して 10 ～ 30 ドルのオファー)。

ありがとうページのカスタマイズ

サンキューページ拡張機能は、アップセル以外にも次のことが可能です。

• この注文で獲得したロイヤルティ ポイントを表示します
• 事前入力された共有リンクを含む紹介プログラム CTA を表示します
• 消耗品の 1 回限りの購入者にサブスクリプションのアップグレードを提供
• インセンティブ付きでソーシャルメディアのフォローをリクエストする
• 初めてカテゴリーを購入する人向けに製品のお手入れ方法を表示します

---

チェックアウト関数: サーバー側のロジック拡張

チェックアウト関数は UI 拡張機能よりも強力で、コアのチェックアウト計算ロジック自体を変更します。これらはコンパイルされた WebAssembly としてサーバー側で実行されます。つまり、高速であり、クライアント側の操作によってバイパスされることはありません。

割引機能

Shopify のネイティブ割引エンジンがサポートしていない複雑な割引ロジックを実装します。

配送機能

Shopify が配送オプションを計算して表示する方法を変更します。

• カートの内容に基づいて特定の配送方法を非表示にします (大型商品の場合は標準配送はありません)
• 物流プロバイダーからカスタム配送料を入力します
• 遠隔地の配送先住所に追加送料を適用する
• カートがしきい値に達すると、無料配送を提供します (リアルタイムで計算されます)。

支払いカスタマイズ機能

表示される支払い方法を制御します。

• 海外からの注文の場合は「代金引換」を非表示にします
• 10,000 ドルを超える注文の場合は銀行振込のみを表示します
• 特定の製品カテゴリについて PayPal を非表示にする (コンプライアンス上の理由)
• カスタムの支払い方法の説明またはアイコンを表示します

---

ブランディング API: ビジュアル チェックアウトのカスタマイズ

Checkout Branding API を使用すると、チェックアウト ロジックに触れることなく、包括的な視覚的なカスタマイズが可能になります。

カスタマイズできる内容

「Shopify 管理者」→「設定」→「チェックアウトと顧客アカウント」→「チェックアウトをカスタマイズ」から設定するか、複数のストアにわたってプログラムによる設定を行う場合はブランディング API から直接設定します。

---

checkout.liquid からの移行

Shopify Plus ストアが checkout.liquid (2024 年 8 月に非推奨、強制移行が完了) を使用していた場合は、カスタマイズを拡張機能として再構築する必要があります。一般的な checkout.liquid カスタマイズとそれに相当する拡張機能:

checkout.liquid との制限事項

拡張機能では、任意の JavaScript インジェクションや完全なテンプレート操作を複製することはできません。 checkout.liquid に複雑な条件付きロジックや深くカスタマイズされた UI レイアウトが含まれている場合、一部の機能はチェックアウト関数を使用して再構築する必要があるか、拡張フレームワークでまったく複製できない可能性があります。

---

よくある質問

Checkout の拡張機能はモバイルとデスクトップで動作しますか?

はい。 UI 拡張機能は、本質的に応答性の高い Shopify の UI コンポーネントを使用してレンダリングします。 Shopify のチェックアウトはレイアウトの応答性を処理します。拡張機能は指定されたスロット内でレンダリングされ、画面サイズに自動的に適応します。モバイルとデスクトップのレイアウトを別々に作成する必要はありません。

拡張機能によりチェックアウトの速度が遅くなる可能性がありますか?

UI 拡張機能は Shopify のインフラストラクチャ内でサーバーでレンダリングされます。最初のレンダリングではクライアント側で JavaScript を実行する必要はありません。ただし、API 呼び出しを行う拡張機能 (ロイヤルティ残高、推奨データなどを取得するため) は、ネットワーク遅延を追加します。応答をキャッシュし、エンドポイントを最適化することで、API 呼び出しを 200 ミリ秒未満に保ちます。チェックアウトが常に遅い拡張機能は Shopify によって検出され、無効になる可能性があります。

実際に公開する前に Checkout Extensions をテストするにはどうすればよいですか?

Shopify の開発ストアを使用して、実稼働チェックアウトに影響を与えることなく拡張機能をテストします。 Shopify CLI は、実際の Shopify チェックアウト環境で拡張機能をプレビューするローカル開発サーバーを提供します。拡張機能は、プレビュー URL 経由でのみ表示される「非表示」状態で運用ストアにデプロイすることもできます。これは、一般公開前の関係者のレビューに役立ちます。

Checkout Extensions を構築するにはどのような技術スキルが必要ですか?

UI 拡張機能には React と TypeScript の知識が必要です。チェックアウト関数には、Rust または JavaScript (Shopify が提供するツールチェーンを介して WebAssembly にコンパイルされる) が必要です。 React の経験を持つほとんどの開発者は、Shopify のドキュメントを確認した後に UI 拡張機能を構築できます。チェックアウト関数は技術的により要求が厳しく、重要な関数にはバックエンドの経験を持つ上級開発者が適しています。

Checkout Extensions は Plus 以外の Shopify プランでも利用できますか?

購入後の拡張機能とサンキューページの拡張機能は、すべての Shopify プランで利用できます。チェックアウト UI 拡張機能 (チェックアウト中のカスタマイズ) は Plus のみです。チェックアウト機能はPlusのみです。チェックアウトのビジュアルカスタマイズ用のブランディング API は Plus のみです (ただし、基本的なテーマエディターのチェックアウトのカスタマイズはすべてのプランで利用できます)。

---

次のステップ

Checkout の拡張性は、Shopify Plus の機能セットの中で技術的に最も複雑な機能です。 ROI は明確です。ロイヤルティの償還、B2B 分野、購入後のアップセル、納期の透明性はすべて、コンバージョンへの影響を文書化しています。実装には、React の開発スキルと Shopify の拡張機能 API に精通していることが必要です。

ECOSIRE の Shopify Plus チーム は、DTC ブランドから B2B ディストリビューターまでの販売者向けに Checkout Extensions を構築および保守しています。当社の開発者は、Checkout Extensibility、Checkout Functions、Branding API における特別な経験を持つ Shopify Plus 認定パートナーです。

チェックアウトのカスタマイズ要件についてご相談ください — お客様のニーズを評価し、チェックアウトのパフォーマンスを損なうことなくコンバージョンを増やす拡張アーキテクチャを設計します。