# Shopify 结账后组件

推荐通常来自结账后高流量页面，使这些位置成为推广推荐计划的理想场所。Shopify 结账后小部件可让您在购买后立即与客户无缝互动，从而提升推荐数量。通过利用 Shopify 的可扩展性框架，该小部件提供流畅且具有品牌风格的体验，以最大化计划影响。

如果您的计划未出现在这里，您可能会错失宝贵的参与机会，并落后于已经利用这些位置的竞争对手。

#### 什么是 Shopify 结账后小部件？

我们的结账后小部件利用了 **Shopify 结账可扩展性** 在结账后页面上放置品牌化的推荐号召性用语 (CTA)。它模仿流行的 [即时访问小部件](https://help.impact.com/brand/zh/nin-xiang-liao-jie-shen-me/advocate-program/manage-advocate-participant-experiences/widget-experiences/set-up-an-instant-access-widget) 并支持：

* 嵌入式展示
* 弹出模态展示

两种版本均具有两个主要的小部件状态：

* 邮箱采集 / 用户识别
* 带推荐详情的分享页面

#### 主要功能

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

该小部件支持嵌入式和弹出式展示选项，因此您可以选择最适合店铺布局和客户体验的格式。它与您的推荐计划无缝连接，以创建或更新参与者档案并提取必要的推荐数据，例如分享链接、推荐代码和社交分享选项。最多可显示 3 个分享按钮，支持 Email、Facebook、WhatsApp、Messenger、LinkedIn、X（前身为 Twitter）和短信等平台。

自定义是核心功能。您可以为每个步骤定制内容，包括标题、副标题、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>• 电子邮件</p><p>• 短信</p><p>• Facebook</p><p>• Facebook Messenger</p><p>• WhatsApp</p><p>• LinkedIn</p><p>• X（Twitter）</p><p>• 直接链接</p><p>• 电子邮件</p><p>• 短信</p><p>• Facebook</p><p>• Facebook Messenger</p><p>• WhatsApp</p><p>• LinkedIn</p><p>• X（Twitter）</p><p>• 直接链接</p> |


---

# Agent Instructions: 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:

```
GET https://help.impact.com/brand/zh/nin-xiang-liao-jie-shen-me/advocate-program/manage-advocate-participant-experiences/widget-experiences/shopify-post-checkout-widget.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.