GET START

如何设置 Customer Hub 的样式

Table Of Contents

Customer Hub 设计选项 #

Customer Hub 侧滑栏包含多个可自定义的标签页：

  • For you（为您推荐）
  • Orders（订单）
  • Profile（个人资料）
  • Chat（聊天 —— 仅在启用 Web Chat 时可见）
A woman running in sportswear on a modern, minimalistic outdoor setting, with a sidebar displaying personalized customer features, including rewards points and recently viewed items.
A woman running in sportswear on a modern, minimalistic outdoor setting, with a sidebar displaying personalized customer features, including rewards points and recently viewed items.

您可以为这些标签页中的每一个提供多种设计自定义选项，包括编辑文本、颜色、字体等。样式自定义的选择会应用于 Customer Hub 侧滑栏中的各个标签页，以确保为您的网站访客提供一致且符合品牌形象的体验。

虽然 Customer Hub 侧滑栏中大多数元素的外观都可以调整，但它们的位置无法更改。目前仅提供常规布局选项。

在 Klaviyo 中编辑 Customer Hub 的设计设置时，请使用 View live 按钮查看网站上中心界面的更改。请注意，如果您的 Customer Hub 已上线，保存的更改将直接发布到您的网站。

为每个标签页自定义CTA #

默认情况下，当购物者登录其客户账户时，Klaviyo 会在 Customer Hub 侧滑栏的 For you 标签页上显示“Welcome”作为主标题。此文本不可编辑。

然而，对于未经身份验证（未登录）的购物者，您可以编写自己的CTA，显示在他们登录前的“Sign in”按钮上方。这有助于激励未登录访客登录并使用您的 Customer Hub 界面。

在下方的示例中，主要CTA显示为：“赚取奖励、追踪订单并保存您的购物历史。”

A customer hub interface displaying a 'For You' tab with options to earn rewards, track orders, and save shopping history. Includes a 'Sign In' button and promotional content for early access to a fall collection featuring images of models.
A customer hub interface displaying a 'For You' tab with options to earn rewards, track orders, and save shopping history. Includes a 'Sign In' button and promotional content for early access to a fall collection featuring images of models.

注意：如果符合以下任一条件，“可用奖励（rewards available）”指示器将自动显示：

  • 在 Customer Hub 内设置了*静态优惠券*，或者
  • 启用了忠诚度集成（例如 *Smile*）。

若要更新 Customer Hub 界面中的*主要行动呼吁（Main call to action）*：

  1. 打开 Klaviyo 左侧导航栏中的 Service – Customer Hub 选项。
  2. 点击 Settings。
  3. 在 Welcome messages 下，为未经身份验证的购物者自定义显示在“Sign in”按钮上方的行动呼吁。您可以为 Customer Hub 侧滑栏的每个标签页分别进行设置：
  • *For you*
  • *Orders*
  • *Profile*
  1. 点击SAVE
用户自定义的欢迎消息设置界面，包括三个标签：为您推荐、订单和个人资料，每个标签下有相应的登录提示文本示例。
用户自定义的欢迎消息设置界面，包括三个标签：为您推荐、订单和个人资料，每个标签下有相应的登录提示文本示例。

设计您的 Customer Hub #

若要查看用于自定义 Customer Hub 界面的设计选项：

1.导航至 Klaviyo 左侧导航栏中的 Customer Hub。

2.选择 Design。

3.在预览界面的顶部选择 Hub。

A design interface for a Customer Hub, showcasing various editing options including font choices and color settings, with a preview of a welcome message and loyalty rewards section.
A design interface for a Customer Hub, showcasing various editing options including font choices and color settings, with a preview of a welcome message and loyalty rewards section.

4.在 Style（样式） 菜单中，您可以调整显示语言、字体、颜色及样式设置，并在 5.Customer Hub 界面画布中预览这些调整的效果。

6.您可以选择通过自定义 CSS 应用高级样式。

7.点击 Save即可使更改正式生效。

自定义 Customer Hub 小组件 #

