商品详情页设计
商品详情页面是 App 购物链路中非常重要的一部分，优质的产品页面有助于提高转化率。在商品详情页的设计编辑页，您可以编辑公告栏内容、商品推荐、最近浏览等，以达到最佳效果。
设置路径
安装 Shopper App 后，点击应用> 我的应用> Shopper App > App 设计> Design 按钮，在顶部选择“商品详情页” 。
设置步骤
在所有的组件设置中，公告栏和商品信息组件顺序为固定的，不可进行位置调整；其他组件可可根据您的需求随意调整顺序。
选择预览商品
每次进入商详页编辑页时右侧预览区会默认展示 Shopper App 渠道下的第一个商品，您可点击🔽箭头切换预览商品。如您还未有创建商品数据或未有标记Shopper App 渠道的商品，则预览区会出现[No available product.]的提示。
配置顶部应用栏
【顶部应用栏】模块允许你自定义显示在商品详情页页眉中的组件。该模块包含三个可配置区域：【左侧 icon】、【中间】和【右侧 icon】。每个区域都旨在提升导航体验并增强用户互动。
各区域可用组件
| 区域 | 组件类型 | 描述 |
|---|---|---|
| 左侧 icon | 图标 | 添加最多 3 个预设图标（如心愿单或分类按钮）。 |
| 图片 | 上传店铺 Logo 或品牌图片，以强化店铺识别度。 | |
| 搜索栏 | 添加搜索栏，方便用户快速查找内容。 | |
| 中间 | 图片 | 上传品牌或促销图片，用于展示店铺或活动。 |
| 搜索栏 | 在中间放置搜索栏，方便用户搜索商品或内容。 | |
| 右侧 icon | 图标 | 添加最多 3 个预设图标（如购物袋、消息盒或分类按钮）。 |
配置顶部应用栏组件
你可以按照以下步骤配置【顶部应用栏】区域：
-
前往【商品详情页】，然后点击【顶部应用栏】展开菜单。
-
选择你要配置的区域：【左侧 icon】、【中间】或【右侧 icon】。
-
在【组件类型】下拉菜单中，选择要添加的组件类型：
- 图标：点击【+ 添加图标】，最多可插入 3 个预设选项。
- 图片：根据需要上传品牌或促销图片。
- 搜索栏：添加预设搜索栏，为顾客提供便捷的站内浏览方式。
-
点击【保存】或【发布】，应用你的设置。
配置商品相册中的顶部应用栏样式
【商品相册】中的【顶部应用栏样式】设置控制【公告栏】与商品图集的显示方式：
- 覆盖模式：公告栏显示在商品图集下方，商品图片会扩展覆盖至页眉区域。
- 固定模式：公告栏显示在商品图集上方，将页眉与商品图集分隔为两个独立区域。
设置公告栏
公告栏组件展示在商品详情页顶部，公告栏组件内容支持选择同步 App 首页公告栏或者是独立设定两种。如选择【同步 App 首页公告栏】，则公告栏文字、颜色等都不可编辑；如选择【独立设定】，则可编辑公告栏文字、颜色，设定发布时间等，也可隐藏单条公告栏内容。
设置商品信息
“商品信息”位置固定在公告栏下方，不可移动模块顺序。
- 商品摘要：内容显示在商品名称下方
- 评级：内容显示在商品摘要下方，商品评级需安装“商品评价”应用后，才可开启（请访问本文以了解更多商品评论信息。）
- 款式选择器：可通过动态源下商品组的产品选项或商品名称来关联商品，可以实现多款商品在同一款商品里显示；商品组-产品选项支持关联数据类型为”商品“的动态源，商品组-选项名称支持关联数据类型为”单行文本“的动态源（请访问本文以了解更多动态源信息。）
设置商品描述
- 编辑标题&选择需要展示的商品：标题可直接自订或通过关联数据类型为”单行文本“的动态源进行设置；如您想在特定的商品里显示此商品描述，可通过”商品标签“选择对应的商品组。（请访问本文以了解更多商品标签信息。）
- 设置样式：选择是否显示图标，并选择你偏好的展示样式。如果选择【手风琴折叠】，你可以进一步设置默认状态为【全部展开】、【部分展开】或【全部收起】。
设置自定义详情
自定义详情组件支持添加 10 个。
- 编辑标题&选择需要展示的商品：标题可直接自订或通过关联数据类型为”单行文本“的动态源进行设置；如您想在特定的商品里显示此商品描述，可通过”商品标签“选择对应的商品组（请访问本文以了解更多商品标签信息）；选择内容类型，支持自定文本内容或直接输入跳转页面。
- 设置样式：选择是否需要图标。
设置关联分类
关联分类组件可通过关联数据类型为”商品分类“的动态源。（请访问本文以了解更多元字段信息。）
设置自定义图片
自定义图片组件支持添加多个，支持上传图片并设置跳转页面，并可根据条件标签选择在特定的商品范围内展示。
设置买家视频秀
买家视频秀可通过关联数据类型为”url“且赋值类型为”多个值”的动态源。（请访问本文以了解更多动态源信息。）
设置最近浏览
最近浏览组件可隐藏或删除，且可设置标题和显示类型。
设置商品评论
商品评论组件需安装“商品评价”应用后，才可开启该组件；如店铺未安装“商品评价”应用，组件为置灰状态，可通过下方提示进行操作。（请访问本文以了解更多商品评论信息。）
对于【Product Review】和【Questions & Answers 】组件，你都可以配置组件标题、操作按钮文本、查看所有文本，以及默认显示的评价或问题数量。
设置商品推荐
商品推荐组件需安装“商品推荐”应用后，才可开启该组件；如店铺未安装“商品推荐”应用，组件为置灰状态，可通过下方提示进行操作。（请访问本文以了解更多商品评论信息。）
设置自定义组件
您可以在 Shopper App 后台创建自定义组件后，将其嵌入至商店应用的商品详情页，用以优化页面的设计或功能。点击【+ 添加组件】后，前往【自定义组件】区块，选择适用的组件嵌入页面，或点击【+ 创建自定义组件】前往组件编辑器新增组件。关于自定义组件的创建详情，请参阅此帮助中心文档。
标记为【开发中】的组件为未发布状态，无法直接应用于正式版本中。但您可以通过 Snaplook 预览组件效果。确认内容无误后，可在代码编辑器中发布该组件，并将其用于正式应用。详细说明请参见《发布上线》部分。
设置悬浮图标
您可以在商品详情页添加一个随页面滚动始终可见的悬浮图标，并链接至在线客服或活动页面，以提升客服效率或推动活动参与。该组件支持【同步自首页悬浮图标组件】或【独立设定】两种方式。如果选择同步首页，图标将继承首页的设置，无法单独更改。如选择独立设定，您可为详情页单独配置图标，包括以下选项：
- 基础设置：为图标命名，选择图标显示的位置，并上传要在 App 中展示的图标图片。
-
功能类型：选择将图标链接至【活动页面】或【在线客服】：
- 若选择【活动页面】：请设置跳转的页面链接。
- 若选择【在线客服】：
- 请选择要使用的客服服务。Shopper App 目前支持与 Shulex 集成，这是一款基于 AI 的实时客服解决方案。如需了解更多，请参阅《Shulex 集成指南》。
- 请确认是否启用【未读消息提示】。启用后，当用户有未读消息时将显示红点提醒。
- 启用时间：您可根据需要设置悬浮图标的发布时间。
设置悬浮操作栏
悬浮操作栏可将特定栏位固定显示于页面上，方便用户在浏览过程中随时进行操作，有助于提升使用体验与购买转化率。系统预设提供【添加到购物车按钮】按钮，你也可以点击【+ 添加内容】插入自定义组件作为悬浮操作栏使用。详细操作请参见《设置自定义组件》部分。
发布上线
完成编辑并确认预览无误后，您可以根据实际需求，点击右上角的【保存】或【发布】按钮：
-
【保存】：用于暂存当前编辑内容，便于后续继续修改，不影响现有商店应用的展示。
-
【发布】 >【发布到 Snaplook】：将组件发布至 Snaplook，以预览并测试实际效果。适用于正式发布前的功能验证与样式检查。详见相关帮助中心文档。
-
【发布】 >【发布到正式 App】：将当前设置发布至正式商店应用，使更改内容对终端用户生效。
如何联系我们
SHOPLINE 拥有专业的本地支持团队，为有需求和疑惑的商家提供帮助。您可以通过联系 SHOPLINE 店铺后台及官方网站的实时客服来寻求 SHOPLINE 的帮助。
*如有 SHOPLINE 功能使用感受或需求建议，快点击【功能反馈】告诉我们吧！