Shopify 助手设计和前端

目录

助手设计配置

该 聊天设计 选项卡允许您完全自定义聊天小部件的视觉外观,以确保其与您店铺的品牌无缝集成。

基本身份与定位

身份标识: 您可以定义显示在标题栏中的“助手名称”(例如“AI 助手”),并可选地提供“助手头像 URL”,以在名称旁显示自定义徽标或图片。

定位: 使用“屏幕位置”下拉菜单选择小部件在您店铺前端的停靠位置(通常为右下角)。

布局与尺寸

您可以使用像素(px)、视口高度(vh)或 rem 单位精确控制聊天界面的物理尺寸和形状:

调整整体“聊天宽度”(例如,400px)和“聊天最大高度”(例如,50vh)。.

使用“消息内边距”微调间距,并通过“消息容器圆角”(18px)和“聊天窗口圆角”(12px)等圆角控件调整界面的弯曲度。.

通过“聊天字体大小”、“聊天标题文本大小”和“聊天标题图标大小”设置来控制排版尺寸。.

颜色主题

该界面提供丰富的十六进制代码选择器,可修改聊天窗口的每一个元素。.

背景: 自定义主要的“聊天背景”(#FFFFFF)、“客户消息背景”和“助手消息背景”(#000000)。您还可以为特定区域着色,例如“欢迎文本区域背景”或“常见问题背景颜色”(#F9FAFB)。

边框: 定义消息字段、FAQ 框和链接的细微轮廓,以打造统一的外观。

常见问题

FAQ 选项卡允许您创建预写问题,这些问题会在用户输入第一条消息之前显示。这有助于即时解决常见问题,而无需 AI 生成。.

点击“+ 添加常见问题”以创建新条目。.

对于每个条目,输入常见的“问题”(例如“您能将产品运送到美国吗?”),并使用富文本编辑器(粗体、斜体、下划线、删除线)格式化静态“答案”。.

您可以拖放以重新排序问题,或使用铅笔和垃圾桶图标来编辑或删除它们。.

快速链接

“链接”选项卡允许您在聊天欢迎屏幕底部添加直接导航按钮。这非常适合将用户引导至其他支持渠道或重要的商店页面。.

网格布局: 首先,通过选择“网格列数”来定义链接的显示方式(例如,设置为3将水平排列显示)。

添加链接: 点击“+ 添加链接”创建新按钮。提供“链接标题”(如“WhatsApp”或“邮件”),并输入准确的“链接 URL”(使用标准格式,如电子邮件的 mailto: 或直接电话号码)。

图标: 您可以从内置的矢量图标库(如信封、电话、地球或日历)中选择图标来直观地表示链接。或者,您可以使用“自定义图片”下的“选择文件”按钮上传自己的图标。

准备好在 Shopify 上销售更多了吗?

在您的 Shopify 商店中安装 Liliwi,即可获得我们团队提供的免费设置服务。. 

以低至 $1 的价格使用完整服务。.