COLUMNS
Shopify Plusでのチェックアウトカスタマイズの仕組み
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のカスタマイズの幅が大幅に広がるので、ぜひいろいろなカスタマイズにチャレンジしてみて下さい。