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