> 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/zh/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/zh/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-experiences/set-up-an-instant-access-widget.md) 类似，并支持：

* 内嵌显示
* 弹窗模态显示

两个版本都包含两个主要小部件状态：

* 邮件收集 / 用户识别
* 包含推荐详情的分享页

#### 主要功能

Shopify 结账后小部件旨在最大化推荐互动。它采用两步流程：首先，小部件通过收集用户的电子邮件来识别用户（如果他们尚未登录），然后显示他们个性化的推荐链接或代码以及分享按钮。对于已登录的 Shopify 用户，则会完全跳过电子邮件步骤，以获得更流畅的体验。

该小部件同时支持内嵌和弹窗显示选项，因此你可以选择最适合商店布局和客户体验的格式。它可无缝连接到你的推荐计划，以创建或更新参与者资料，并提取必要的推荐数据，例如分享链接、推荐代码和社交分享选项。最多可显示 3 个分享按钮，并支持 Email、Facebook、WhatsApp、Messenger、LinkedIn、X（原 Twitter）和 SMS 等平台。

自定义是其核心功能。你可以为每个步骤定制内容，包括标题、副标题、CTA 按钮和分享消息。你还可以选择在小部件顶部添加图片，以增强品牌展示。重要的是，所有这些设置都可以在 Shopify 页面编辑器中配置，无需离开 Shopify 后台即可轻松调整。

最后，该小部件旨在继承你网站的品牌风格，因此无需手动配置颜色或字体。这确保了它与商店其他部分保持一致的外观和感觉。

#### 将小部件添加到你的网站

要将 Advocate 小部件添加到你的 Shopify 商店：

1. 导航到你的 *主题编辑器*.
2. 选择 **页面导航器** 在屏幕顶部，然后选择 **结账和客户账户**.
3. 对上一步在 *谢谢* 页面。
4. 在主要区域，选择 **添加区块**，然后选择 **Advocate 推荐小部件** ，位于 impact.com 集成部分。

#### 小部件流程

小部件体验旨在引导用户完成两个简单步骤。

{% stepper %}
{% step %}

#### **步骤 1：**

小部件会提示客户输入姓名和电子邮件地址，除非他们已经登录 Shopify，在这种情况下此步骤会自动跳过。捕获到用户信息后，如果他们尚未加入你的计划，就会被添加为新参与者；如果已经在计划中，则会更新其详情。

<div data-with-frame="true"><figure><img src="https://1186853034-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://1186853034-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/zh/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.