> 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）。它与广受欢迎的 [即时访问小组件](/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="/files/03ded34c83f5035c182035ea153b5fdfa04ba4a9" alt="" width="484"><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}

#### **步骤 2：**

客户将看到其推荐详情。这包括唯一的推荐链接或推荐代码，具体取决于计划的配置方式。小组件还会显示最多 3 个分享按钮，您也可以在推荐信息上方添加简短消息，以鼓励分享并强化计划的优势。

<div data-with-frame="true"><figure><img src="/files/b3622d0a918cdd61ba4fd62b404d0e6240c053b3" 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.