> 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 にログイン済みのユーザーについては、よりシームレスな体験のためメール入力の手順は完全に省略されます。

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

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

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

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

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

1. お使いの *テーマエディター*.
2. 次の **ページナビゲーター** の画面上部に移動し、次に **Checkout and customer accounts**.
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>• メール</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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
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=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.
