GET START

如何在您的网站和客户中心中显示收藏夹按钮

Table Of Contents

你将会学到 #

了解如何让购物者在您的网站上保存他们最喜欢的商品。通过在产品旁边添加收藏夹按钮，您可以在客户中心抽屉中显示购物者保存的商品，并发送后续流程以推动转化。客户中心目前支持 Shopify 店面，包括 Shopify Headless。计划提供更多电子商务平台支持。有关客户中心功能的反馈，请发送电子邮件至 customerhub@klaviyo.com。 ## 开始之前

本指南介绍如何从 Klaviyo 中的客户中心设置启用 收藏夹 设置，以及如何在网站的不同页面上添加收藏夹按钮。在继续之前，请确保在 Klaviyo 中启用客户中心功能。 了解有关客户中心的更多信息。 ## 关于收藏夹

收藏夹按钮允许购物者保存他们感兴趣的产品。购物者收藏的商品显示在客户中心抽屉中，并且可以在流程中使用以推动其他转化。当您在 Klaviyo 客户中心设置中激活 收藏夹 功能时，会出现一个收藏夹按钮，其中包含客户中心界面中显示的所有产品。当购物者单击此按钮时，该商品将添加到他们的 收藏夹 部分并保存到他们的 Klaviyo 个人资料中。 !newfavorites1.jpg

为了提高可见性并鼓励使用，您还可以将收藏夹按钮添加到：

  • 产品详细信息页面
  • 产品系列页面（也称为“产品列表页面”）

从这两个页面中的任何一个页面收藏的商品也会保存到客户中心抽屉中购物者的收藏夹部分。请注意，任何访问者都可以将产品添加到他们的收藏夹列表中，无论他们是否登录到客户帐户。当他们登录时，他们保存的任何收藏夹都会同步到他们的 Klaviyo 个人资料中。 ## 允许在客户中心显示收藏夹

要在客户中心抽屉中显示收藏夹，您必须首先在 Klaviyo 中启用 收藏夹 设置。请注意，如果您的客户中心已上线，保存此更改会将其发布到您的网站上。如果没有，您需要将客户中心设置为位于常规设置菜单中才能看到此更改。 1. 在 Klaviyo 的左侧主导航中，选择*服务 – 客户中心。 2. 单击扩展选项卡。 3. 在收藏夹下，选中复选框以启用收藏夹*。 !CHfavorites3.jpg

  1. 在 选择图标 下拉列表中，选择要在您的产品下显示的最喜欢的图标类型（即心形或加号）。 – 默认情况下，预览显示未选择（即未收藏）的图标版本。单击预览中的图标可查看其更改为收藏状态。 5. 单击*保存。现在，客户中心界面中展示的任何产品下方都会显示收藏夹按钮。单击它会将项目添加到 收藏夹* 部分。继续阅读下一部分，获取有关向产品详细信息页面添加收藏夹按钮的指南。 ## 将收藏夹按钮添加到产品详细信息页面

通过在产品详细信息页面添加“添加到收藏夹”按钮，显着提高参与度。如果您使用老式 Shopify 主题或不支持应用程序块的自定义设置，请参阅手动安装收藏夹按钮的说明。 1. 在 Klaviyo 的 收藏夹 设置中，选择 添加应用程序块。 2. 执行此操作会在新窗口中启动您的 Shopify 主题编辑器，显示一个模式，指示 Klaviyo favorites 应用程序块已添加到您的默认产品页面模板中。点击知道了**。 !CHfavorites4.jpg

  1. 单击并拖动应用程序以根据需要调整其在产品详细信息页面上的位置。 4. 准备好后，单击*保存以保存您在 Shopify 中的更改。此时，收藏夹按钮将显示在产品页面上的产品下方。 5. 可选：如需其他样式，请导航回 Klaviyo。使用应用程序块样式*下拉列表，您可以自定义产品页面上收藏夹按钮的外观。选择：
  • *继承以同步您网站的按钮样式（默认）。 – 自定义*选择某种按钮字体和文本颜色。！newfavorites7.jpg
  1. 保存所有更改。导航回您的网站。您应该会在产品详细信息页面上的产品下方看到收藏夹按钮。 !newfavorites10.jpg

