アプリでチェックアウトとお客様アカウントをカスタマイズする
ブロックを使用することで、チェックアウトの設定、サンキューページと注文状況ページ、お客様の注文ページとプロフィールページなど、チェックアウトページとお客様アカウントページをカスタマイズできます。アプリ開発者と Shopify パートナーはアプリを構築し、Shopify App Storeで公開します。チェックアウトやお客様アカウントに対応した一般公開アプリのインストール、開発者とのカスタムアプリの作成、Shopify パートナーへの依頼などが可能です。
管理画面にアプリをインストールした後、チェックアウトとアカウントのエディタを使用して、サポートされているページにそのアプリを追加できます。一部のブロックは、ページの特定のエリアにのみ追加できます。
このページの内容
アプリの利用要件
サンキューページや注文状況ページなど、チェックアウトとお客様アカウントをカスタマイズする一部のアプリは、Basic Shopifyプラン以上のプランを利用しているビジネスで利用できます。下書き注文からのチェックアウトなど、チェックアウトの情報、配送、決済の各ページをカスタマイズするアプリは、Shopify Plusでのみ利用できます。
| アプリの種類 | Basic Shopifyプラン以上 | Shopify Plus |
|---|---|---|
| web pixelアプリ拡張機能を使用して構築されたアプリ | ✔ | ✔ |
| 購入後アプリ拡張機能を使用して構築されたアプリ | ✔ | ✔ |
| Shopify Functionsを使用して構築された公開アプリ | ✔ | ✔ |
| Shopify Functionsを使用して構築されたカスタムアプリ | ✘ | ✔ |
| サンキューページと注文状況ページ用のUI拡張機能を使用して構築されたアプリ | ✔ | ✔ |
| すべてのお客様アカウントページ用のUI拡張機能を使用して構築されたアプリ | ✔ | ✔ |
| 情報、配送、決済の各ページ用のUI拡張機能を使用して構築されたアプリ | ✘ | ✔ |
| Checkout Blocks:UI拡張機能と Shopify Functionsでチェックアウトをカスタマイズするための無料アプリ | ✔ (一部の機能制限あり) | ✔ |
アプリをインストールする
チェックアウト、お客様アカウント、サンキューページ、注文状況の各ページに追加したい機能がある場合は、それらの機能を提供できるアプリを探してください。アプリ開発者や Shopify パートナーにカスタムアプリの構築を依頼することも、Shopify App Storeからチェックアウトまたはお客様アカウントをカスタマイズするための外部アプリをインストールすることもできます。
手順:
- Shopify App Storeに移動し、ビジネスに合ったチェックアウトアプリを検索します。
- [アプリを追加] をクリックします。
- [アプリをインストール] をクリックします。
アプリをインストールした後、チェックアウトとアカウントのエディタを使用してページにアプリを追加する必要があります。
チェックアウトとアカウントのエディタでアプリのサイドバーを使用する
チェックアウトとアカウントのエディタにある [アプリ] サイドバーでは、利用可能およびインストール済みのブロックの概要にアクセスできます。このサイドバーは [すべて] タブと [追加済み] タブに分かれています。[すべて] タブにはチェックアウトページとアカウントページに追加できる利用可能なブロックが、[追加済み] タブにはすでに追加したブロックが一覧表示されます。
[ブロックを検索] 検索バーを使用すると、すべてのページにある、利用可能なすべてのブロックとブロックコレクションを検索できます。
[すべて] タブ
[すべて] タブには、インストール済みアプリの利用可能なすべてのブロックが一覧表示されます。このタブから、関連するチェックアウトページとアカウントページにブロックを直接追加できます。
利用可能なすべてのブロックは、そのブロックの提供元であるアプリの名前の下に表示されます。1つのアプリが複数種類のブロックを提供している場合、ブロックは「ロイヤルティポイント」や「ウィッシュリスト管理」など、関連するブロックをグループ化したコレクションで表示されることがあります。1つのアプリからグループ化されたブロックは連携して機能するように意図されていることが多いため、ブロックコレクション内のすべてのブロックを追加して、お客様に完全なエクスペリエンスを提供することを検討してください。コレクションの各ブロックは、必要に応じて設定できるように、個別に追加する必要があります。
ブロックをページに追加すると、ブロック名の横に ✓ が表示されます。チェックアウトの設定にブロックが複数回追加されている場合、設定に含まれる回数を表す数字が表示されます。ブロックを1回しか追加できない場合は、ブロックが配置された後、ブロックを追加するオプションが無効になります。
[追加済み] タブ
[追加済み] タブには、チェックアウトとアカウントの設定の少なくとも1か所に存在する、インストール済みのすべてのブロックが一覧表示されます。追加済みのすべてのブロックは、そのブロックの提供元であるアプリの名前の下に表示されます。一覧表示されたブロックには、そのブロックが追加されているページも表示されます。
ブロックをクリックすると、ブロックの設定にアクセスできます。
インストール済みアプリのブロックを追加する
アプリをインストールした後、チェックアウトとアカウントのエディタを使用して、ブロックとしてページにアプリを追加できます。一部のアプリは、設定の特定のエリアにのみ追加できます。ハイライト表示されたエリアごとに、最大3個のアプリを追加できます。
[セクション] サイドバーまたは [アプリ] サイドバーを使用して、ページのセクションに既存のブロックを直接追加できます。
「セクション」サイドバーを使用してブロックを追加する
[セクション] サイドバーを使用して、インストール済みのアプリのブロックを現在表示しているページに追加できます。ページやセクションにインストールできるブロックのみが、選択可能なオプションとして表示されます。
手順:
デスクトップ
管理画面から、[設定] > [チェックアウト] に移動します。
構成セクションで、カスタマイズする構成の横にある 編集 をクリックします。
チェックアウトとお客様アカウントのエディタで、アプリを追加するページを選択し、
をクリックして [セクション] サイドバーにアクセスします。
アプリを追加するセクションで、[⊕ ブロックを追加] をクリックします。
追加するブロックをクリックします。
必要に応じて、ブロックをカスタマイズします。
- ブロックのロケーションを再配置するには、[セクション] リストでブロックを上下にドラッグ&ドロップするか、プレビューウィンドウの移動ボタンを使用します。
- ブロックをクリックして ブロックの設定を行います。
[保存] をクリックします。
モバイル
Shopify アプリから、
をタップし、
設定をタップします。
[ストア設定] セクションで、[チェックアウト] をタップします。
[設定] セクションで、カスタマイズするチェックアウト設定にある [カスタマイズ] をタップします。
チェックアウトとお客様アカウントのエディタで、アプリを追加するページを選択してから、[セクション] をタップします。
アプリを追加するセクションで、[⊕ ブロックを追加] をタップします。
追加するブロックをタップします。
必要に応じて、ブロックをカスタマイズします。
- ブロックのロケーションを再配置するには、[セクション] リストでブロックを上下にドラッグ&ドロップするか、プレビューウィンドウの移動ボタンを使用します。
- ブロックをタップして ブロックの設定を行います。
[保存] または [✓] をタップします。
「アプリ」サイドバーを使用してブロックを追加する
[アプリ] サイドバーを使用して、インストール済みのアプリのブロックを現在表示しているページに追加できます。ブロックを追加する際に、特定のブロックをインストールできるページのみがオプションとして表示されます。
チェックアウトとお客様アカウントのエディタでアプリサイドバーを使用する方法について、詳しくはこちら。
手順:
デスクトップ
管理画面から、[設定] > [チェックアウト] に移動します。
構成セクションで、カスタマイズする構成の横にある 編集 をクリックします。
チェックアウトとお客様アカウントのエディタで、
をクリックして [アプリ] サイドバーにアクセスします。
追加するブロックの横にある [⊕] をクリックします。
[追加先] ポップアウトで、ブロックを追加するページをクリックします。
必要に応じて、ブロックをカスタマイズします。
- ブロックのロケーションを再配置するには、プレビューウィンドウの移動ボタンを使用します。
- ブロックの設定を構成します。
[保存] をクリックします。
モバイル
Shopify アプリから、
をタップし、
設定をタップします。
[ストア設定] セクションで、[チェックアウト] をタップします。
[設定] セクションで、カスタマイズするチェックアウト設定にある [カスタマイズ] をタップします。
チェックアウトとお客様アカウントのエディタで、[アプリ] をタップします。
追加するブロックの横にある [⊕] をタップします。
[追加先] ポップアウトで、ブロックを追加するページをタップします。
必要に応じて、ブロックをカスタマイズします。
- ブロックのロケーションを再配置するには、プレビューウィンドウの移動ボタンを使用します。
- ブロックの設定を構成します。
[保存] または [✓] をタップします。
アプリの移動と配置
特定のページのブロック内にアプリを移動して配置できます。一部のアプリは、ページの特定のエリアにのみ配置できます。アプリをドラッグ&ドロップしようとすると、利用できないエリアはグレー表示されます。
手順:
管理画面から、[設定] > [チェックアウト] に移動します。
構成セクションで、カスタマイズする構成の横にある 編集 をクリックします。
移動するアプリを見つけます。
アプリの横にある [⠿] アイコンをクリック&ドラッグし、アプリを別のエリアに移動します。
[保存] をクリックします。
ブロックを使用してお客様アカウントにページを追加する
一部のアプリには、お客様アカウントのヘッダーに新しいページを追加できるブロックがあります。たとえば、ウィッシュリストアプリでは、お客様アカウントに新しいウィッシュリストページを追加できるブロックが提供される場合があります。
チェックアウトとお客様アカウントのエディタにある [アプリ] サイドバーから、アプリページを作成できます。一部のアプリページはダイレクトリンクに対応しており、チェックアウトとお客様アカウントのエディタ、または管理画面の [メニュー] ページから、お客様アカウントメニューにページをリンクできます。
新しいページを追加すると、そのページには、[アプリ] サイドバーの [追加済み] タブ、またはチェックアウトとお客様アカウントのエディタのページセレクターメニューからアクセスできます。
手順:
管理画面から、[設定] > [チェックアウト] に移動します。
[設定] セクションで、カスタマイズするチェックアウト設定の横にある [カスタマイズ] をクリックします。
[アプリ]
セクションで、ページを作成するアプリを見つけます。
[+] アイコンをクリックし、[ページの追加先] セクションで [アカウント] をクリックします。
[ブロック] 設定で、アプリの設定を構成します。
[保存] をクリックします。
任意:お客様アカウントメニューにお客様にアプリページを表示するには、[メニューに追加] をクリックします。[お客様アカウントのメインメニュー] ダイアログで、以下の操作を行います。
- チェックアウトとアカウントのエディタから自動入力される [ラベル] と [リンク] を確認します。リンクの名前を変更する場合は、[ラベル] フィールドを更新します**。
- 任意:[お客様アカウントのメインメニュー] に追加する他のメニュー項目を追加します。
- [保存] をクリックします。
アプリを構成する
アプリの設定はカスタマイズできます。各アプリには、カスタマイズ可能な独自の設定があります。アプリの設定は、アプリを作成した開発者またはパートナーによって定義されます。独自の開発チームがある場合は、自分でカスタマイズできるようにする設定を指定できます。
たとえば、カスタムバナーを作成できるアプリを使用する場合、バナーのタイトル、説明、ステータスをカスタマイズできます。
手順:
管理画面から、[設定] > [チェックアウト] に移動します。
構成セクションで、カスタマイズする構成の横にある 編集 をクリックします。
構成するアプリをクリックします。
アプリの設定をカスタマイズします。
[保存] をクリックします。
アプリの動作コントロールの管理
アプリを構成する際に、アプリの動作コントロールも管理できます。これらのコントロールを使用すると、以下の動作を管理できます。
- アプリがチェックアウトをブロックすることを許可する
- 簡単なチェックアウトにアプリを含める
- 簡単なチェックアウトや、アカウントを持つお客様がログインしている場合など、保存済みの情報が表示される場合に、セクションを自動で展開してアプリを表示します
設定しているアプリや、アプリが配置されているチェックアウトのセクションによっては、一部のコントロールを利用できない場合があります。
アプリによるチェックアウトのブロックを許可する
お客様がアプリ内で不完全な情報や無効な情報を提供した場合に、チェックアウトをブロックして注文を拒否するかどうかを選択できます。
例えば、お客様が選択する必要のあるチェックボックスをチェックアウトに追加するアプリがあるとします。このアプリにチェックアウトのブロックを許可していて、お客様がこのチェックボックスを選択しない場合、その注文は自動的に拒否されます。
手順:
管理画面から、[設定] > [チェックアウト] に移動します。
構成セクションで、カスタマイズする構成の横にある 編集 をクリックします。
構成するアプリをクリックします。
右側のサイドバーにある「チェックアウトの動作」セクションで、「アプリにチェックアウトのブロックを許可する」を選択します。
「アプリにチェックアウトのブロックを許可する」をクリックします。
[保存] をクリックします。
簡単なチェックアウトにアプリを含める
Shop Pay などの 簡単なチェックアウトにアプリを含めるかどうかを選択できます。また、簡単なチェックアウトにおいて、折りたたまれたセクションをアプリで強制的に自動展開させることもできます。
手順:
管理画面から、[設定] > [チェックアウト] に移動します。
構成セクションで、カスタマイズする構成の横にある 編集 をクリックします。
構成するアプリをクリックします。
「チェックアウトの動作」セクションで、「簡単なチェックアウトにアプリを含める」を選択します。
オプション:閉じているセクションを展開するには、「セクションを自動で展開してアプリを表示する」を選択します。
[保存] をクリックします。
オプション:ストアで簡単なチェックアウトがどのように表示されるかをプレビューするには、チェックアウトエディタの右上隅にある
をクリックします。
チェックアウトの購入後ページに機能を追加する
購入後アプリを使用すると、お客様アンケートやアップセルオファーなどの機能をお客様のチェックアウト体験に追加できます。これらのアプリは、お客様が決済を完了した後、注文確認ページが表示されるまでの間にコンテンツを追加します。
購入後ページに機能を追加するには、チェックアウトアプリをインストールして設定し、その後チェックアウト設定で購入後ページで使用するアプリを選択する必要があります。
購入後の機能を追加するために使用できるチェックアウトアプリは、一度に 1 つだけです。購入後の機能を持つアプリを複数インストールしている場合は、チェックアウト設定で使用するアプリを選択できます。
購入後の機能を追加するためにチェックアウトアプリをインストールする
購入後ページに機能を追加するには、チェックアウトで購入後の機能に対応している外部アプリを使用する必要があります。
外部アプリに関するサポートが必要な場合は、アプリの開発者に問い合わせる必要があります。
手順:
- Shopify App Store に移動し、ビジネスに適した購入後アプリを検索します。
- 「アプリを追加」をクリックします。Shopifyアカウントにログインしていない場合は、ログインを求められます。
- [アプリをインストール] をクリックします。
- 管理画面の「アプリ」セクションに移動し、チェックアウトアプリの名前をタップします。
- 必要な設定を入力します。
購入後ページで使用するアプリを選択する
チェックアウトアプリをインストールして設定した後、チェックアウト設定で購入後ページで使用するそのアプリを選択する必要があります。
チェックアウト設定で使用するアプリを変更することもできます。
手順:
管理画面から、[設定] > [チェックアウト] に移動します。
「購入後ページ」セクションで、使用するチェックアウトアプリを選択します。
アプリを削除する
チェックアウトからアプリを削除できます。管理画面からアプリを完全に削除する場合は、アプリをアンインストールする必要があります。
手順:
管理画面から、[設定] > [チェックアウト] に移動します。
構成セクションで、カスタマイズする構成の横にある 編集 をクリックします。
チェックアウトから削除するアプリをクリックします。
「ブロックを削除」をクリックします。
[保存] をクリックします。