> 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 にログインしていない場合）、その後、個別の紹介リンクまたはコードと共有ボタンを表示します。Shopify にログイン済みのユーザーの場合は、よりスムーズな体験のため、このメール入力ステップは完全に省略されます。

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

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

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

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

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

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

#### ウィジェットのフロー

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

{% stepper %}
{% step %}

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

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

<div data-with-frame="true"><figure><img src="https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-061bb6690e6b6dfa4a077b1ec06087f561906dac%2F571f95c03ce48a5309bb35fa3dfb1dd9f52648a8250997c9c024c97d40539df8.png?alt=media" alt="" width="484"><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}

#### **ステップ2:**

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

<div data-with-frame="true"><figure><img src="https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-6a0f04d21deba06ba46938c9470f105773008db9%2F4629f5cdc1fb6845cb83f3e4a6b50b677072e4915ce88d4aa69726630b9c96bb.png?alt=media" 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>・Email</p><p>・SMS</p><p>・Facebook</p><p>・Facebook Messenger</p><p>・WhatsApp</p><p>・LinkedIn</p><p>・X（Twitter）</p><p>・直接リンク</p><p>・Email</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.
