Shopifyチェックアウト拡張とは？アップセルなど解説

チェックアウトUI拡張とは

チェックアウトUI拡張は、アプリが提供し、Shopifyがチェックアウト内に表示するブロックです。Shopify独自のUIコンポーネントで作られているため、チェックアウトのブランディングを引き継ぎ、高速で安全なまま動きます。テーマのブロックと同じように、チェックアウトエディタで配置します。

拡張は、チェックアウトのテンプレートを直接編集する従来の方法に代わるものです。Shopifyはすべてのストアをこのモデル（チェックアウト拡張性）に移行しており、割引などのロジックにはShopify Functionsを組み合わせます。

表示できる場所

配置場所は2つのグループに分かれ、プランによって違いがあります。

• チェックアウト内：情報入力、配送、支払いの各ステップ。ここでの拡張はShopify Plusのストアで利用できます。
• チェックアウト後：サンクスページと注文状況ページ。ここでの拡張はすべてのプランで利用できます。

Plusでない場合は、サンクスページと注文状況ページがチェックアウト拡張を活用できる場所です。Shopifyのプラン条件は変わることがあるため、開発前に最新のチェックアウト拡張性のドキュメントでご自身のプランを確認してください。

よく作られるチェックアウトのブロック

• 購入後のアップセル（サンクスページ）：購買意欲が最も高いタイミングで関連商品を提案。
• 信頼と安心：返品ポリシー、配送の目安、安全な決済のバッジ。
• 配送メモやギフトメッセージを注文に保存。
• 注文状況ページのサポート：購入品に合わせたお手入れ方法、セットアップガイド、サポートへのリンク。
• アンケート：サンクスページで「どこで当店を知りましたか？」の1問。
• ポイント施策：この注文で獲得したポイントや、アカウント作成のお誘い。

開発者なしで作る方法

AppFlyでは、プロンプト欄の下のメニューでチェックアウトのブロックを選ぶか、「サンクスページに」と書いて、説明するだけです。

「お客様が購入した商品カテゴリーに合わせたお手入れガイドと、サポートページへのリンクを表示するサンクスページのブロック。」

コーディングエージェントがShopifyのチェックアウトコンポーネントで拡張を書き、登録し、ストアにインストールします。あとはチェックアウトエディタで配置し、テスト注文で確認し、チャットで改善します。手順の詳細はプログラミングなしでShopifyアプリを作る方法をご覧ください。

始める前に知っておきたいルール

• 拡張はサンドボックスで動く。 任意のスクリプトを挿入したり、チェックアウトのデザインを自由に変えたりはできず、Shopifyのコンポーネントを使います。これがチェックアウトを高速かつ安全に保っています。
• 軽く保つ。 支払いの瞬間には、競合する3つのメッセージより明確な1つの方が効果的です。
• ロジックはFunctionsで。 割引や配送ルールなど価格を変えたい場合は、UIブロックではなく割引関数などのShopify Functionを使います。AppFlyは割引ルールも作れます。

よくある質問

Shopify Plusなしでチェックアウトをカスタマイズできますか？

はい、サンクスページと注文状況ページなら可能です。これらのページではチェックアウトUI拡張がすべてのプランで使えます。情報入力、配送、支払いのステップでの拡張はShopify Plusの機能です。

チェックアウトUI拡張とShopify Functionの違いは？

チェックアウトUI拡張は、コンテンツのブロックやフォーム項目など、お客様の目に見えるものを追加します。Shopify Functionは、割引の計算方法など、Shopifyが実行するロジックを変更します。

Shopifyのサンクスページにアップセルを追加するには？

サンクスページ向けのチェックアウト拡張を提供するアプリを使い、チェックアウトエディタでブロックを配置します。AppFlyなら、アップセルの内容を説明するだけでストア専用の拡張が作られます。