Shopify Plusプランであれば、checkout.liquidを編集したり、アプリ「Script Editor」を使用することで、チェックアウトページのカスタマイズが可能であることは広く知られています。2024年8月13日をもってcheckout.liquidは廃止され、2025年8月28日以降Script Editorは削除となり機能しなくなることはご存知でしょうか。チェックアウトページのカスタマイズを維持したい場合は、新しいカスタマイズ機構「Checkout Extensibility」への移行が必要となります。
Shopify公式サイト内にも移行に関するページがいくつか追加されています。
- Shopify Plus公式サイト（英語）ー Upgrading to checkout extensibility
- Shopifyヘルプセンター（日本語） ー チェックアウト拡張機能のアップグレードガイド
- Shopify Japan公式ブログ ーチェックアウト拡張機能（Checkout Extensibility）への移行ガイド
チェックアウトカスタマイズを行っているマーチャントは、2024年8月13日までに「Checkout Extensibility」への移行を行う必要がありますが、Shopifyパートナーに頼らず、社内エンジニアが実装・保守しているマーチャントも多く存在しているかと思います。
今回は、社内でチェックアウトカスタマイズを実装・保守しているマーチャント向けに、「Checkout Extensibility」への移行方法をご紹介します。
1.「Checkout Extensibility」でどのようなカスタマイズができるかを知る
2. 実装しているカスタマイズ内容を洗い出す
3. 各カスタマイズがどの方法で実装できそうかを考える
4. 開発ストアを立ち上げて実装テストを行う
5. 本番ストアへ実装する
6. カスタムアプリ開発の手引き
1.「Checkout Extensibility」でどのようなカスタマイズができるかを知る
まずは、新しいカスタマイズ機構「Checkout Extensibility」でどのようなチェックアウトカスタマイズが可能であるかを知ることが重要です。
チェックアウト移行に関してよく出てくるワード「Checkout Extensibility」とは、そもそも何でしょうか。
「Checkout Extensibility」とは、下記の新しいカスタマイズ機構（2023/7現在）を用いて、チェックアウトページをカスタマイズすることの総称です。
【Checkout UI extensions】
チェックアウトページ内に独自のテキスト・画像・入力フォームなどを設置することができます。checkout.liquidでチェックアウトページ内に独自要素を表示させている場合は、Checkout UI extensionsを使って再現します。対応アプリをインストールして設定するか、カスタムアプリを開発することで実装できます。
【Post-purchase checkout extensions】
注文完了ページ内に独自のテキスト・画像・入力フォームなどを設置することができます。checkout.liquidで注文完了ページ内に独自要素を表示させている場合は、Checkout UI extensionsを使って再現します。対応アプリをインストールして設定するか、カスタムアプリを開発することで実装できます。
【Branding API】
チェックアウトページの背景色やフォントを変更したり、見た目をカスタマイズすることができます。checkout.liquidにCSSを書いている場合は、Branding APIを使って再現します。管理画面から手動で設定が可能です。
【Shopify Functions】
チェックアウトページ内で顧客情報や配送先住所、カート内商品などを条件として、配送・決済方法の出し分けやチェックアウトの進行をブロックすることができます。Script Editorを使って、条件によって配送・決済方法の出し分けをしている場合には、Shopify Functionsを使って再現します。対応アプリをインストールして設定するか、カスタムアプリを開発することで実装できます。
【Web pixels】
Googleアナリティクスなどの追跡・解析ツールを使用するためのタグを挿入できます。checkout.liquidに追跡・解析ツールのタグを入れている場合は、Web pixelを使って再現します。対象タグを管理画面から設定するか、対応アプリをインストールして設定します。
※できないこと
チェックアウトページ内に表示されているデフォルトの要素を強制的に変更したり、非表示にすることはできません。
これらを使用してカスタマイズ内容を再現（移行）していくことになります。
なお、現在運用中のストアでこれらを使用して移行を行うには、checkout.liquidをデフォルトに戻した上でShopify Plusサポートに連絡しストア設定を変更してもらう必要があります。
2.実装しているカスタマイズ内容を洗い出す
実際にカスタマイズ内容を再現（移行）するには、現在のカスタマイズ内容を洗い出す必要があります。余裕があれば、移行すべき内容であるかを精査したり、追加で実装したい内容も考えてみるとよいでしょう。「Checkout Extensibility」では従来の方法（checkout.liquid／Script Editor）と比べ、より独自性の高いカスタマイズが可能になっています。
本記事では、サンプルとして以下のカスタマイズを実装しているものとして進めていきます。
(1)【checkout.liquid】背景色を変更するCSSを書いている
(2)【checkout.liquid】GAタグを入れている
(3)【checkout.liquid】独自の注釈テキストを表示するHTMLもしくはJavaScriptを書いている
(4)【checkout.liquid】デフォルトで表示される入力フォームを強制的に非表示にするJavaScriptを書いている
(5)【Script Editor】購入者が会員であれば、配送方法選択ページ（チェックアウト-2ページ目）で「送料無料」以外の配送方法を非表示にしている
3.各カスタマイズがどの方法で実装できそうかを考える
次に、2で洗い出した各カスタマイズが、1で紹介したどの方法で実装できるか考えてみましょう。
サンプルでは、以下の方法で実装可能であることが想定されます。（または実装不可）
(1)【checkout.liquid】背景色を変更するCSSを書いてる
→見た目を変更するCSSなので、Branding APIで実装
(2)【checkout.liquid】GAタグを入れている
→分析・解析ツールに関するJavaScriptタグなので、Web pixelsで実装
(3)【checkout.liquid】独自の注釈テキストを表示するHTMLもしくはJavaScriptを書いている
→独自要素の表示なので、Checkout UI extensionsで実装（対応しているアプリを探すか、カスタムアプリを開発）
(4)【checkout.liquid】デフォルトで表示される入力フォームを強制的に非表示にするJavaScriptを書いている
→デフォルト要素の変更はできないため実装不可
(5)【Script Editor】購入者が会員であれば、配送方法選択ページ（チェックアウト-2ページ目）で「送料無料」以外の配送方法を非表示にしている
→バックエンドのカスタマイズはShopify Functionsで実装（対応しているアプリを探すか、カスタムアプリを開発）
4.開発ストアを立ち上げて実装テストを行う
各カスタマイズを洗い出し、それらの移行方法を想定したら、実装可能かどうかをテストしましょう。
パートナー管理画面を既に持っていれば、開発ストアを作成します。ストア作成の際は、開発者プレビューで「Checkout Extensibility」を選択してください。
パートナー管理画面を持っていない場合は、この機会に作成することをおすすめします。運用中のストアを紐付けることができるので、開発ストアと合わせて管理することができます。また、カスタムアプリを開発する場合にもパートナー管理画面が必要になります。
開発ストアが作成できたら、実装可能と想定される以下4つのカスタマイズを実装・テストしていきましょう。
(1)【checkout.liquid】背景色を変更するCSSを書いている
(2)【checkout.liquid】GAタグを入れている
(3)【checkout.liquid】独自の注釈テキストを表示するHTMLもしくはJavaScriptを書いている
(5)【Script Editor】購入者が会員であれば送料無料にしている
また、実装不可と想定された「(4)【checkout.liquid】デフォルトで表示される入力フォームを強制的に非表示にするJavaScriptを書いている」のカスタマイズについても、代替案を考える必要があります。
(1)【checkout.liquid】背景色を変更するCSSを書いてる
見た目を変更するCSSなので、Branding APIで実装します。
Branding APIは、管理画面から手動で設定ができます。
設定＞チェックアウト＞チェックアウトエディタに移動
をクリックします。
チェックアウトエディタが開いたら、ペンキのアイコンをクリックします。
「背景色」の項目にてカラーを選択して、背景色を変更することができました。
背景色の他、ロゴの設置やフォント変更などが可能ですが、より細い設定を行うには、設定値をJSON形式に整え、アプリ「Shopify GraphiQL」を通して実行する必要があります。（2023/7現在）
［参考］shopify.dev - checkoutBrandingUpsert
(2)【checkout.liquid】GAタグを入れている
分析・解析ツールに関するJavaScriptタグなので、Web pixelsで実装します。
Web pixelsも管理画面から設定が可能です。
設定＞お客様のイベント＞カスタムピクセルを追加
をクリックします。
対象タグを挿入し、「保存」と「連携」をクリックします。
Shopify側で設定ができたら、分析・解析ツールの管理画面側で計測ができているか確認しましょう。
※動作についてはShopifyサポート対象外となっています。
［参考］Shopifyヘルプセンター - ピクセルを移行する
(3)【checkout.liquid】独自の注釈テキストを表示するHTMLもしくはJavaScriptを書いている
独自要素の表示なので、Checkout UI extensionsで実装（対応しているアプリを探すか、カスタムアプリを開発）します。
例えば、checkout.liquidで配送先住所入力ページ（チェックアウト-1ページ目）上に、注釈テキストを表示しているとします。
サンプルでは、独自のテキストを表示できるアプリを使用して再現してみました。
【使用アプリ】
Checkout Buddy - FREEプラン
サンプルのように、シンプルなテキスト表示であれば無料で利用可能なアプリもありますが、テキストの一部をリンクにしたり、アイコンも表示したいといった、より独自性のある表示をしたい場合で、有料アプリを使用したくない場合は、カスタムアプリの開発をおすすめします。
カスタムアプリ開発の手引きについては本記事の6をご参照ください。
アプリストアで探す場合は、絞り込み項目「チェックアウトのカスタマイズ」にチェックを入れると良いでしょう。
(5)【Script Editor】購入者が会員であれば送料無料にしている
バックエンドのカスタマイズはShopify Functionsで実装（対応しているアプリを探すか、カスタムアプリを開発）します。
例えば、Script Editorを使用して、購入者が会員（ログインしている状態）であれば、配送方法選択ページ（チェックアウト-2ページ目）にて、「送料無料」以外の配送方法を非表示にしているとします。
↓
本記事の執筆時には、開発ストアにインストールして試せるアプリが見つからなかったため、カスタムアプリを開発して再現してみました。
カスタムアプリ開発の手引きについては本記事の6をご参照ください。
5.本番ストアへ実装する
各カスタマイズの実装テストが完了したら、いよいよ本番ストアへの反映準備です。
本記事の1にも記載しましたが、本番ストアで「Checkout Extensibility」でカスタマイズした内容を実装するには、checkout.liquidをデフォルトに戻した上でShopify Plusサポートに連絡し、ストアの設定を変更してもらう必要があります。checkout.liquidをデフォルトに戻すと、既存のチェックアウトカスタマイズが機能しなくなるため、その状態でストアをオープンしておくことは難しいと考えられます。そのため、移行作業中はストアをメンテナンスにしておくことが望ましいでしょう。
事前準備、移行当日作業はざっくり以下のような流れになります。
［事前準備］
- 移行日時の候補出し〜決定
- Shopify Plusサポートに日時を連絡（必要に応じて日時調整）
- メンテナンス告知のテキストやフロントページの準備
- 導入予定のアプリをインストールしておく
［移行当日作業］
- ストアをメンテナンスにする
- checkout.liquidをデフォルトに戻す
- Shopify Plusサポートに連絡〜Shopify側でストアの設定変更、連絡を待つ
- Script Editorのカスタマイズを非アクティブにする
- 各カスタマイズの実装、アプリ設定、テスト実施
- 問題がなければストアのメンテナンスを解除する
当日慌てないためにも、各カスタマイズ内容に合わせて作業手順書を作成したり、切り戻し時の対応を考えておくことをおすすめします。
6.カスタムアプリ開発の手引き
Checkout UI extensions・Shopify Functionsで実装するカスタマイズは、アプリストアにあるアプリを使用するかカスタムアプリを開発することになります。
checkout.liquid・Script Editorで実装しているカスタマイズ内容を再現できるアプリがあれば、工数をかけずに実装することができますが、なかった場合や費用と見合わない場合は、カスタムアプリを開発することで解決できるでしょう。
プライベートアプリやカスタムアプリを開発したことがないマーチャントからすると、アプリ開発は大変という印象を持たれるかも知れませんが、Checkout UI extensions・Shopify Functionsでフロント機能をピンポイント的に開発する（※）分には工数は多くかからず、サーバーの用意も不要です。
※アプリ側の管理画面は開発せず、チェックアウトページ内で機能する動作のみをアプリソースコード内に直書きする。
checkout.liquid・Script Editorでチェックアウトカスタマイズを行う場合、ソースコードを書くのみですが、それに近い感覚で開発することが可能です。
上記条件でカスタムアプリを開発する場合、下記の事前準備が必要になります。
- パートナー管理画面の作成
- 開発ストア（Checkout Extensibilityプレビュー）の作成
- ローカル環境を整える
［参考］shopify.dev - Create an app > Requirements
開発手順の詳細はShopify公式リファレンスサイトの下記ページをご参照ください。
■Checkout UI extensionsの場合
・ベースアプリの作成〜開発ストアにインストール
［参考］shopify.dev - Create an app > Step 1: Create a new app 〜 Step 3: Install your app on your development store
・Checkout UI extensions 開発手順
［参考］shopify.dev - Getting started with custom fields > Step 1: Create a UI extension
・チェックアウトページ内の要素表示可能位置について
［参考］shopify.dev - Checkout UI extensions > Extension points
・表示可能な要素一覧
［参考］shopify.dev - All Checkout UI extensions components
■Shopify Functionsの場合
・ベースアプリの作成〜開発ストアにインストール
［参考］shopify.dev - Create an app > Step 1: Create a new app 〜 Step 3: Install your app on your development store
・割引関連のカスタマイズ 開発手順
［参考］shopify.dev - Getting started with building a discounts experience > Step 1: Create the product discount function
・配送関連のカスタマイズ 開発手順
［参考］shopify.dev - Getting started with building delivery customizations > Step 1: Create the delivery customization function
・決済関連のカスタマイズ 開発手順
今回は、社内でチェックアウトカスタマイズを実装・保守しているマーチャント向けに、「Checkout Extensibility」への移行方法をご紹介しました。
本記事をお読みいただいても自社での実施が難しいと考えられる場合は、弊社で提供している「Checkout Extensibility」への移行支援サービス を是非ご検討くださいませ。コストや期間と相談しながらの対応が可能で、運用に合わせた最善の実装方法をご提案させていただいております。
