> 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 结账扩展性** 在结账后页面上放置一个符合品牌调性的推荐号召性用语（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="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 按钮文案（例如：“Get Started”）                                                                                                                                                                                                                                                                                               |
| 邮箱收集选项     | <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 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/zh/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.