Checkout Extensibilityに関するよくある質問

[JasonH]

2023年2月、Shopifyはcheckout.liquidを廃止し、Checkout Extensibilityに移行することを発表いたしました。この新しいチェックアウトの基盤は、より安全で、高いパフォーマンス性を備えており、問題なくアップグレードでき、アプリを使用してカスタマイズできます。

以下の期限を過ぎた古いcheckout.liquidのコードに依存し続けると、ビジネスに何らかの影響を与えるリスクが生じる可能性があります。

必須アップグレードのタイムライン

• 2024年8月13日ストアの情報ページ、配送ページ、決済ページのアップグレード期限。
• 2025年8月28日サンキューページと注文状況ページ (スクリプトタグおよび追加スクリプトを使用するアプリを含む) のアップグレード期限。

2024年8月13日の期限までに情報ページ、配送ページ、決済ページのアップグレードを完了しなかった場合、ストアにどのような影響が生じるかについては、2024年8月13日の期限を越してしまった場合の影響を参照してください。

円滑な移行に向けて、よくある質問を以下にまとめました。Shopifyの開発チームでは、新しいAPI、拡張ポイント、コンポーネントを使用したチェックアウト拡張機能によってサポートされるユースケースの拡大に取り組んでいます。

そこで今回は、現在の制約事項を列挙してご紹介いたします。マーチャントの皆さまにはご自身のユースケースをご投稿いただき、この新機能を最大限にご活用いただきたいと考えております。

目次

1. Checkout Extensibilityとcheckout.liquidの違い
2. チェックアウト拡張機能に既知の制約はありますか？
3. Checkout Extensibilityを使ってどんなカスタマイズができますか？
4. いくつかのユースケース (ヒートマップ、A/Bテストなど) がサポートされなくなったのはなぜですか？これら.  のユースケースが将来サポートされるようになる可能性はありますか？
5. Checkout Extensibilityでは、ディスカウントや注文サマリーなどの制御されている表示画面のアイテムを非表示または削除できますか？
6. Checkout Extensibilityにより、カスタムストアフロントを実装しているヘッドレスマーチャントにどのような影響がありますか？
7. カスタムピクセルを使ってYahoo 広告タグを設定するにはどうすればよいですか？
8. 利用率に応じて決済方法のブロックの順番を自動的に変更するにはどうすればよいですか？ 
9. Address ValidationはCheckout Extensibilityとどのように連動しますか？
10. お客様の住所に物理的な手紙またはカードを郵送する場合はどうすればよいですか？
11. Functionsやスクリプトで制御されているコンポーネントを、CSSを使って非表示/表示にできますか？
12. 下書き注文にDeliver Customization APIまたはPayment Customization APIを使用できますか？

 

1. Checkout Extensibilityとcheckout.liquidの違い

checkout.liquidは便利なツールですが、今後はShopify Checkoutのカスタマイズをより充実させる機能、Checkout Extensibilityに投資をしていきます。Checkout Extensibilityは、マーチャント、アプリ開発者、購入者の方々にとって多くのメリットを提供するものです。checkout.liquidと比較しても、以下のような利点があります。

• カスタマイズのしやすさ：チェックアウトを直接カスタマイズするための公開アプリをインストールして設定できるようになりました。これにより、一般的なユースケースに対応したカスタマイズの実装が容易になりました。

• Shop Payとの整合性：Checkout Extensibilityで構築されたチェックアウトのカスタマイズは、Shop Pay上でも機能するため、一貫した購入者体験が保証されます。

• 問題なくアップグレードされるカスタマイズ：Checkout Extensibilityで行ったカスタマイズでは、アップグレードの心配が無用です。checkout.liquidのように定期的なアップグレードを必要としないため、利用可能になると同時に、新しいチェックアウト機能にアクセスすることができます。パートナーが行ったcheckout.liquidのカスタマイズでは、アップグレードに伴い、機能しなくなったり、変更が必要になったりすることにも注意が必要です。

• ブランディングの自動継承：Checkout Extensibilityを使用して構築されたアプリは、コードの微調整や追加設定なしで自動的にブランディングを継承するため、カスタマイズがさらに迅速になります。

• 最適化されたパフォーマンスとセキュリティ：Checkout Extensibilityはカスタマイズコードをサンドボックス化することで、レンダリングパフォーマンスを最適化し、セキュリティを強化するように設計されています。つまり、アプリからのカスタマイズコードが、チェックアウトページの他の部分から分離されているということです。

• 開発者のためのパワフルなAPI：開発者が、パワフルなAPIを活用して、Shopify全体のデータにアクセスし、直接チェックアウトを変更できるようになりました。これにより、項目の編集、購入者による処理のブロック、チェックアウト時のカスタムデータの保存などが可能になります。

2. チェックアウト拡張機能に既知の制約はありますか？

答え： チェックアウト拡張機能には、既知の制約がいくつかあります。

• 拡張機能はサンドボックス化されているため、チェックアウトのメインページにHTML、Javascript、CSSを注入することはできません。メインページに表示されるコンテンツはすべて、チェックアウト拡張機能を使用して作成しなければなりません。

