> 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の購入完了後ウィジェットを使えば、購入直後にシームレスに顧客と関わり、紹介を増やすことができます。Shopifyの拡張性フレームワークを活用することで、このウィジェットはスムーズでブランド一貫性のある体験を提供し、プログラムの効果を最大化します。

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

#### Shopifyの購入完了後ウィジェットとは何ですか？

当社の購入完了後ウィジェットは **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の購入完了後ウィジェットは、紹介エンゲージメントを最大化するよう設計されています。2段階のフローを採用しており、まずウィジェットがユーザーのメールアドレスを収集して本人を識別し（まだログインしていない場合）、その後、パーソナライズされた紹介リンクまたはコードと共有ボタンを表示します。Shopifyにログイン済みのユーザーは、よりシームレスな体験のため、このメール入力ステップが完全にスキップされます。

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

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

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

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

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

1. 〜へ移動し *テーマエディタ*.
2. を選択します **ページナビゲーター** 画面上部で、次に **チェックアウトと顧客アカウント**.
3. 上記の手順を以下の場所でも繰り返します: *サンキューページ* ページで行ってください。
4. メインセクションで、 **ブロックを追加**、次に **Advocate紹介ウィジェット** をImpact.com連携セクションから選択します。

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

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

{% stepper %}
{% step %}

#### **ステップ1:**

ウィジェットは、Shopifyにすでにログインしている場合を除き、お客様に氏名とメールアドレスの入力を求めます。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.