checkout.liquidの真の代替はカスタムアプリ！新しいチェックアウトカスタマイズの方法

2023年12月6日

こんにちは。FRACTA のResearch & Implementation（RI）局です。
Shopify Plusプランであれば、checkout.liquidを編集することで、チェックアウトページ上に独自テキストの追加などのカスタマイズが可能です。しかし、checkout.liquidは2024年8月13日をもって廃止されることが発表されています。では廃止された以降は、どのようにチェックアウトページのカスタマイズを行えばよいでしょうか？

答えは、新しいカスタマイズ機構「Checkout Extensibility」へ移行し、チェックアウトカスタマイズに対応したアプリを導入することです。

「Checkout Extensibility」への移行と、アプリを使用したカスタマイズ方法についてはこちらの記事（ShopifyパートナーなしでCheckout Extensibilityに移行する手順）をご覧ください。

※今年立ち上げた新しいShopify Plusストアでは、既に「Checkout Extensibility」となっていますので、移行する必要はありません。

チェックアウトカスタマイズに対応したアプリを導入すると、テーマカスタマイズと同じ感覚で、簡単にカスタマイズを行うことが可能ですが、通常のアプリと同様にアプリ費用がかかってきます。また、社内にエンジニアがいるなど、checkout.liquidでカスタマイズを内製しているマーチャントにとっては、せっかくソースコードレベルでカスタマイズが可能な状況にも関わらず、アプリ使用となるのは少々痛手かも知れません。

そこで今回は、アプリ費用をかけずに、ソースコードレベルで独自のチェックアウトカスタマイズを実現できる、カスタムアプリ開発の手順をご紹介します。

※カスタムアプリの開発にはShopifyパートナー管理画面が必要です。また、コマンドラインを使用できることが前提となります。

「カスタムアプリ」と「拡張機能のみのアプリ」について
実現したいカスタマイズを検討する
実現可能であるか、情報を集める
カスタムアプリを開発し、開発ストアで検証する
本番ストアに導入する
カスタムアプリの定期アップデートについて

1. 「カスタムアプリ」と「拡張機能のみのアプリ」について

まず始めに「カスタムアプリ」と「拡張機能のみのアプリ」について簡単に解説します。

「カスタムアプリ」とは

カスタムアプリとは、アプリストアで公開されている一般的なアプリとは異なり、特定のストアのために開発し、そのストアのみが使用できるアプリです。

「拡張機能のみのアプリ」とは

Shopifyアプリというと、アプリ管理画面にアクセスし、設定を行うイメージがあるかと思います。拡張機能のみのアプリは、アプリ管理画面を持っていません。例えば、チェックアウトに表示させたい独自テキストがあるとして、アプリ管理画面から設定するのではなく、直接アプリのソースコードに記述します。そのような拡張機能のみのアプリは、アプリ用のサーバーが不要のため、月々のサーバー費用もかかりません。

従来のcheckout.liquidに直接カスタマイズ内容を記述するように開発が可能なため、「拡張機能のみのカスタムアプリ」はcheckout.liquidの真の代替と言えるでしょう。

2. 実現したいカスタマイズを検討する

※本記事では「1ページのチェックアウト」を前提としていますが、従来の3ページの場合も開発手順に違いはありません。

例えば、以下のようなカスタマイズをcheckout.liquidで実装している、もしくは新しく実装したいとします。

配送先住所の入力フォーム部分に赤文字で「配送先住所に間違いがないかご確認ください。」を表示

配送方法の選択部分に「置き配を希望しますか？」のチェックボックスを表示。チェックされた場合は、Cart Attributesに「置き配希望：はい」と保存する

実現したいカスタマイズの検討ができたら、次にそのカスタマイズを実現できる可能性を探ります。

3. 実現可能であるか、情報を集める

その情報はCheckout UI extensionsのリファレンスにあります。ここでリファレンスを闇雲に読み始めるのではなく、どのような情報があれば実現できるのか考えてみましょう。

1つ目のカスタマイズ

配送先住所の入力フォーム部分に赤文字で「配送先住所に間違いがないかご確認ください。」を表示

を実現できるかどうかは以下の情報を見つけることです。

1-1. 配送先住所の入力フォーム部分に要素を表示できること
1-2. テキストを表示できること
1-3. テキストカラーを指定できること