接下来，跳到将收藏夹按钮添加到您的收藏页面部分。 ## 手动安装最喜欢的按钮（复古主题或自定义设置）

如果您使用老式 Shopify 主题或不支持应用程序块的自定义设置，您可能需要手动将 Klaviyo Wishlist 应用程序安装到您想要收藏操作的页面（例如产品页面）。为此：

  1. 打开您的 Shopify 商店后台。 2. 在销售渠道下，选择*在线商店。 3. 单击当前主题上的三点菜单，然后选择编辑代码*。如果您想在草稿主题上进行测试，请先复制当前主题，然后编辑复制主题的代码。 !CHfavorites5.jpg
  2. 找到您的产品详细信息页面的文件。这因主题而异，但通常名称中包含“产品”一词。例如，在 Dawn 主题中，这称为“main-product.liquid”。
  3. 将以下代码片段粘贴到您希望显示收藏夹按钮的位置：

    4. <div class="klaviyo-wishlist-slot" data-product-id="{{product.id }}"></div>

  4. 单击*保存。 7. 单击预览商店*。 8. 导航到商店预览中的产品页面。添加的收藏夹按钮应该在指定位置可见。 ## 将收藏夹按钮添加到您的收藏页面

在您的 Shopify 网站上安装一小段代码，以将收藏夹按钮添加到您的产品系列页面，以便购物者可以在浏览您的产品时快速保存商品。这对于移动设备上的购物者尤其有用。为此：

  1. 打开您的 Shopify 商店后台。 2. 在销售渠道下，选择*在线商店。 3. 在当前主题旁边，单击三点菜单，然后选择编辑代码*。 – 如果您想测试草稿主题，请先复制当前主题，然后编辑复制主题中的代码。 4. 在左侧边栏中，搜索并打开您的集合文件。在本示例中，我们将使用featured-collections.liquid 文件，但是您的主题可能会使用不同的文件。 !newfavorites2.jpg
  2. 在集合文件中，使用查找快捷方式（Mac 上的 Command+F 或 Windows 上的 Control+F）在文件中搜索单词“render”。这可以帮助您识别包含产品网格的代码片段名称。 – 代码片段可能会以类似于以下的格式出现：{% render 'snippet-name'%}，其中 'snippet-name' 是相关代码片段文件的名称（例如，card-product）。!newfavorites3.jpg
  3. 在左侧边栏中，搜索并打开上一步中标识的片段文件（例如，card-product.liquid）。 7. 在此文件的顶部，记下“接受”下列出的对象值（例如“card\_product”）。 !newfavorites6.jpg
  4. 复制以下代码并将其粘贴到代码片段文件中：
  • 提示：在文件中查找价格呈现的第一个实例，并将代码粘贴到其上方。 <div

class="klaviyo-favorites-plp-slot"

data-product-id="{{ OBJECT.id }}"

data-product-url="{{ OBJECT.url }}"

data-variant-id="{{OBJECT.selected_or_first_available_variant.id}}"

></div>

  1. 在您粘贴的代码中，将“OBJECT”替换为您之前记下的对象值。 – 例如，如果文件的对象值为“card\_product”，则粘贴到价格上方的文件中时，代码将如下所示。！newfavorites5.jpg
  2. 在 Shopify 中点击*保存*。 11. 转到您网站的集合页面并刷新。您现在应该会看到每个产品上都出现了最喜欢的按钮。请注意，加载这些内容可能需要几秒钟的时间。默认情况下，它们位于右上角。如果您想更改位置，请咨询您的开发人员以获取有关自定义 CSS 的帮助。 !newfavorites11.jpg

如果收藏夹按钮仍未出现，请尝试以下故障排除步骤：

  • 确认您已将代码片段中的“OBJECT”替换为文件的对象值。 – 尝试将代码粘贴到文件中的其他位置。 – 验证您是否已将代码粘贴到正确的代码片段文件中。如果它们仍然没有出现，请向开发人员寻求帮助。 Klaviyo 的支持团队无法直接编辑您的主题文件。 ## 后续步骤

现在您已向网站添加了收藏夹按钮，接下来可以设置收藏夹提醒流程，通过提醒购物者最近保存的商品来推动转化。

您的感觉是什么