商品详情页设计

商品详情页面是 App 购物链路中非常重要的一部分，优质的产品页面有助于提高转化率。在商品详情页的设计编辑页，您可以编辑公告栏内容、商品推荐、最近浏览等，以达到最佳效果。

设置路径

安装 Shopper App 后，点击应用> 我的应用> Shopper App > App 设计> Design 按钮，在顶部选择“商品详情页” 。

设置步骤

在所有的组件设置中，瞄点定位导航、公告栏和商品信息组件顺序为固定的，不可进行位置调整；其他组件可可根据您的需求随意调整顺序。

选择预览商品

每次进入商详页编辑页时右侧预览区会默认展示 Shopper App 渠道下的第一个商品，您可点击🔽箭头切换预览商品。如您还未有创建商品数据或未有标记Shopper App 渠道的商品，则预览区会出现[No available product.]的提示。

配置顶部应用栏

【顶部应用栏】模块允许你自定义显示在商品详情页页眉中的组件。该模块包含三个可配置区域：【左侧 icon】、【中间】和【右侧 icon】。每个区域都旨在提升导航体验并增强用户互动。

各区域可用组件

配置顶部应用栏组件

你可以按照以下步骤配置【顶部应用栏】区域：

1. 前往【商品详情页】，然后点击【顶部应用栏】展开菜单。

2. 选择你要配置的区域：【左侧 icon】、【中间】或【右侧 icon】。

   

3. 在【组件类型】下拉菜单中，选择要添加的组件类型：

   

   • 图标：点击【+ 添加图标】，最多可插入 3 个预设选项。
   • 图片：根据需要上传品牌或促销图片。
   • 搜索栏：添加预设搜索栏，为顾客提供便捷的站内浏览方式。
4. 点击【保存】或【发布】，应用你的设置。

设置瞄点定位导航

【瞄点定位导航】组件可在商品详情页中提供快速定位功能，帮助用户一键跳转至指定模块（如商品信息、商品推荐、最近浏览等），从而提升浏览效率与加购体验。

配置瞄点定位导航组件

你可以按照以下步骤配置【瞄点定位导航】区域：

1. 前往【商品详情页】编辑页面，点击【+ 添加组件】>【瞄点定位导航】。

   

2. 在右侧设置面板中，进入【锚点设置】区域。

3. 点击【+ 新增锚点】选择需要跳转的页面组件（如【产品描述】、【商品推荐】等）。除了默认的【商品】外，最多可再添加 3 个锚点。

   

4. 在输入框中自定义对应的锚点名称（例如：【商品】、【商品描述】、【最近浏览】）。

   

5. 新增锚点后，您可以进行以下管理操作：

   • 点击【多语言】图标，配置锚点名称的多语言内容。

   • 点击【切换】图标，更换该锚点关联的跳转组件。

   • 点击【删除】图标，移除该锚点。

   

6. 完成设置后，点击右上角的【保存】或【发布】，应用更改。

配置商品相册

【商品相册】组件用于展示商品图片，是商品详情页中最重要的视觉模块之一。您可以通过该组件设置图片展示方式与浏览体验，从而提升用户浏览效率与购买意愿。

• 顶部应用栏样式：用于控制【公告栏】与商品图集的显示方式：

  • 覆盖模式：公告栏显示在商品图集下方，商品图片会扩展覆盖至页眉区域。

  • 固定模式：公告栏显示在商品图集上方，将页眉与商品图集分隔为两个独立区域。

• 相册布局：让您根据页面设计需求选择不同的商品图片展示方式：

  • 全宽布局：商品图片横向铺满屏幕，带来更沉浸的视觉体验。

  • 非全宽布局：商品图片保留左右边距，使页面结构更清晰，适用于多种款式的商品。

• 视差滚动效果：开启后，商品图片与页面滚动将产生不同步的移动效果，增强视觉层次感与沉浸体验：

  • 顶部固定式：图片固定在页面顶部，页面内容向上滚动。

  • 居中位移式：图片始终居中展示，随页面滚动产生位移但不缩放。

  注意：【视差滚动效果】仅在【顶部应用栏样式】为【覆盖模式】时可用。

• 缩略图导航：开启后，商品图片下方将显示缩略图列表，帮助用户快速浏览并切换商品图片：

  • 缩略图覆盖式：缩略图覆盖在商品图片区域上方展示。

  • 缩略图下方展示：缩略图显示在商品图片下方区域。

  • 缩略图尺寸：可选择缩略图的显示大小，或自定义尺寸

• 沉浸式商品进入效果：开启【沉浸式商品进入效果】后，用户从商品列表或推荐页进入商品详情页时，将以更流畅的过渡动画进入商品图片区域，提升整体浏览体验。

  注意：【沉浸式商品进入效果】仅在【相册布局】为【全宽布局】时可用。

您可根据实际需求开启或关闭以上功能，以优化商品图片的浏览体验。

设置公告栏

公告栏组件展示在商品详情页顶部，公告栏组件内容支持选择同步 App 首页公告栏或者是独立设定两种。如选择【同步 App 首页公告栏】，则公告栏文字、颜色等都不可编辑；如选择【独立设定】，则可编辑公告栏文字、颜色，设定发布时间等，也可隐藏单条公告栏内容。

设置商品信息

“商品信息”位置固定在公告栏下方，不可移动模块顺序。