• 拡張機能UIは、Shopifyが提供するチェックアウトUIコンポーネントライブラリに含まれるコンポーネントのみを使用することができます。

• 拡張機能では、チェックアウトに新しいコンテンツを追加できますが、ほとんどのフィールドやセクションを置き換えることはできません。

• パフォーマンスとセキュリティの要件は、外部システムへの呼び出しなど、特定のタイプのAPIに適用されます。

3. Checkout Extensibilityを使ってどんなカスタマイズができますか？

答え：チェックアウト拡張機能は、現在checkout.liquidで可能なカスタマイズの多くをサポートしているだけでなく、より優れたパフォーマンス性と安定性を備えています。例をいくつか示します。

• 購入者に追加情報を尋ねる
• 購入者の情報を確認する
• カスタマイズされたメッセージや画像を追加する
• チェックアウトの流れの中で、無料のギフトの提供や商品のアップセルを行う

 

4. いくつかのユースケース (ヒートマップ、A/Bテストなど) がサポートされなくなったのはなぜですか？これらのユースケースが将来サポートされるようになる可能性はありますか？

答え： チェックアウトアプリ拡張機能は、チェックアウト内のアプリをスコープしたコンテキストで実行されます。checkout.liquid (DOM内の親要素上で動作) とは異なり、これらのアプリはサンドボックス環境で動作し、親DOMやチェックアウトページ上の他の要素に直接影響を与えることはできません。

ページ上の親DOMやその他の要素にアクセスする必要があるアプリ （ページ全体のユーザーアクションを可視化したり、アプリがUIの一部を引き継いだりするもの）は、チェックアウトアプリでは機能しません。今後、この機能がサポートされる予定はありません。

影響を受けるアプリの例は以下の通りです。

• ヒートマップ
• 訪問者の録画
• A/Bテスト
• パフォーマンスのモニタリング

 

5. Checkout Extensibilityでは、ディスカウントや注文サマリーなどの制御されている表示画面のアイテムを非表示または削除できますか？

答え：チェックアウトUI拡張機能を使えば、特定の拡張機能でチェックアウトに何かを追加することは可能ですが、ギフト用の請求書フィールドなど、何かを非表示または削除することはできません。

 

6. Checkout Extensibilityはカスタムストアフロントを実装しているヘッドレスマーチャントにどのような影響をもたらしますか？

答え： カスタムストアフロントは、チェックアウトUI拡張機能を最大限に活用して実装されるものですが、ヘッドレス以外のマーチャントとの違いはなく、ヘッドレス特有のブロッカーや課題はありません。むしろ、チェックアウトのカスタマイズをオンラインストアのテーマエディタからチャネルにとらわれないチェックアウトエディタに移行することで、カスタマイズ体験はより直感的になります。

 

7. カスタムピクセルを使ってYahoo 広告タグを設定するにはどうすればよいですか？

答え： Yahooのコンバージョンタグはピクセルと直接連動しない可能性があるため、Yahoo! 広告連携などのアプリを試してみることを検討してください。

 

8. 利用率に応じて決済方法のブロックの順番を自動的に変更するにはどうすればよいですか？ 

答え： 現時点では自動的なソリューションはありません。しかしながら、Qikifyのようなアプリを使って手動でブロックを編集することはできます。

 

9. Address ValidationはCheckout Extensibilityとどのように連動しますか？

答え： スマート配送先バリデーションのような既存のアプリやカスタムアプリをご利用ください。

   

 

10. お客様の住所に物理的な手紙またはカードを郵送する場合はどうすればよいですか？

答え： WMSと同期し、配送ラベルを適切に印刷できるテキストの数には限りがあります。次の手順を実行してください。

1. お客様アカウントを確認します

1. お客様アカウントが有効化されていることを確認します。
2. デフォルトの住所以外の住所に配送されるようになっているかを確認します

2. チェックボックスを表示します

1. お客様がデフォルトの住所と異なる住所への配送を希望している場合、チェックボックスを表示して、デフォルトの住所を更新するかを尋ねます。
2. チェックボックスにチェックが入っていない場合、デフォルトの住所は変更しません。

追加のオプションについては、こちらのアプリ (Addresyo Lock) の使用をご検討ください。  

 

11. Functionsやスクリプトで制御されているコンポーネントを、CSSを使って非表示/表示にできますか？

答え： いいえ、Checkout Extensibilityでは、Functionsやスクリプトで制御されているコンポーネントをCSSを使って非表示/表示にすることはできません。チェックアウトUI拡張機能はDOMにアクセスできないため、DOMノードを直接操作することはできません。たとえば、クーポンやギフトカードを使用して完全にカスタマイズされたポイントシステムを作成する場合、クーポンコードやギフトカードコードはチェックアウト時に表示され、現在のところ、これらを非表示にすることはできません。

 

12. 下書き注文にDeliver Customization APIまたはPayment Customization APIを使用できますか？

答え： 現在、Delivery Customization APIおよびPayment Customization APIは、Checkout Extensibilityでの下書き注文をサポートしていません。