我的帐户页设计
您可自订个人账户页的展示内容及跳转链接,将用户所关心的和您想呈现给用户的内容都放置出来。
访问我的账户页面编辑器
安装 Shopper App 后,点击【应用】> 【Shopper App】 > 【App 设计】>【设计】按钮,在顶部选择【我的帐户】。
| 备注:您在发布应用前,必须先完成 My Account 的设置。 |
在【我的帐户】编辑器中,您可以设置顶部应用栏、公告栏、注册/登录及主要页面等内容。各项功能将在下文中逐一详细说明。
配置顶部应用栏
【顶部应用栏】模块允许你自定义显示在【我的帐户】页眉中的组件。该模块包含三个可配置区域:【左侧 icon】、【中间】和【右侧 icon】。每个区域都旨在提升导航体验并增强用户互动。
各区域可用组件
| 区域 | 组件类型 | 描述 |
|---|---|---|
| 左侧 icon | 图标 | 最多可添加 3 个预设图标(如心愿单或分类按钮)。 |
| 图片 | 上传店铺 Logo 或品牌图片,以强化店铺识别度。 | |
| 搜索栏 | 添加搜索栏,方便用户进行导航和内容搜索。 | |
| 中间 | 页面名称 | 显示【我的帐户】页的标题。 |
| 图片 | 上传品牌或促销图片,用于展示店铺或活动。 | |
| 搜索栏 | 添加搜索栏,方便用户搜索商品或内容。 | |
| 右侧 icon | 图标 | 最多可添加 3 个预设图标(如购物袋、收件箱或更多按钮)。 |
配置顶部应用栏组件
你可以按照以下步骤配置【顶部应用栏】区域:
-
前往【我的帐户】,然后点击【顶部应用栏】展开菜单。
-
选择你要配置的区域:【左侧 icon】、【中间】和【右侧 icon】。
-
在【组件类型】下拉菜单中,选择要添加的组件类型:
-
- 【图标】:点击【+ 添加图标】,最多可插入 3 个预设选项。
- 【图片】:根据需要上传品牌或促销图片。
- 【搜索栏】:添加预设搜索栏,为顾客提供便捷的站内浏览方式。
- 【页面名称】:显示【我的帐户】页的标题。
-
-
点击【保存】或【发布】,应用你的设置。
设置公告栏
【公告栏】固定显示在页面顶部,不能删除或调整顺序。您可以选择与首页公告栏同步,或单独设置:
- 【同步首页公告栏】:文本、颜色和其他设置将继承首页公告栏的配置,且不可单独编辑。
- 【独立设定】:你可以新增最多 3 条公告,自定义文本、颜色和其他设置,设置发布时间,并可隐藏单条公告。
设置注册/登录卡片文案
可自订卡片文案,不可调整顺序及隐藏。
设置页面所需呈现的内容
可修改预设内容和添加新的内容,内容不能超过 50 条。
- 设置已预设的内容:下图为已经预设好的内容及可进行的操作项;其中 Member 和 Message 需安装对应的插件后才会生效。
| 内容 | 重命名 | 自订图标 | 删除 | 移动顺序 | 隐藏 |
| Personal Information | ✔ | ✔ | ✘ | ✔ | ✘ |
| Member | ✔ | ✔ | ✘ | ✔ | ✔ |
| Order | ✔ | ✔ | ✘ | ✔ | ✘ |
| Settings | ✔ | ✔ | ✘ | ✔ | ✘ |
| Help & Information | ✔ | ✔ | ✘ | ✔ | ✘ |
| Terms & Conditions | ✔ | ✔ | ✘ | ✔ | ✘ |
| Message | ✔ | ✔ | ✘ | ✔ | ✔ |
-
添加自订内容:您可点击 “Add” 选择您需要添加的内容,支持添加自定 Item 或添加分割线,自订的内容可进行重命名、自订图标、删除、移动顺序和隐藏等操作。
| 备注:如您已经开启 Dark Mode,图标需同时上传 Light Mode 和 Dark Mode 的图片。 |
设置悬浮图标
您可以在【我的账户】页面添加一个随页面滚动始终可见的悬浮图标,并链接至在线客服或活动页面,以提升客服效率或推动活动参与。该组件支持【同步自首页悬浮图标组件】或【独立设定】两种方式。如果选择同步首页,图标将继承首页的设置,无法单独更改。如选择独立设定,您可为【我的账户】页单独配置图标,包括以下选项:
- 基础设置:为图标命名,选择图标显示的位置,并上传要在 App 中展示的图标图片。
-
功能类型:选择将图标链接至【活动页面】或【在线客服】:
- 若选择【活动页面】:请设置跳转的页面链接。
- 若选择【在线客服】:
- 请选择要使用的客服服务。Shopper App 目前支持与 Shulex 集成,这是一款基于 AI 的实时客服解决方案。如需了解更多,请参阅《Shulex 集成指南》。
- 请确认是否启用【未读消息提示】。启用后,当用户有未读消息时将显示红点提醒。
- 启用时间:您可根据需要设置悬浮图标的发布时间。
发布上线
编辑完且预览无问题后,点击右上角【发布】按钮将设计发布至 App 端。如您还未准备好,可先点击【保存】。