因应目前使用手机浏览网页的顾客日益增加，为符合用户浏览习惯，本次更新全面优化手机端「商品详情页面」，透过更直观、更顺畅的页面布局，提升顾客的购物效率与消费体验。
⚠️ 开始前请注意：如您欲启用新版手机端商品详情页，请至「SHOPLINE 后台 > 网店设计 > 网店分页 > 系统标准页」前往「商品详情页」，详细设定步骤请参考：[即将推出] 系统标准页：商品详情页。
本篇文章将分别介绍优化页面：
一、商品主要购买区
1. 新增商品缩略图
如有设定商品的规格选项图片，点击切换规格时，会新增该规格缩略图在缩图的第一个位置。
2. 强化选购流程的重点信息
集中商品主图、价格、规格选项等信息，让顾客的购买行为更顺畅。
-
如商品有评价信息，会于商品名称的下方展示，点击星等旁边的「X 评价」后会从底部拉起评价弹窗，即可浏览所有顾客评价。
3. 简化页面部分信息
简化未登入追踪流程：点击「加入追踪清单」后，即跳转到登入／注册页面。 |
简化定期购商品相关信息、社群分享按钮设计 |
4. 调整预购、低库存提示信息
调整预购提示样式，使其更融合于页面中 |
调整低库存提示位置，更配合顾客的购买动线 |
5. 优化商品规格选项
商品价格
若商品为不同规格不同价格，将展示价格区间。待顾客选中某商品规格时，才会展示该规格价格。
尚未选中规格时的商品价格 |
选中规格的商品价格 |
进入商品详情页面时不预选规格选项
进入商品详情页面时，如顾客未点击某商品规格，将会依照商品规格的设置方式呈现不预选规格的画面。
商品规格展示顺序
选择第 1 层规格款式后，依照第 1 层选中款式，系统会展示第 2、3 层匹配的款式，并隐藏不匹配的规格款式。
＊示例：颜色为橄榄绿的圆形精油皂只有大尺寸、中尺寸，且只有预购选项，因此选择橄榄绿时会隐藏小尺寸及现货选项的规格。
＊注意：
- 由于系统会依序检查匹配的款式选项，如先选择第 2 层款式，要等到选中第 1 层款式后，才能检查第 2、3 层匹配的款式。
- 选中单一款式后，切换规格选项时若某一层的款式不匹配，则会变回默认未选中的状态，顾客须重新选择。
规格无库存时售罄提示
- 如某规格完全无库存时，会直接展示反灰提示售罄，但顾客仍可点击反灰的规格选项。
- 选择第 1 层规格款式后，系统会检查第 2、3 层匹配款式的库存状态，若有款式无库存，则该选项会反灰。
- 由于系统会依序检查匹配款式的库存状态选项，因此如果先选择第 2、3 层的规格，仍须等选择第 1 层规格后，才能检查该款式的库存状态。
＊示例：先选择「尺寸」和「预购 / 现货」选项后，仍须选择「颜色」才能检查该款式是否有库存。
6. 重点按钮置底
进入商品详情页面时，以下重点按钮将会自动置底：
- 加入购物车
- 立即购买
- 现在预购
- 联系我们
- 即将开卖
- 销售结束
- 货到通知我
＊示例：
加入购物车 / 立即购买 |
货到通知我 |
7. 新增「选择商品规格」提示
顾客在操作以下行为前若没有选择商品规格，会出现「请选择商品规格」的提示，并将页面锚定到规格选项区块：
- 加入购物车
- 立即购买
- 现在预购
- 货到通知我
- 加入追踪清单
- 查看可取货门市
＊示例：
二、商品摘要区
1. 适用优惠活动
此区块带入适用优惠活动，默认展示前 3 项，可点击「全部优惠 (n)」展开所有该商品适用的优惠活动。
优惠活动展示内容
为了让顾客更清楚地掌握优惠信息，系统会根据优惠设定自动组成展示文字。展示格式如下：
{会员类型} + {优惠类型} + {截止时间} + {套用范围} + {优惠名称}「会员类型」和「优惠类型」加强重点标示，文字颜色默认套用网店主题色。如您的网店版型支持 SHOP Builder，则会套用商品促销标签颜色。组成优惠活动格式的文字呈现规则如下：
| 会员类型 |
依照优惠活动的目标群组展示不同文字：
＊注意：此处与网店前台相同，如优惠活动的目标群组为会员或指定会员，优惠活动会在会员 / 指定会员登入后才呈现。 |
| 优惠类型 |
依照优惠类型展示不同文字：
|
| 截止时间 |
带入优惠活动的截止时间，以灰色文字展示「截至 {MM/DD hh:mm}」。如点击截止时间，会出现提示「依据当地时区显示」。 |
| 套用范围 |
依照优惠套用范围展示不同文字：
＊注：若优惠有专属活动页，将展示「>」箭头，点击后可跳转至活动分页。 |
| 优惠名称 |
带入优惠活动全名： |
2. 商品摘要
此区块位于适用优惠活动下方，带入「商品摘要」的内容。顾客可在浏览优惠时同步获取商品重点信息。
三、商品详情区
商品详情区的置顶标签页包含：「商品描述」、「更多说明」、「评价」及「推荐」，以下分别说明：
1. 商品描述
此区块带入「商品描述」的内容，默认为展开。
2. 更多说明
此区块将会依序展示「更多商品图片」、「付款方式」及「送货方式」的内容。
- 更多商品图片：带入「更多商品图片」的内容，默认为展开。
＊注意：各版型此处的图片间距皆统一。
- 付款方式及送货方式：带入该商品可用的「付款方式」及「送货方式」的全名，默认为收合。
3. 评价
此区块带入「商品评价」资料，外层最多展示最新的 2 则评价，点击「查看全部评价」后才会开启顾客评价弹窗，即可检视所有评价 。
＊注意：
- 此处与网页版相同，要至 SHOPLINE 后台「商品及分类 > 商品评价」，点选「商品评价设定」，并启用「在前台启用「商品评价」功能」后，商品评价才会展示于前台页面。
- 目前新版手机端商品详情页不支持 Amazon 商品评价串接，因此此处不会出现评价来源的筛选器。
4. 推荐
此区块带入「相关商品」的内容与自订的商品陈列版型。
上述置顶标签页若未在后台输入相应资料，该区块将不会展示于商品详情段落。点击其余页签将会锚定到相应的信息区块。
＊示例：未填入「商品描述」的内容，则隐藏该区块。
延伸阅读
评论