Checkout Blocks を使用した、よくあるチェックアウトのカスタマイズ
Checkout Blocks を使用すると、さまざまな方法でチェックアウトをカスタマイズできます。このページでは、Checkout Blocks を使用した、よくあるチェックアウトのカスタマイズの簡単なガイドをいくつか紹介します。
このページの内容
特定のカート金額に応じた配送料ディスカウントティアの作成
「50ドルを超える注文で配送料 50% オフ」や「100ドルを超える注文で配送料無料」などの配送料ディスカウントティアを作成する場合、カートの小計ルールに基づいて、複数の自動配送料ディスカウントを作成できます。複数のディスカウントの基準を満たすチェックアウトには、割引率が最も高い配送料ディスカウントが適用されます。
手順:
Shopify 管理画面から、[アプリ] > Checkout Blocks に移動します。
[ディスカウント] > [ディスカウントを追加] > [配送料の割引額] の順にクリックします。
「配送料の割引額」セクションで、「自動ディスカウント」を選択し、ディスカウントメッセージ (例: 50ドル以上の注文で配送料 50% オフ) を追加します。
「ディスカウントの設定」セクションで、カスタムディスカウントのルールセットを作成します。
- [割引額] ドロップダウンメニューで [パーセンテージ] を選択し、50% を追加します。
- 「 ディスカウントルール 」セクションで、ルールセットを設定します。
- [⊕ ルールを追加] をクリックします。
- ルールが
カートの小計>次の値以上>50.00となるように設定します。
任意:以下のオプションを設定できます。
- 配送オプション:ディスカウントを適用する配送オプションを指定します。特定のオプションを選択する場合、タイトル、価格、または配送タイプでオプションに適用することを選択できます。
- 組み合わせ:お客様がディスカウントコードを商品ディスカウントまたは注文ディスカウントと組み合わせることができるようにします。
- 有効期間:ディスカウントの開始時期と、有効期限が切れるかどうかを指定します。
「概要」セクションでディスカウントの詳細を確認し、正しく設定されていることを確かめます。
[保存] をクリックします。
Shopify 管理画面から、[アプリ] > Checkout Blocks に戻ります。
[ディスカウント] > [ディスカウントを追加] > [配送料の割引額] の順にクリックします。
「配送料の割引額」セクションで 「自動ディスカウント」 を選択し、ディスカウントメッセージ (例: 100ドル以上の注文で配送料無料) を追加します。
「ディスカウントの設定」セクションで、カスタムディスカウントのルールセットを作成します。
- [割引額] ドロップダウンメニューで、[送料無料] を選択します。
- 「 ディスカウントルール 」セクションで、ルールセットを設定します。
- [⊕ ルールを追加] をクリックします。
- ルールが
カートの小計>次の値以上>100.00となるように設定します。
任意:以下のオプションを設定できます。
- 配送オプション:ディスカウントを適用する配送オプションを指定します。特定のオプションを選択する場合、タイトル、価格、または配送タイプでオプションに適用することを選択できます。
- 組み合わせ:お客様がディスカウントコードを商品ディスカウントまたは注文ディスカウントと組み合わせることができるようにします。
- 有効期間:ディスカウントの開始時期と、有効期限が切れるかどうかを指定します。
「概要」セクションでディスカウントの詳細を確認し、正しく設定されていることを確かめます。
[保存] をクリックします。
簡単なチェックアウト方法の下にある「OR」のテキストの変更
簡単なチェックアウトの決済オプションの下にある ---- OR ---- の分割線の下に、配送と決済のアイコンブロックを移動して表示できます。その後、「OR」のテキストを「利用可能な決済タイプ」や「対応している配送業者」など、お好みのカスタムテキストに変更できます。

