Shopify Plusでのチェックアウトカスタマイズの仕組み
【2026年7月 追記】
本記事で解説している checkout.liquid によるチェックアウトカスタマイズは、すでに廃止された仕組みです。チェックアウト画面での checkout.liquid は2024年8月に、サンキューページ・注文状況ページでの利用も2025年8月に終了しました。当時はこういう仕組みだったという記録のために記事は残していますが、内容は参考にしないでください。現在の仕組みの概要は以下に追記します。
現在のチェックアウトカスタマイズの概要（2026年時点）
現在は「Checkout Extensibility」と呼ばれる仕組みに移行しており、テーマのコードを直接編集するのではなく、アプリの拡張機能としてカスタマイズを実装します。主な構成要素は次のとおりです。
- Checkout UI Extensions：チェックアウト画面にUI要素（追加の入力項目、バナー、注意書きなど）を追加する仕組みです。拡張はサンドボックス内で安全に動作し、管理画面のチェックアウトエディタからドラッグ&ドロップで配置できます。
- Shopify Functions：配送方法・支払方法の出し分けや並び替え、独自の割引ロジック、購入時のバリデーションなど、サーバー側のロジックをカスタマイズする仕組みです。
- Checkout Branding（GraphQL Admin API）：色・フォント・ロゴなどのデザイン調整をAPI経由で行えます。
従来のように任意のJavaScriptを挿入することはできなくなりましたが、その代わりにShopifyのアップデートや Shop Pay などと干渉しない、安全でアップグレードに強い仕組みになっています。なお、チェックアウト画面本体のカスタマイズは引き続きShopify Plusプラン限定で、サンキューページ・注文状況ページのカスタマイズは全プランで利用できます。
以下は公開当時（2021年2月）の記事本文です。
ShopifyからShopify Plusプランに切り替えるメリットの一つとして、チェックアウト画面群（カートの次ページから注文完了ページまで）がカスタマイズできるようになるという点があります。
具体的には、Shopifyテーマ内のレイアウトファイルの一つに、`checkout.liquid` が追加できるようになり、そのファイル内に主にJavascriptを加えることでのカスタマイズが可能です。レイアウトファイルとは、個別のページではなく、各ページ共通の枠となるヘッダー・フッターや、<head>などの内容が記述されるファイルのことで、checkout.liquidにおいてはチェックアウトページ群の当該役割を担いつつ、ここにコードを書き込むことでヘッダー・フッターに関わらずカスタマイズができます。
カスタマイズのユースケース
自由度があるため、やりたいことの多くは実現できるはずですが、参考情報としてカスタマイズ例としては、下記が挙げられます。
- 住所項目へのフロントバリデーション追加（住所1項目は番地が入るはずのため、数字がないと進めないようにするなど）
- 姓名のカナ項目追加
- 配送方法選択画面に配送日時指定要素を追加
checkout.liquidを有効にする方法
`checkout.liquid` を有効にするにあたっての落とし穴は、Shopify管理画面での手順を実施する前に、Shopify Plusのアカウントマネジャー（Launch Engineer または Merchant Success Manager）に有効化を依頼する必要があります。つまり、デフォルトでは使えず、オプトイン式の機能ということです。なお、これにかかる追加費用はありません。
アカウントマネジャー側から有効化完了の連絡があった後、下記の手順で`checkout.liquid` を追加できるようになります。
対象テーマのテーマのコード編集画面に遷移した後、Layoutディレクトリ配下の'Add New Layout'を押下すると、下記画像のように、checkoutという値が選択できるようになっていますので、追加をしてください。
その後ろの入力項目には何も入れる必要はありません（新規作成時はそもそもこの入力項目は非表示となります）。
checkout.liquidのコード
`checkout.liquid` のソースコードを見てみると、意外と思われる方が多いと思いますが、実は50行程度のファイルとなっており、実際のHTMLなどの多くは、Shopifyにより挿入される仕組みとなっています。
下記にて、`checkout.liquid` のサンプルを確認いただけます。
https://github.com/flagship-llc/checkoutliquid/blob/master/checkout.liquid
これを見ると、チェックアウトのカスタマイズにあたっては、ほとんどはJavascriptでの対応の意味がしっくり来た方もいるかと思います。
実装に使えるJSフレームワーク
フラッグシップ神馬の見解として、Shopifyのカスタマイズ実績に於いて世界No.1であると考えるDisco Labs社（オーストラリア、メルボルン）が、チェックアウトのカスタマイズに活用できるJSフレームワーク、Custard.jsを提供しています。
これを使うことで、一定のルールに従う形でカスタマイズができるため、ユースケース的に合いそうでしたら積極的な利用をお勧めします。
本フレームワークはIE11には対応していませんが、Shopify自体が対応しておらず、対応の必要もないでしょう。
サイト立ち上げ時の注意事項
サイト立ち上げ時にありがちな問題として、 `checkout.liquid` を非本番環境では有効化していたものの、本番環境では有効化していないということがあります。Shopify Plusのアカウントマネジャーを待つという相手のある話のため、統合テスト直前やリリース直前で焦ることないよう、契約時にすぐ有効化を依頼しておきましょう。
以上の情報で、 Shopify Plusでのチェックアウトカスタマイズの仕組みを大枠理解したと認識いただいて問題ありません。
Shopifyのカスタマイズの幅が大幅に広がるので、ぜひいろいろなカスタマイズにチャレンジしてみて下さい。