# 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）和短信等平台。

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

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

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

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

1. 前往你的 *主题编辑器*.
2. 选择 **页面导航器** ，然后在屏幕顶部选择 **结账和客户账户**.
3. 对上述步骤在 *感谢页面* 页面。
4. 主区域中，选择 **添加区块**，然后选择 **Advocate Referral Widget** ，位于 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 按钮文案（例如，“Get Started”）                                                                                                                                                                                                                                                                                              |
| 邮箱收集选项     | <p>• “Start Referring” 按钮 CTA</p><p>• 姓名字段（可选）</p>                                                                                                                                                                                                                                                                        |
| 分享信息选项     | <p>• 链接上方的自定义文本</p><p>• 最多选择 3 种分享按钮渠道：</p><p>• Email</p><p>• 短信</p><p>• Facebook</p><p>• Facebook Messenger</p><p>• WhatsApp</p><p>• LinkedIn</p><p>• X（Twitter）</p><p>• 直接链接</p><p>• Email</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/what-would-you-like-to-learn-about/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.