手順:
- チェックアウト・アカウントエディタで、配送と決済のアイコンブロックを作成して設定します。
- 「ウォレット」セクションの下に表示されるように、「配送と決済のアイコン」ブロックをドラッグ&ドロップします。
- Shopify 管理画面で、[オンラインストア] > [テーマ] に移動します。
- ライブテーマで、
...> [デフォルトテーマのコンテンツを編集] の順にクリックします。 - 検索バーを使用して、alternative という語を検索します。
- 「チェックアウトの代替決済方法のバナー」で、「Or」フィールドを変更してカスタムテキストを入力します。
- [保存] をクリックします。
特定の配送方法の下へのメッセージ表示
チェックアウト中に動的コンテンツブロックを使用すると、特定の配送方法の下にメッセージを表示できます。
たとえば、通常、速達、海外速達の配送料を提供している場合、「海外」配送オプションの下に短いメッセージを表示して、表示される配送料に関税やその他の税金が含まれていないことを明確にできます。
手順:
Shopify 管理画面から、[アプリ] > Checkout Blocks に移動します。
[ブロック] をクリックしてから、[ブロックを作成] をクリックします。
[動的コンテンツ] をクリックします。
「ブロック名」セクションに、ブロックの名前を入力します。この名前はお客様には表示されません。
「ブロック ID」セクションで、ID を「動的」に設定するか、特定の ID 番号を適用します。ブロック ID については、こちらをご覧ください。
「表示ルール」セクションで、特定の配送方法が含まれている場合にのみ表示されるように、ブロックの表示ルールを設定します。この例では、ルールは海外速達の下に表示されるように設定されています。
- [⊕ 表示ルールを追加] をクリックします。
- 「ルールを選択」ダイアログで、「配送方法のタイトル」を選択します。
- ルールを「次を含む」 > International として設定します。
「コンテンツ」セクションで、ブロックのコンテンツを追加してカスタマイズします。
- 「コンテンツアイテム」セクションで、「⊕ コンテンツアイテムを追加」をクリックし、「テキスト」を選択します。
- コンテンツアイテムのダイアログで、追加の関税が適用される場合があります。などの簡単なメッセージを追加し、「完了」をクリックします。
任意:「公開」セクションで鉛筆アイコンをクリックして、ブロックを表示するマーケットとチェックアウトページを選択します。
「保存」をクリックし、ブロックのステータスを「有効」に設定します。
チェックアウトとアカウントのエディタで、チェックアウトの「配送料」セクションに動的ブロックを追加します。
[保存] をクリックします。
注文の明細表にカスタムフィールドを含める
Checkout Blocksでは、カスタムフィールドブロックを使用してお客様データを収集し、そのデータを注文メタフィールドに保存できます。
手順:
- Checkout Blocksでカスタムフィールドブロックを作成し、注文メタフィールドとして保存されるように設定します。
- 管理画面で、[設定] > [配送と配達]に移動します。
- ドキュメント セクションで、明細表のテンプレート をクリックします。
- テンプレートでカスタムフィールドの値を表示するロケーションに、次のコード行を追加します。その際、
keyをカスタムフィールドのキーに置き換えます。
{{ order.metafields.checkoutblocks.key }}- 任意:カスタムフィールドの値を条件付きで表示する場合は、必要な条件に基づいて、Liquid の if/else ステートメントでコンテンツを囲むことができます。
- [保存] をクリックします。
明細表テンプレートでは、複数のカスタムフィールドキーの値を使用できます。たとえば、次のコードは、お客様が注文の規約に同意した場合 (キーが agree_to_terms のメタフィールド) にのみ、注文の注文書番号 (キーが po のメタフィールド) を表示します。
{% if order.metafields.checkoutblocks.agree_to_terms %}
PO #{{ order.metafields.checkoutblocks.po }}
{% endif %}注文のカスタムフィールドをお客様プロフィールに追加する
Shopify Flowアプリを活用して、カスタムフィールドブロックで取得した注文データを同期できます。
お客様プロフィールに birth_date メタフィールドの値を追加するために、.flow ファイルのサンプルをダウンロードできます。このテンプレートの値を、追加したいカスタムフィールドのキーに合わせてカスタマイズしてください。
手順:
- Checkout Blocksでカスタムフィールドブロックを作成し、注文メタフィールドとして保存されるように設定します。
- 「 Shopify Flow」で、注文時に実行されるカスタムワークフローを設定します。
- 「ワークフローを作成」> 「トリガーを選択」をクリックします。
- Shopify > 「注文の作成」を選択します。
- トリガーで、「次へ ⊕」> 「条件」をクリックします。
- 「変数を追加」をクリックし、「注文」> 「メタフィールド」> 「キー」を選択します。
- 「キー」フィールドに、お客様プロフィールに追加するカスタムフィールドのキー (
birth_dateなど) を追加します。 - 条件で、「次へ ⊕」> 「アクション」をクリックします。
- Shopify > 「お客様のメタフィールドを更新する」をクリックします。
- 「 お客様のメタフィールドを更新する セクションで、次の情報を入力します。
- メタフィールドの名前空間:追加するメタフィールド (
personal_infoなど) です。 - キー:メタフィールドのキー (
dobなど) です。 - タイプ:含める値のタイプ (日付など) です。
- 値:
- メタフィールドの名前空間:追加するメタフィールド (
{% assign dob_key = "birth_date" %}
{% for metafields_item in order.metafields %}
{% if metafields_item.key == dob_key %}
{{metafields_item.value}}
{% endif %}
{% endfor %}フローが完了したら、「ワークフローをオンにする」をクリックして有効化します。