如何设计您的客户中心
你将会学到
了解用于设计客户中心抽屉样式的设计选项，以及如何设计它以匹配您的品牌。由于客户中心界面在客户体验中根深蒂固，因此最佳实践是将其设计为网站的扩展。客户中心目前支持 Shopify 店面，包括 Shopify Headless。计划提供更多电子商务平台支持。有关客户中心功能的反馈，请发送电子邮件至 customerhub@klaviyo.com。
开始之前
本指南介绍了如何自定义客户中心界面的样式。在继续之前，确保客户中心功能已启用。 了解有关客户中心的更多信息。
客户中心设计选项
客户中心抽屉有多个可自定义的选项卡：
- 为你
- 订单
- 个人资料
- 聊天（仅在启用网络聊天时可见）
您可以使用各种选项来自定义每个选项卡的设计，包括编辑文本、颜色、字体等。样式自定义选择会级联到客户中心抽屉中的每个选项卡，以确保为您的网站访问者提供一致的品牌体验。虽然客户中心抽屉中的大多数元素的外观可以调整，但它们的位置不能调整。当前仅提供常规布局选项。当您在 Klaviyo 中编辑客户中心的设计设置时，请使用查看实时按钮查看对网站上的中心界面所做的更改。请注意，如果您的客户中心已上线，保存的更改将发布到您的网站。
为每个选项卡定制一个主要的号召性用语
默认情况下，当购物者登录其客户帐户时，Klaviyo 会在客户中心抽屉的 为您 选项卡上显示“欢迎，名字”作为主标题。该文本不可编辑。但是，对于未经身份验证的购物者，您可以编写自己的号召性用语标题，在他们登录之前显示在“登录”按钮上方。这有助于激励未经身份验证的访问者登录并与您的客户中心界面互动。在下面的示例中，主要号召性用语为“赚取奖励、跟踪订单并保存您的购物历史记录”。
注意：如果您有以下任一情况，“可用奖励”指示器会自动显示：
- 在客户中心设置静态优惠券，或者
- 如果您启用了忠诚度集成（例如 Smile）。要更新客户中心界面的主要号召性用语：
- 打开 Klaviyo 左侧导航栏中的服务 –客户中心****选项卡。
- 单击设置。
- 在 欢迎消息 下，自定义号召性用语，使其显示在未经身份验证的购物者的“登录”按钮上方。您可以对客户中心抽屉的每个选项卡执行此操作：
- 为你
- 订单
- 个人资料！客户中心内容设置中的欢迎消息菜单。
- 单击保存。
设计您的客户中心
有关自定义客户中心界面的设计选项：
- 导航至 Klaviyo 左侧导航栏中的客户中心。
- 选择设计。
- 选择预览顶部的Hub。
- 从样式菜单中，您可以调整显示语言、字体、颜色和样式设置，并预览这些调整在客户中心界面画布中的外观
- 您可以选择使用自定义 CSS 应用高级样式。有关更多详细信息，请参阅下面的自定义 CSS 部分。
- 有关选择其他语言的更多信息，请参阅客户中心中的语言和区域设置支持一文。
- 单击保存以生效您的更改。
自定义客户中心小部件
除了设计客户中心本身之外，您还可以自定义中心小部件，它是网站上的一个小型浮动元素，访问者可以单击它来快速打开客户中心界面。该小部件向购物者提供及时的信息，例如传入的聊天消息以及将商品添加到收藏夹列表时的反馈。我们建议启用小部件 UI 来推动与客户的有意义的互动，尤其是在启用网络聊天和收藏夹时。要自定义中心小部件：
- 在 Klaviyo 左侧导航中选择客户中心。
- 选择设计。
- 选择预览顶部的小部件。
- 从 常规 菜单中，您可以调整哪些购物者应看到该小部件以及单击该小部件时应打开哪个客户中心视图。 – 选择哪些购物者应该在您的网站上看到该小部件：
- 所有购物者（已识别、登录和注销） – 该小部件会向所有人显示。 – 已识别或已登录的购物者 – 仅当 Klaviyo 识别该人（已识别）或已登录（已验证）时，该小部件才会出现。这非常适合减少新访客的混乱，同时为回访者保持高接触体验。 – 仅限已登录的购物者 – 该小部件仅针对具有活跃 Shopify 会话的购物者显示。 5. 从样式菜单中，您可以调整颜色和样式设置，并预览这些调整在客户中心小部件界面画布中的外观
- 从 布局 菜单中，您可以调整小部件在网站上的位置。
- 单击保存以生效您的更改。
自定义其他小部件状态
您可以通过选择 Icon 旁边的插入符号并导航到另一个小部件状态来自定义其他小部件状态。 – 添加到购物车状态在产品详细信息页面上可见。当传统的“添加到购物车”按钮不再可见时，可自定义的小部件会鼓励购物者在产品详细信息页面滚动到顶部下方时进行购买或保存产品以供日后使用。详细了解如何在客户中心设置添加到购物车小组件。
客户中心的自定义 CSS
如果客户中心设计选项无法满足您的品牌需求，您可以使用自定义 CSS 应用高级样式。虽然客户中心使用 CSS 重置来避免与网站的 CSS 发生冲突，但您可能需要添加自定义 CSS 来解决边缘情况或应用独特的样式，例如浮动抽屉或自定义边框半径值。为您的客户中心实施自定义 CSS 涉及编辑您网站的代码。仅建议精通技术的营销人员或能够接触开发人员的人员使用此方法。虽然我们的产品确实支持自定义 CSS，但除了本文档中涵盖的一般指导之外，我们的支持团队无法帮助您将自定义 CSS 添加到客户中心。为了维护您的数据安全，Klaviyo 的支持团队无法打开您的 HTML 文件。
应用自定义 CSS
将任何自定义 CSS 直接添加到客户中心设计设置的 自定义 CSS 部分，并确保保存更改。
客户中心内的所有基本元素的类名称都以“kl-hub-”为前缀：
- 所有文本元素都具有“kl-hub-text”类，而标题具有“kl-hub-heading”类
- 按钮具有“kl-hub-button”类，并且还包括其变体（例如，“kl-hub-button-primary”、“kl-hub-button-secondary”等）
- 客户中心抽屉本身具有“kl-hub-drawer”类
- 文本输入具有“kl-hub-input”类
- 所有内容块都具有类“kl-hub-content-block”，并且还包括其块内部名称（例如，“kl-hub-content-block-reward-program”表示名为“奖励计划”的内容块）
这并不是一份详尽的清单；您可以通过使用浏览器的调试器检查客户中心来找到更多信息。如果某个元素具有以“kl-hub-”开头的类，则可以安全地用于自定义 CSS。
CSS 示例
如果您想将客户中心中的所有按钮和标题设为大写，您可以编写以下自定义 CSS：
.kl-hub-按钮, .kl-hub-标题 {
文本转换：大写；
}