除了设计 Customer Hub 本身，您还可以自定义 Hub 小组件。这是一个悬浮在网站上的小型元素，访客点击它即可快速打开 Customer Hub 界面。该小组件可以向购物者展示即时信息，例如收到的聊天消息，以及在将商品添加到“收藏夹（Favorites）”列表时的反馈。我们建议启用小组件界面，以推动与客户的有意义互动，特别是在启用了 Web Chat 和收藏夹功能的情况下。

若要自定义 Hub 小组件：

1.在 Klaviyo 左侧导航栏中选择 Customer Hub。

2.选择 Design。

3.在预览界面的顶部选择 Widget。

Klaviyo Customer Hub设计选项界面，显示用于编辑小组件设置的选项，包括小组件可见性、打开方式、形状、颜色和布局设置。
Klaviyo Customer Hub设计选项界面，显示用于编辑小组件设置的选项，包括小组件可见性、打开方式、形状、颜色和布局设置。

4.在 General菜单中，您可以调整哪些购物者可以看到该小组件，并设置点击小组件时应打开哪个 Customer Hub 视图。

5.在 Style菜单中，您可以调整颜色和样式设置，并在 Customer Hub 小组件界面画布中预览这些调整的效果。

6.在 Layout菜单中，您可以调整该小组件在网站上的显示位置。

7.点击 Save即可使更改正式生效。

自定义其他小组件状态 #

您可以通过点击 Icon 旁的箭头并导航至其他小组件状态，来对不同的状态进行自定义。

Add to Cart状态在产品详情页上可见。当购物者向下滚动且传统的“加入购物车”按钮不再可见时，这个可自定义的小组件会鼓励购物者进行购买或将产品保存以备后用。了解更多关于如何在 Customer Hub 中设置加入购物车小组件的信息。

Customer Hub 的自定义 CSS #

如果 Customer Hub 的设计选项无法满足您的品牌需求，您可以使用自定义 CSS 应用高级样式。

虽然 Customer Hub 使用了 CSS 重置（resets）以避免与您网站的 CSS 发生冲突，但您可能仍需要添加自定义 CSS 来处理特殊情况或应用独特样式，例如悬浮侧滑栏或自定义圆角值。

为您的 Customer Hub 实现自定义 CSS 涉及编辑您的网站代码。这仅建议具备技术能力的营销人员或可以接触到开发人员的用户使用。虽然我们的产品支持自定义 CSS，但除了本指南涵盖的常规指导外，我们的支持团队无法帮助您向 Customer Hub 添加自定义 CSS。为了维护您的数据安全，Klaviyo 的支持团队无法打开您的 HTML 文件。

应用自定义 CSS #

直接将任何自定义 CSS 添加到 Customer Hub 设计设置中的 Custom CSS 区域，并确保保存您的更改。

显示包含自定义 CSS 的编辑界面，用户可输入样式代码以调整 Customer Hub 的外观。
显示包含自定义 CSS 的编辑界面，用户可输入样式代码以调整 Customer Hub 的外观。

Customer Hub 中的所有基本元素都带有以 kl-hub- 为前缀的类名（Class Names）：

  • *文本与标题*：所有文本元素都带有 kl-hub-text 类，而标题则带有 kl-hub-heading 类。
  • *按钮*：按钮带有 kl-hub-button 类，并且还包含其变体类（例如：kl-hub-button-primary、kl-hub-button-secondary 等）。
  • *侧滑栏*：Customer Hub 侧滑栏本身带有 kl-hub-drawer 类。
  • *输入框*：文本输入框带有 kl-hub-input 类。
  • *Content Blocks：所有 Content Blocks 都带有 kl-hub-content-block 类，同时也包含该 Block 的内部名称（Internal name）*（例如：一个名为 “Reward program” 的 Block 类名为 kl-hub-content-block-reward-program）。

这并不是一个详尽的列表；您可以通过浏览器的调试器（Inspect）查看 Customer Hub 来发现更多类名。只要一个元素的类名是以 kl-hub- 开头的，就可以安全地用于自定义 CSS。

免费Klaviyo

了解DC

Partners

您的感觉是什么