2023年1月からShopify +マーチャントは新たな「チェックアウト拡張機能（Checkout Extensibiltiy）」を使ってチェックアウトをカスタマイズすることができるようになりました。
一方で、これまでのcheckout.liquidは2024年8月13日に廃止となるため、現在checkout.liquidをお使いの場合はチェックアウト拡張機能への移行が必要です。
そこで今回はcheckout.liquidで実現していたカスタマイズをどのようにチェックアウト拡張機能で実現するのかについて解説します。
チェックアウト拡張機能（Checkout Extensibility）とは？
チェックアウト拡張機能のメリット
チェックアウト拡張機能はアプリを介してチェックアウトをカスタマイズするもので、従来のcheckout.liquidと比べてより高い拡張性やコンバージョンを実現することが可能です。
チェックアウト拡張機能の概要
チェックアウト拡張機能には、カスタマイズの用途に応じていくつかの機能が含まれています。詳しくはShopify公式ドキュメントをご参照ください。
- Checkout UI extensions
チェックアウトページと注文状況ページにカスタムUIやコンテンツを追加する - GraphQL Admin API（Checkout Branding API）
色やフォントの変更やブランドロゴの追加などチェックアウトの見た目をカスタマイズする ※本稿執筆時点ではベータ版 - Shopify Functions
チェックアウトのバックエンドロジックをカスタマイズするカスタムロジックの追加（配送方法や決済方法のカスタマイゼーション、ディスカウント、オーダールーティング、カートとチェックアウトのバリデーション等） - Post-purchase checkout extensions
購入後のページにカスタムUIやコンテンツを追加する※本稿執筆時点ではベータ版 - Web pixel app extensions
顧客イベントのトラッキング
チェックアウト拡張機能の注意事項
以下の点については現時点でチェックアウト拡張機能では実現できません。
- Checkout UI extensionsはDOMにアクセスできません。従って既存の標準項目を非表示や上書きなどはできません。
- 本稿執筆時点ではGlobal-eを使用している場合、チェックアウトの拡張機能は使用できませんが、2023年後半以降に使用できるようになる予定です。
FAQ
基礎編
Q.checkout.liquidからチェックアウト拡張機能に移行するためのタスクの全体像が知りたい
ヘルプセンターのチェックアウト拡張機能のアップグレードガイド及びCheckout Extensibility Migration Kit（英語）をご参照ください。
Q.今後のチェックアウト拡張機能のロードマップが知りたい
こちらのShopify公式ロードマップをご参照ください。また、Checkout UI extensionsに関しては、Githubのリポジトリも公開されております。
カスタマイズ編
Q.チェックアウトに備考欄を追加したい
こちらの公式チュートリアルをご参照ください。Checkout UI extensionsで入力欄を追加し、入力された内容を注文メタフィールドに保存するサンプルコードが提供されています。
Q.チェックアウトに入力値のバリデーション処理を追加したい
チェックアウトにおけるバリデーション処理についてはこちらの開発ドキュメントをご参照ください。
<カスタム項目のバリデーション>
Checkout UI extensionsのblock_progress機能を使用して、顧客がチェックアウトの次のステップに進むのをブロックすることができます。
<標準項目のバリデーション>
チェックアウト及びカートの標準項目のデータはFunctionを使ってバリデーション処理を追加することができます。こちらの公式チュートリアルをご参照ください。（本機能は2023年6月に公開予定です。現在はDeveloper Previewが利用可能です）
Checkout UI extensionsから直接バリデーションする機能も近日公開予定です。また今後のリリース予定に関してはこちらのShopify公式ロードマップをご参照ください。
Q.日時指定機能を挿入したい
日時を選択するためのUIコンポーネント(Date Picker)はまだ公開されていませんが近日公開予定です。Developer Changelogに登録して最新情報をご参照ください。また今後のリリース予定に関してはこちらのShopify公式ロードマップをご参照ください。
Q.Googleタグマネージャーを設定するにはどうしたら良いですか？
お客様イベントを追跡するピクセルの管理と追加をShopify上で一元管理できるShopifyピクセルマネージャーが利用できるようになりました。
このShopifyピクセルマネージャーの機能はGoogleタグマネージャーなどと同様にタグの管理を行うものですので、Googleタグマネージャーは削除されることをおすすめしています。ShopifyピクセルマネージャーはShopifyの純正機能ですのでパフォーマンスやセキュリティの面でもGoogleタグマネージャーに比べてメリットがございます。
他のサイトやサービスのタグも含めてGoogleタグマネージャーを利用しているため引き続き利用したい場合、カスタムピクセルから設定頂くことになります。設定方法については、ヘルプセンターの「Googleタグマネージャーのカスタムピクセルを作成する」をご参照ください。
Q.チェックアウト内の標準入力項目を一部非表示にしたい
Checkout UI extensionsはDOMにアクセスできないので、既存の標準項目を非表示にすることはできません。詳しくはこちらの制約事項（Constraints）をご参照ください。
Q.チェックアウト内の文言を修正及び非表示にしたい一部の文言についてはテーマファイルから変更が可能です。変更方法についてはヘルプセンターの「テーマの文言の変更」をご参照ください。