> 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="/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.