Checkout Blocks を使用したチェックアウトのカスタマイズ用ブロックの概要

UI拡張機能を使用して構築された Checkout Blocks アプリのブロックは、チェックアウトとアカウントのエディタに直接ドラッグ&ドロップできるブロックを提供することで、チェックアウトのカスタマイズに役立ちます。一部のブロックタイプでは、情報バナーや警告バナー、項目メッセージなどの視覚的なカスタマイズ要素をチェックアウトに追加できます。その他のブロックタイプでは、項目のバリエーションセレクターや数量セレクター、お客様が追加情報を選択または入力するためのチェックボックスやテキストフィールドなど、インタラクティブな要素をチェックアウトに追加できます。

Checkout Blocks は、ブロックタイプごとに最大 30 個のアクティブなブロックをサポートしています。カスタムフィールド、動的コンテンツブロック、その他のタイプのブロックを、一度に最大 30 個まで設定できます。30 個を超えるブロックを作成することもできますが、チェックアウトに表示されるのは、最初のアクティブな 30 個のブロックのみです。

チェックアウトに表示されるブロックは、ブロックに適用した表示ルールブロックの優先順位、および特定のロケーションに特定のブロックを常に表示するためにブロック IDが使用されているかどうかによって決まります。

Checkout Blocksで利用可能なブロック

Checkout Blocksは、複数種類のブロックをサポートしています。ブロックの種類は、チェックアウトに追加するコンテンツの種類、条件付きの表示ルールを追加するかどうか、ブロックを追加するページによって異なります。

ブロック自体の機能が理由で、特定のチェックアウトページに追加できないブロックもあります。たとえば、カスタムフィールドブロックでは、お客様がカスタムメモの追加やチェックボックスのオン/オフなどの追加情報を入力する必要があります。この情報は注文が完了する前に取得する必要があるため、カスタムフィールドは、サンキューページや注文状況ページなどの購入後ページに追加することはできません。

Checkout Blocks で利用できるブロックと、それらがサポートされているチェックアウトページ、および各ブロックの簡単な説明を記載した表です。
ブロックサポートされているページ説明
住所ブロッカー
  • チェックアウト
住所形式のルールに基づいて、チェックアウトをブロックします。
カスタムフィールド
  • チェックアウト
利用規約への同意チェックボックスやギフトメッセージフィールドなど、チェックアウトにカスタムフィールドを含めます。
動的コンテンツ
  • チェックアウト
  • サンキューページ
  • 注文状況ページ
設定した条件ルールに基づいて、テキスト、バナー、ボタンなどのコンテンツを表示します。

このブロックは、Basic Shopify 以上のプランをご利用のマーチャントが利用可能であり、サンキューページおよび注文状況ページにのみ配置できます。チェックアウトページへの配置には Shopify Plus が必要です。
項目編集
  • チェックアウト
  • サンキューページ
  • 注文状況ページ
お客様が、チェックアウトの注文サマリーで、バリエーションや数量セレクターを含めて項目を編集できるようにします。また、項目コンテンツのコンテナとしても機能します。
項目コンテンツ
  • チェックアウト
  • サンキューページ
  • 注文状況ページ
最終セールなど、項目固有のメッセージを表示します。
発送と決済のアイコン
  • チェックアウト
サポートされている発送方法と決済方法のアイコンを表示します。
静的コンテンツ
  • チェックアウト
  • サンキューページ
  • 注文状況ページ
動的コンテンツブロックとは異なり、このコンテンツはすべてのお客様に表示され、テキストとバナーをサポートします。

このブロックは、Basic Shopify 以上のプランをご利用のマーチャントが利用可能であり、サンキューページおよび注文状況ページにのみ配置できます。チェックアウトページへの配置には Shopify Plus が必要です。

ブロックの作成について、詳しくはこちらをご覧ください。

ブロックの分析

アクティブなすべてのブロックには、Checkout Blocksアプリのブロック詳細ページ上部に表示される表示回数の分析があります。この分析では、チェックアウトでブロックが表示された回数を追跡します。

デフォルトでは、ブロックには今日の分析が表示されますが、日付のドロップダウンメニューをクリックして日付セレクターを使用すると、特定の日または期間の分析を確認できます。

ブロックの分析をリセットするには、Vertical menu > 分析をリセットをクリックします。この操作は元に戻すことはできません。

ブロックの表示ルール

動的コンテンツブロックやカスタムフィールドブロックなど、多くのブロックタイプでは、チェックアウトブロックをチェックアウトで表示するために満たすべき状況を定義する条件を設定できます。ブロックごとに複数の表示ルールを設定でき、ブロックを表示するためにすべてのルールを満たす必要があるか、いずれかのルールを満たすだけでよいかを定義することもできます。

