自定义页面设计
Shopper App 提供自定义页面设计能力，可根据业务诉求灵活创建原生页面，支持更多的营销业务场景。
页面创建步骤
-
安装 Shopper App 后，从以下位置访问设计面板：Apps > Shopper App > App Design > Design > Custom Screens。
-
点击“Create Page”。
-
填写页面名称后点击“完成”，页面创建成功。
注意：可最多创建 5 个自定义页面，当已经创建了 5 个后，页面创建按钮会置灰不可点击。
页面内容设置
当您完成页面创建后，会自动进入自定义页面的内容设置页，页面名称为您刚刚设置的页面名称。
配置顶部应用栏
【顶部应用栏】模块让你可以配置显示在自定义页面页眉的组件。该模块包含三个可配置区域：：【左侧 icon】、【中间】和【右侧 icon】。每个区域都旨在优化导航体验，并提升用户互动性。
各区域可用组件
| 区域 | 组件类型 | 描述 |
|---|---|---|
| 左侧 icon | 图标 | 最多可添加 3 个预设图标（如心愿单或分类按钮）。 |
| 图片 | 上传店铺 Logo 或品牌图片，以强化店铺识别度。 | |
| 搜索栏 | 添加搜索栏，方便用户进行导航和内容搜索。 | |
| 中间 | 页面名称 | 显示自定义页面的标题。 |
| 图片 | 上传品牌或促销图片，用于展示店铺或活动。 | |
| 搜索栏 | 添加搜索栏，方便用户搜索商品或内容。 | |
| 右侧 icon | 图标 | 最多可添加 3 个预设图标（如购物袋、收件箱或更多按钮）。 |
配置顶部应用栏组件
你可以按照以下步骤配置【顶部应用栏】区域：
-
前往所选的自定义页面，然后点击【顶部应用栏】展开菜单。
-
选择你要配置的区域：【左侧 icon】、【中间】和【右侧 icon】。
-
在【组件类型】下拉菜单中，选择要添加的组件类型：
-
- 【图标】：点击【+ 添加图标】，最多可插入 3 个预设选项。
- 【图片】：根据需要上传品牌或促销图片。
- 【搜索栏】：添加预设搜索栏，为顾客提供便捷的站内浏览方式。
- 【页面名称】：显示自定义页面的标题。
-
-
点击【保存】或【发布】，应用你的设置。
设置公告栏
公告栏组件展示在自定义页面顶部，支持选择同步 App 首页公告栏或独立设置两种。如选择【同步 App 首页公告栏】，则公告栏文字、颜色等都不可编辑；如选择【独立设定】，则可编辑公告栏文字、颜色，设定发布时间等，也可隐藏单条公告栏内容。
正文部分设置
点击【+ 添加组件】，选择您需要添加的组件，并根据组件编辑面板进行组件设置。组件类型支持的范围和首页设计保持一致，请导航至《首页设计：正文组件部分》文档查看各个组件的设置方法。
设置悬浮图标
您可以在自定义页面添加一个随页面滚动始终可见的悬浮图标，并链接至在线客服或活动页面，以提升客服效率或推动活动参与。该组件支持【同步自首页悬浮图标组件】或【独立设定】两种方式。如果选择同步首页，图标将继承首页的设置，无法单独更改。如选择独立设定，您可为自定义页面独配置图标，包括以下选项：
- 基础设置：为图标命名，选择图标显示的位置，并上传要在 App 中展示的图标图片。
-
功能类型：选择将图标链接至【活动页面】或【在线客服】：
- 若选择【活动页面】：请设置跳转的页面链接。
- 若选择【在线客服】：
- 请选择要使用的客服服务。Shopper App 目前支持与 Shulex 集成，这是一款基于 AI 的实时客服解决方案。如需了解更多，请参阅《Shulex 集成指南》。
- 请确认是否启用【未读消息提示】。启用后，当用户有未读消息时将显示红点提醒。
- 启用时间：您可根据需要设置悬浮图标的发布时间。
发布上线
完成编辑并确认预览无误后，您可以根据实际需求，点击右上角的【保存】或【发布】按钮：
- 【更多】：点击【更多】后，可编辑页面名称或删除页面。
- 【保存】：用于暂存当前编辑内容，便于后续继续修改，不影响现有商店应用的展示。
- 【发布】 >【发布到 Snaplook】：将组件发布至 Snaplook，以预览并测试实际效果。适用于正式发布前的功能验证与样式检查。详见相关帮助中心文档。
- 【发布】 >【发布到正式 App】：将当前设置发布至正式商店应用，使更改内容对终端用户生效。
支持跳转自定义页面的组件范围
首页设计部分组件支持设置自定义页面的跳转链接，有：Carouse、Custom image banner、Customize video banner、Product carousel、Product showcase、Product collection display，以及 Bottom navigation。导航至 Shopper App 首页设计查看设置方法。