動的コンテンツブロック
動的コンテンツブロックを使用すると、特定の条件が満たされたときに、チェックアウトでさまざまな種類のコンテンツを動的に表示できます。
例えば、すべての Tシャツの売上の一部を慈善団体に寄付するキャンペーンを実施している場合、お客様が Tシャツを購入した場合にのみチェックアウトに表示される、「ご支援ありがとうございます」という特別なバナーを作成できます。
動的コンテンツブロックでサポートされているコンテンツアイテム
動的コンテンツブロックでは、以下の種類のコンテンツアイテムがサポートされています。
- アコーディオン
- バナー
- メリット
- ボタン
- 区切り線
- 見出し
- 画像
- スペーサー
- テキスト
1つの動的コンテンツブロックに、複数のコンテンツアイテムを追加できます。
動的コンテンツブロックは、テキストを記述する際に、以下の限定的な Markdown フォーマットにも対応しています。
- H1、H2、H3の見出し
- 太字、斜体、取り消し線
- 画像
- 改行
- リンク
- 番号付きリストと箇条書きリスト
- 水平線
コンテンツにパーソナライゼーションを追加するために、Liquid 変数を使用することもできます。
動的コンテンツブロックを作成する
Checkout Blocks アプリで動的コンテンツブロックを作成、設定できます。動的コンテンツブロックを作成した後、チェックアウトに追加する必要があります。
手順:
Shopify 管理画面から、[アプリ] > Checkout Blocks に移動します。
[ブロック]、[ブロックを作成] の順にクリックします。
[動的コンテンツ] をクリックします。
使用するフィールドのテンプレートを選択します。フィールドや設定が事前入力されないようにする場合は、空白のテンプレートを選択します。
ブロック名セクションで、ブロックの名前を入力します。この名前は、お客様には表示されません。
ブロック ID セクションで、ドロップダウンメニューを使用して特定の ID 番号を適用します。ブロック IDについて詳しくはこちら。
表示ルールセクションで、ブロックの表示ルールを設定します。
- すべてのお客様にブロックを表示するには、表示ルールセクションを空欄のままにします。
- 表示ルールを作成するには、[⊕ 表示ルールを追加] をクリックしてルールを設定します。必要に応じて、表示ルールをいくつでも追加できます。
コンテンツセクションで、ブロックのコンテンツを追加してカスタマイズします。
- 任意:セクションヘッダーフィールドで、[タイトルを追加 (任意)] をクリックしてブロックにヘッダーを追加します。
- コンテンツアイテムセクションで、[⊕ コンテンツアイテムを追加] をクリックし、追加するコンテンツアイテムを選択します。
- コンテンツアイテムのダイアログで、コンテンツアイテムの詳細とスタイルを設定し、[完了] をクリックします。
- 任意:コンテンツアイテムをさらに追加し、必要に応じてカスタマイズします。
任意:スタイルセクションで、デザインをカスタマイズするをクリックして、ブロックのコンテナと列のスタイルとサイズをカスタマイズします。
任意:公開セクションで、鉛筆アイコンをクリックし、ブロックを表示するマーケットとチェックアウトページを選択します。
[保存] をクリックします。
ブロックは、デフォルトで下書きとして保存されます。ブロックを公開する準備ができたら、ステータスセクションで、ドロップダウンメニューから「有効」を選択します。
チェックアウトに動的コンテンツブロックを追加する
既存の動的コンテンツブロックをチェックアウトに追加できます。ブロックをチェックアウトに表示するには、有効に設定する必要があります。
チェックアウト・アカウントエディタでブロックをプレビューする場合は、Checkout Blocks アプリからブロック固有のプレビュー ID をコピーしてください。
手順:
Shopify 管理画面から、[アプリ] > Checkout Blocks に移動します。
[ブロック] をクリックします。
チェックアウトに追加する動的コンテンツブロックをクリックします。
[その他の操作] ⌄ > [チェックアウトに追加] をクリックします。
任意:プレビューブロック ID セクションで、クリップボードアイコンをクリックして、ブロック固有のプレビュー IDをコピーします。
希望のチェックアウト設定を選択し、[エディタを開く] をクリックします。
チェックアウト・アカウントエディタで、チェックアウトに動的コンテンツブロックを追加します。
- ブロックを追加するチェックアウトページに移動します。
- ブロックを追加するセクションで、[⊕ ブロックを追加] をクリックします。
- Checkout Blocks の「動的コンテンツ」オプションをクリックします。
- チェックアウトブロックの詳細を設定し、対応するブロック ID を選択します。
- 任意:[プレビューブロック ID (テスト用)] フィールドとブロックのプレビュー ID を使用して、チェックアウトでのブロックの表示をプレビューします。
- 任意:動的ブロックをドラッグ&ドロップして、ブロックを表示させたいチェックアウトページ上のロケーションを変更します。
[保存] をクリックします。