表示ルールの構文は、作成するブロックの種類によって異なりますが、一般的に、ルールは該当する場合、以下の要素を順番に使用して作成されます。

  1. 商品タイプカートの合計などのルールのカテゴリー。
  2. 次の値に等しい次の値に等しくない次の値より大きい次の値を含む次の値で終わるなどの論理演算子。
  3. ドレス50.00など、希望の特定の値を定義するパラメーター。

たとえば、購入額の多いお客様にアカウントの作成を促すバナーを表示するには、以下の表示ルールでブロックを作成できます。

  • 次の場合にのみ表示: すべてのルールが一致
  • カートの合計 > 次の値以上 > 米ドル > 100.00
  • お客様はログイン済み > いいえ

この一連の表示ルールによると、お客様が 100 米ドル以上を費やし、お客様アカウントにまだログインしていない場合にのみ、バナーが表示されます。お客様がログインしている場合、またはお客様がしきい値の 100 米ドルまで費やしていない場合、バナーは表示されません。

ブロック ID

カスタムフィールド動的コンテンツなどの一部のブロックタイプには、ブロック ID を指定するオプションがあります。デフォルトでは、ブロック ID 0 が選択されています。

ブロック IDを使用すると、同じタイプの異なるブロックを、チェックアウトのさまざまなセクションに追加できます。エディタのチェックアウトブロックは、ブロック内で設定した表示ルールに応じて、複数のブロックを読み込めるプレースホルダーと考えることができます。各チェックアウトページには、最大 10 個の異なるブロックの「プレースホルダー」を追加できます。

例1:異なるブロック ID を使用して、同じ種類の異なるブロックに対して異なるロケーションを指定する

メインコンテンツエリアに必須のチェックボックスを表示し、サイドバーに任意のギフトメモを表示するとします。これらのブロックはどちらもカスタムフィールドブロックタイプを使用するため、チェックアウトとアカウントのエディタでカスタムフィールドブロックを2回追加し、各ブロックを表示したい場所に配置できます。しかし、どの場所にどのブロックを配置するかを設定できる必要があります。

必須のチェックボックスにはブロック ID を 1、任意のギフトメモにはブロック ID を 2 に設定できます。次に、チェックアウトとアカウントのエディタで、メインコンテンツエリアのカスタムフィールドブロックにブロック ID 1 を設定して必須のチェックボックスを表示し、サイドバーのカスタムフィールドブロックにブロック ID 2 を設定して任意のギフトメモを表示します。

例 2:同じブロック ID を使用して、表示ルールが異なる同じタイプのブロックの単一のロケーションを指定します。

3 件の自動配送料割引を提供しています:

  • 25 米ドルを超える注文で 10% のディスカウント
  • 50 米ドルを超える注文で 25% のディスカウント
  • 100 米ドルを超える注文で無料配送

お客様が注文を完了する前にカートに商品を追加するよう促すため、チェックアウトの [配送方法] セクションに動的バナーを追加します。このバナーでは、お客様が達成に最も近い配送料ディスカウントに基づいて、カートにさらに商品を追加するよう促します。

6 のように、すべて同じブロック ID を持つ動的コンテンツブロックを 3 つ設定できます。

3つの動的コンテンツブロックの例と、それらに適用される表示ルールおよびコンテンツの表です。
ブロック名表示ルールバナーコンテンツ
配送ティア 1カートの合計金額 > 次の金額未満 > 25.00ドル「25 ドル以上のご利用で、カートの配送料が 10% 割引の対象になります。」
配送ティア 2カートの合計金額 > 次の金額未満 > 50.00ドル「50 ドル以上のご利用で、カートの配送料が 25% 割引の対象になります。」
配送ティア 3カートの合計 > 未満 > $100.00「100 ドル以上のご利用で、カートが無料配送の対象になります。」

[配送ティア 1] ブロックの 並べ替えの優先順位が最も高くなるように、また [配送ティア 3] ブロックの 並べ替えの優先順位が最も低くなるように設定してください。この場合、お客様の利用額が 25 米ドル未満のときは、厳密には 3 つのブロックすべての表示条件が満たされていますが、最も適切なメッセージを含むティア 1 のブロックが表示されます。お客様の利用額が 25 米ドルを超え 50 米ドル未満のときは、ティア 3 ブロックの条件も厳密には満たされていますが、より優先順位の高いティア 2 のブロックが表示されます。

最後に、チェックアウトとアカウントのエディタで、ブロック ID が 6 の動的コンテンツブロックを [配送料] セクションに 1 つ追加すると、作成した 3 つの動的コンテンツブロックのうち最も適切なものが、チェックアウト時にその「コンテナ」スペースに表示されます。お客様が 100 米ドル以上を利用した場合、ブロック ID が 6 の動的コンテンツブロックの表示ルールが満たされないため、チェックアウトのそのエリアには動的コンテンツは表示されません。