• 商品摘要：内容显示在商品名称下方
• 评级：内容显示在商品摘要下方，商品评级需安装“商品评价”应用后，才可开启（请访问本文以了解更多商品评论信息。）
• 款式选择器：可通过动态源下商品组的产品选项或商品名称来关联商品，可以实现多款商品在同一款商品里显示；商品组-产品选项支持关联数据类型为”商品“的动态源，商品组-选项名称支持关联数据类型为”单行文本“的动态源（请访问本文以了解更多动态源信息。）

设置商品描述

• 编辑标题&选择需要展示的商品：标题可直接自订或通过关联数据类型为”单行文本“的动态源进行设置；如您想在特定的商品里显示此商品描述，可通过”商品标签“选择对应的商品组。（请访问本文以了解更多商品标签信息。）
• 设置样式：选择是否显示图标，并选择你偏好的展示样式。如果选择【手风琴折叠】，你可以进一步设置默认状态为【全部展开】、【部分展开】或【全部收起】。

设置自定义详情

自定义详情组件支持添加 10 个。

• 编辑标题&选择需要展示的商品：标题可直接自订或通过关联数据类型为”单行文本“的动态源进行设置；如您想在特定的商品里显示此商品描述，可通过”商品标签“选择对应的商品组（请访问本文以了解更多商品标签信息）；选择内容类型，支持自定文本内容或直接输入跳转页面。
• 设置样式：选择是否需要图标。

设置关联分类

关联分类组件可通过关联数据类型为”商品分类“的动态源。（请访问本文以了解更多元字段信息。）

设置自定义图片

自定义图片组件支持添加多个，支持上传图片并设置跳转页面，并可根据条件标签选择在特定的商品范围内展示。

设置买家视频秀

买家视频秀可通过关联数据类型为”url“且赋值类型为”多个值”的动态源。（请访问本文以了解更多动态源信息。）

设置最近浏览

最近浏览组件可隐藏或删除，且可设置标题和显示类型。

设置商品评论

商品评论组件需安装“商品评价”应用后，才可开启该组件；如店铺未安装“商品评价”应用，组件为置灰状态，可通过下方提示进行操作。（请访问本文以了解更多商品评论信息。）

对于【Product Review】和【Questions & Answers 】组件，你都可以配置组件标题、操作按钮文本、查看所有文本，以及默认显示的评价或问题数量。

设置商品推荐

商品推荐组件需安装“商品推荐”应用后，才可开启该组件；如店铺未安装“商品推荐”应用，组件为置灰状态，可通过下方提示进行操作。（请访问本文以了解更多商品评论信息。）

设置自定义组件

您可以在 Shopper App 后台创建自定义组件后，将其嵌入至商店应用的商品详情页，用以优化页面的设计或功能。点击【+ 添加组件】后，前往【自定义组件】区块，选择适用的组件嵌入页面，或点击【+ 创建自定义组件】前往组件编辑器新增组件。关于自定义组件的创建详情，请参阅此帮助中心文档。

标记为【开发中】的组件为未发布状态，无法直接应用于正式版本中。但您可以通过 Snaplook 预览组件效果。确认内容无误后，可在代码编辑器中发布该组件，并将其用于正式应用。详细说明请参见《发布上线》部分。

设置悬浮图标

您可以在商品详情页添加一个随页面滚动始终可见的悬浮图标，并链接至在线客服或活动页面，以提升客服效率或推动活动参与。该组件支持【同步自首页悬浮图标组件】或【独立设定】两种方式。如果选择同步首页，图标将继承首页的设置，无法单独更改。如选择独立设定，您可为详情页单独配置图标，包括以下选项：

• 基础设置：为图标命名，选择图标显示的位置，并上传要在 App 中展示的图标图片。
• 功能类型：选择将图标链接至【活动页面】或【在线客服】：
  • 若选择【活动页面】：请设置跳转的页面链接。
  • 若选择【在线客服】：
    • 请选择要使用的客服服务。Shopper App 目前支持与 Shulex 集成，这是一款基于 AI 的实时客服解决方案。如需了解更多，请参阅《Shulex 集成指南》。
    • 请确认是否启用【未读消息提示】。启用后，当用户有未读消息时将显示红点提醒。
• 启用时间：您可根据需要设置悬浮图标的发布时间。

设置悬浮操作栏

悬浮操作栏可将特定栏位固定显示于页面上，方便用户在浏览过程中随时进行操作，有助于提升使用体验与购买转化率。系统预设提供【添加到购物车按钮】按钮，你也可以点击【+ 添加内容】插入自定义组件作为悬浮操作栏使用。详细操作请参见《设置自定义组件》部分。

发布上线

完成编辑并确认预览无误后，您可以根据实际需求，点击右上角的【保存】或【发布】按钮：

• 【保存】：用于暂存当前编辑内容，便于后续继续修改，不影响现有商店应用的展示。

• 【发布】 >【发布到 Snaplook】：将组件发布至 Snaplook，以预览并测试实际效果。适用于正式发布前的功能验证与样式检查。详见相关帮助中心文档。

• 【发布】 >【发布到正式 App】：将当前设置发布至正式商店应用，使更改内容对终端用户生效。

如何联系我们

SHOPLINE 拥有专业的本地支持团队，为有需求和疑惑的商家提供帮助。您可以通过联系 SHOPLINE 店铺后台及官方网站的实时客服来寻求 SHOPLINE 的帮助。
*如有 SHOPLINE 功能使用感受或需求建议，快点击【功能反馈】告诉我们吧！