> For the complete documentation index, see [llms.txt](https://help.impact.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.impact.com/brand/ja/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-experiences/shopify-post-checkout-widget.md).

# Shopifyの購入後ウィジェット

紹介は多くの場合、アクセス数の多い購入後ページから発生するため、これらの場所は紹介プログラムを訴求する絶好のスポットです。Shopify Post-Checkout Widget を使えば、購入直後にシームレスに顧客と接点を持ち、紹介を促進できます。Shopify の拡張性フレームワークを活用することで、このウィジェットは洗練されたブランド体験を提供し、プログラムの効果を最大化します。

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

#### Shopify の購入後ウィジェットとは？

当社の Post-Checkout Widget は **Shopify Checkout Extensibility** を活用して、購入後ページにブランド付きの紹介用CTA（行動喚起）を配置します。これは人気の [Instant Access Widget](/brand/ja/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-experiences/set-up-an-instant-access-widget.md) に似ており、次をサポートします：

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

どちらのバージョンにも、主に2つのウィジェット状態があります：

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

#### 主な機能

Shopify Post-Checkout Widget は、紹介エンゲージメントを最大化するよう設計されています。2段階の流れになっており、まず（まだ Shopify にログインしていない場合は）メールアドレスを収集してユーザーを識別し、その後、個別化された紹介リンクまたはコードと共有ボタンを表示します。Shopify にログイン済みのユーザーは、よりシームレスな体験のため、このメール入力ステップは完全に省略されます。

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

カスタマイズは中核機能です。見出し、副見出し、CTAボタン、共有メッセージを含め、各ステップの内容を調整できます。さらに、追加のブランディングとしてウィジェット上部に画像を入れることも可能です。重要なのは、これらの設定をすべて Shopify ページエディタ内で行えるため、Shopify 管理画面を離れずに簡単に調整できることです。

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

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

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

1. 次へ移動し、 *テーマエディタ*.
2. 次の **ページナビゲーター** を画面上部で選択してから、 **チェックアウトとお客様アカウント**.
3. 上記の手順を *サンクスページ* ページ。
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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://help.impact.com/brand/ja/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-experiences/shopify-post-checkout-widget.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.