1-1. 配送先住所の入力フォーム部分に要素を表示できること

チェックアウトページ内で独自要素を表示できる位置について書かれているページはこちら「Extension Points > Checkout locations > One-page checkout」です。

キャプチャの部分（お客様メールアドレス入力フォームの下、配送先住所の入力フォーム上）に表示可能であることがわかりました。

※執筆時点では「1ページのチェックアウト」は開発者プレビューのため、表示可能な位置は変更となる可能性があります。

1-2. テキストを表示できること

チェックアウトページ内にどのような要素を表示できるかについて書かれているページはこちら「All Checkout UI extensions components」です。

テキストが表示可能であることがわかりました。

1-3. テキストカラーを指定できること

テキスト要素について書かれているページはこちら「Text」です。

規定の範囲内でカラー指定が可能であることがわかりました。
※"critical"が赤色になります。

これら3つの情報により、

配送先住所の入力フォーム部分に赤文字で「配送先住所に間違いがないかご確認ください。」を表示

の実現性は高いと言えます。

次に2つ目のカスタマイズ

配送方法の選択部分に「置き配を希望しますか？」のチェックボックスを表示。チェックされた場合は、Cart Attributesに「置き配希望：はい」と保存する

を実現できるかどうかは以下の情報が必要です。

2-1. 配送方法の選択部分に要素を表示できること
2-2. チェックボックスを表示できること
2-3. お客様の選択内容をCart Attributesに保存できること

2-1. 配送方法の選択部分に要素を表示できること

先ほどと同様にこちら「Extension Points > Checkout locations > One-page checkout」を参照します。

キャプチャの部分（配送方法の選択部分の上）に表示可能であることがわかりました。

2-2. チェックボックスを表示できること

先ほどと同様にこちら「All Checkout UI extensions components」を参照します。

チェックボックスが表示可能であることがわかりました。

2-3. お客様の選択内容をCart Attributesに保存できること

お客様の選択・入力内容の処理についてはチェックアウトAPIのページ「Checkout Api」を参照します。

Cart Attributesへの保存が可能であることがわかりました。

※お客様がApple Pay、Google Pay等の「簡単なチェックアウト」での決済を選択した場合は機能しません。

これらの情報により、

配送方法の選択部分に「置き配を希望しますか？」のチェックボックスを表示。チェックされた場合は、Cart Attributesに「置き配希望：はい」と保存する

の実現性も高いと言えます。

4.カスタムアプリを開発し、開発ストアで検証する

リファレンスによると、2つのカスタマイズは実現できる可能性が高いことがわかりました。

ここからは実際にカスタムアプリを開発して、開発ストアで検証するフェーズに入りますが、下準備がいくつか必要です。
※2023年11月現在の情報です。

パートナー管理画面の作成
開発ストア（Checkout Extensibilityプレビュー）の作成
ローカル環境を整える
ベースアプリを作成する

パートナー管理画面の作成

本記事の始めにもお伝えしましたが、カスタムアプリ開発と開発ストアを作成するには、Shopifyパートナー管理画面が必要です。まだお持ちでない場合は、パートナー管理画面を作成しましょう。

開発ストア（Checkout Extensibilityプレビュー）の作成

パートナー管理画面を既に持っていれば、開発ストアを作成します。ストア作成の際は、開発者プレビューで「Checkout Extensibility」を選択してください。（「Checkout Extensibility」はPlusプランでなくても、チェックアウトカスタマイズの検証が可能な環境です。）

ローカル環境を整える

リファレンス「Create an app > Requirements」に記載された必要なツール等をPCにインストールします。

ベースアプリを作成する

リファレンス「Checkout UI extensions > Scaffolding an extension」に沿って、Checkout UI extensionsのベースアプリを作成します。

コマンド入力の途中、希望する構築方法、拡張機能（extensions）、開発言語を尋ねられます。チェックアウトカスタマイズのための「拡張機能のみのアプリ」を開発する場合、構築方法は「Start by adding your first extension（拡張機能のみ）」、拡張機能（extensions）は「Checkout UI（チェックアウトカスタマイズ）」を選択します。開発言語は任意ですが、本記事では「JavaScript React」を選択しました。