# Shopifyのチェックアウト後ウィジェット

紹介は購入後の高トラフィックなページから来ることが多く、これらは紹介プログラムを宣伝するのに最適な場所です。Shopify ポストチェックアウトウィジェットを使えば、購入直後に顧客とシームレスに関わり、紹介数を増やせます。Shopify の拡張可能なフレームワークを活用することで、このウィジェットはブランドに沿った滑らかな体験を提供し、プログラムの効果を最大化します。

もしここにあなたのプログラムが表示されていないなら、貴重なエンゲージメントを逃している可能性があり、既にこれらの場所を活用している競合に遅れを取っているかもしれません。

#### Shopify ポストチェックアウトウィジェットとは何ですか？

当社のポストチェックアウトウィジェットは **Shopify Checkout Extensibility（Shopify チェックアウト拡張機能）** を利用して、ポストチェックアウトページにブランド化された紹介の行動喚起（CTA）を配置します。これは人気のある [Instant Access Widget](/brand/ja/nitsuitebitaidesuka/advocate-program/manage-advocate-participant-experiences/widget-experiences/set-up-an-instant-access-widget.md) を模したもので、以下をサポートします：

* 埋め込み表示
* ポップアップモーダル表示

両バージョンとも、主に2つのウィジェット状態を備えています：

* メール取得／ユーザー識別
* 紹介詳細を表示する共有ページ

#### 主な機能

Shopify ポストチェックアウトウィジェットは紹介のエンゲージメントを最大化するよう設計されています。2段階のフローを特徴とし、まずウィジェットがユーザーを識別するためにメールを収集します（ユーザーがすでにログインしている場合は不要）。その後、個別の紹介リンクまたはコードと共有ボタンを表示します。Shopify にログインしているユーザーに対しては、メール取得ステップは完全にスキップされ、よりシームレスな体験が提供されます。

ウィジェットは埋め込み表示とポップアップ表示の両方に対応しているため、ストアのレイアウトや顧客体験に最適な形式を選べます。紹介プログラムとシームレスに接続し、参加者プロフィールの作成や更新、共有リンク、紹介コード、ソーシャル共有オプションなど必要な紹介データを取得します。最大3つの共有ボタンを表示でき、Email、Facebook、WhatsApp、Messenger、LinkedIn、X（旧Twitter）、SMSなどのプラットフォームに対応しています。

カスタマイズは主要な機能です。ヘッダー、サブヘッダー、CTAボタン、共有メッセージなど、各ステップのコンテンツを調整できます。追加のブランド表現としてウィジェット上部に画像を含めるオプションもあります。重要なのは、これらすべての設定が Shopify ページエディタ内で構成でき、Shopify 管理画面を離れることなく簡単に調整できる点です。

最後に、ウィジェットはサイトのブランディングを継承するよう設計されているため、色やフォントを手動で設定する必要はありません。これにより、ストア全体と一貫した見た目と操作感が保たれます。

#### ウィジェットをサイトに追加する

Advocate ウィジェットを Shopify ストアに追加するには：

1. 次の場所に移動します： *テーマエディタ*.
2. を選択し、 **ページナビゲーター** を画面上部で選択してから、次を選びます： **チェックアウトと顧客アカウント**.
3. 上記の手順を *サンキュー（Thank you）* ページでも繰り返します。
4. メインセクションで、 **ブロックを追加**を選択し、次に **Advocate Referral Widget** を Impact.com 統合セクションから選びます。

#### ウィジェットの流れ

ウィジェット体験はユーザーを2つの簡単なステップで案内するよう設計されています。

{% stepper %}
{% step %}

### **ステップ1：**

ウィジェットは顧客に名前とメールアドレスの入力を促します（顧客がすでに Shopify にログインしている場合はこのステップは自動的にスキップされます）。ユーザー情報が取得されると、新規参加者としてプログラムに追加されるか、すでにプログラムに存在する場合は詳細が更新されます。

<div data-with-frame="true"><figure><img src="/files/66a9c0277dcb99f13961e32e22483b96cd712177" alt="" width="484"><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}

### **ステップ2：**

顧客には紹介の詳細が表示されます。これは、プログラムの設定に応じて固有の紹介リンクまたは紹介コードのいずれかを含みます。ウィジェットは最大3つの共有ボタンも表示し、紹介情報の上に短いメッセージを入れて共有を促したり、プログラムの利点を強調することもできます。

<div data-with-frame="true"><figure><img src="/files/b47f4c210def4b625aebe5550ddd29a86b5628ee" alt="" width="492"><figcaption></figcaption></figure></div>
{% endstep %}
{% endstepper %}

**カスタマイズオプション**

すべてのビジュアルコンテンツはブランドのトーンに合わせて設定できます。これらのカスタマイズは直接 **Shopify ページエディタ** 内で利用でき、使いやすくなっています。

| カスタマイズ            | 編集可能なセクション                                                                                                                                                                                                                                                                                                                        |
| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ウィジェット状態間で共有される項目 | <p>• 画像のURL（オプション）</p><p>• ヘッダー（必須）</p><p>• サブヘッダー（オプション）</p><p>• 利用規約リンク（オプション）</p>                                                                                                                                                                                                                                              |
| ポップアップ固有のオプション    | • CTAボタンのラベル（例：「始める」）                                                                                                                                                                                                                                                                                                             |
| メール収集オプション        | <p>• 「紹介を始める」ボタンのCTA</p><p>• 名前フィールド（オプション）</p>                                                                                                                                                                                                                                                                                   |
| 共有情報オプション         | <p>• リンク上のカスタムテキスト</p><p>• 最大3つの共有ボタン媒体を選択：</p><p>• メール</p><p>• SMS</p><p>• Facebook</p><p>• Facebook Messenger</p><p>• WhatsApp</p><p>• LinkedIn</p><p>• X（旧 Twitter）</p><p>• 直接リンク</p><p>• メール</p><p>• SMS</p><p>• Facebook</p><p>• Facebook Messenger</p><p>• WhatsApp</p><p>• LinkedIn</p><p>• X（旧 Twitter）</p><p>• 直接リンク</p> |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.impact.com/brand/ja/nitsuitebitaidesuka/advocate-program/manage-advocate-participant-experiences/widget-experiences/shopify-post-checkout-widget.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.