# 配送追跡ページの作成

> STEP 2-4

購入者が配送状況を確認するページを作成します。作成方法は**2パターン**あり、どちらか一方を選んで設定します。

## 作成方法の比較

|              | デフォルトテーマを使用する                                             | Headless配送追跡ページを使用する                                                                                             |
| ------------ | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| 概要         | 配送追跡機能が組み込まれた、Recustomerが提供するテーマを利用します     | 自社サイトの任意のページに配送追跡機能を組み込みます                                                                             |
| 必要な作業   | 管理画面での画像アップロードのみで公開できます                         | 自社サイト上に配送追跡ページを1ページ制作する必要があります（サイト制作の知識が必要です）                                         |
| 表示の自由度 | レイアウトは固定です。ロゴ・画像・色などを管理画面から設定します       | ページ全体を自由に設計できます。外部のレコメンドアプリ等と連携して、おすすめ商品を動的に表示する仕組みを組み込むこともできます     |

## デフォルトテーマを使用する

1. 設定 > ショッパーポータル > 配送追跡ページ へ移動します

2. 「デフォルトテーマを使用する」を選び、「**テーマを編集する**」をクリックします

   ![配送追跡ページの設定画面。「デフォルトテーマを使用する」の下にある「テーマを編集する」ボタンを押します](images/02d_tracking-page-setting.png)

3. ブランドイメージやブランドロゴ、バナー画像、おすすめ商品を、必要に応じてアップロードします

   > **注意: バナー画像・おすすめ商品は自動では更新されません**
   >
   > 掲載内容を変更する場合は、都度この画面から手動でアップロードし直す必要があります。
   > セール告知など期間限定の内容を掲載する場合は、差し替え・取り下げのタイミングにご注意ください。

## Headless配送追跡ページを使用する

1. 設定 > ショッパーポータル > 配送追跡ページ へ移動します

2. 「**Headless配送追跡ページを使用する**」を選択します

   ![配送追跡ページの設定画面。「Headless配送追跡ページを使用する」を選択すると、URL・ブランドロゴ・ブランド名の入力欄が表示されます](images/02d_headless-setting.png)

3. 「Headless配送追跡ページのURL」に、配送追跡ブロックの埋め込み先のURLを入力します

4. ブランドロゴ・ブランド名を設定し、右上の「**保存する**」をクリックします

5. 「Headless配送追跡ページへの配送追跡ブロックを埋め込む手順」が表示されるので、表示されたコードをサイト側に埋め込みます

   ![保存後の設定画面。「Headless配送追跡ページへの配送追跡ブロックを埋め込む手順」に、bodyタグ内に貼り付けるdivタグと、bodyタグの後に貼り付けるscriptタグの2つのコードが表示されます](images/02d_headless-embed-code.png)

6. 3で指定したページ上に配送追跡ブロックが表示されることを確認します

   ![サイト上に表示された配送追跡ブロック。「配送状況を確認」の見出しの下に、注文番号・郵便番号または追跡番号の入力欄と「配送状況を確認する」ボタンが表示されます](images/02d_headless-tracking-block.png)