商品详情组件
使用场景
商品详情组件：展示商品详细信息的组成部分，通常包括商品图片、名称、价格、描述、规格、评价等信息。通过商品详情组件，消费者可以全面了解商品的各个方面，从而做出购买决策。
组件视图
组件使用
商品详情属于单独页面，可以在店铺设计的左上角配置下拉跳转到对应配置页，如图：
配置说明
当选中商品详情组件后，可以对其做细化配置：
1、商品概要
| 属性名 | 属性说明 | 备注 |
|---|---|---|
| 模块标题样式调整 | 设置商品概要标题的字体，字号，颜色，粗细等 | |
| 模块描述样式调整 | 设置商品摘要的字体，字号，颜色等 | |
| 上传头部背景图 | 商品概要的背景图 | 没上传背景图默认展示用背景色填充，同主题色 |
| 内容对齐方式 | 商品概要整体内容对齐方式，分‘左对齐’，‘右对齐’，‘居中’三种 |
2、商品详情
| 属性名 | 属性说明 | 备注 |
|---|---|---|
| 模块标题样式调整 | 设置商品标题的字体，字号，颜色，粗细等 | |
| 模块描述样式调整 | 设置商品摘要的字体，字号，颜色等 | |
| 图片布局(网页端及移动端) | 用于配置商品详情图片展示的样式。 网页端：1. 平铺, 将商品图自上而下依次平铺展示展示；2. 缩略图，即轮播图展示(如果只有一张图时则不会展示轮播图样式)。 移动端：移动端图片展示都为轮播图样式，区别在于 1.隐藏缩略图轮播图下展示点点; 2. 展示缩略图轮播图下展示缩略图 | 注意：:如果编辑商品页没有上传图片则这里会展示默认图。 |
| 展示面包屑/展示评论星级/展示价格/展示折扣标签/展示 SKU-ID 信息/展示商品属性/展示商品库存 | 根据所选状态是否展示对应内容 | |
| 显示 SKU(需填写商品 SKU) | 根据所选状态是否展示商品 SKU，需要在编辑商品页配置各个商品的 SKU，且当前商品处于可以购买的状态(即有库存)。 | |
| SKU 样式 | SKU 样式分为: 1.展示所有 SKU，即将所有 SKU 平铺展示出来; 2. 展示 SKU 列表，即 SKU 展示为下拉列表。 | |
| 加入购物车按钮设置 | 设置加入购物车按钮字体，字号， 颜色等属性 | |
| 加入购物车背景颜色 | 配置按钮背景颜色 | |
| 加入购物车描边颜色 | 配置按钮描边颜色 | |
| 加入购物车圆角配置 | 配置按钮圆角 | |
| 加入购物车描边宽度 | 按钮描边宽度 | |
| 图片比例 | 指商品图片的展示比例。 | |
| 商品背景颜色 | 配置商品图片后的背景颜色 | |
| 支付渠道 | 根据所选值展示对应支付渠道 | |
| 显示图标内容 | 根据所选状态，控制是否展示图标 | 打开的状态下可上传图标和自定义对应的文字及链接，最多上传三个图标 |
3、商品描述和商品评论
| 属性名 | 属性说明 | 备注 |
|---|---|---|
| 展示商品详情 | 控制是否展示‘商品详情’ | ｜ |
| 商品描述标题 | 可以设置商品详情的内容，字体，字号等 | |
| 展示商品评价 | 控制是否展示‘商品评价’ | |
| 商品评价标题 | 可以设置商品评价的内容，字体，字号等 | |
| 选中下划线颜色配置 | 配置选中对应 tab 下方的下划线的颜色 | |
| 内容区域背景色配置 | 商品详情和商品评价内容区域的背景颜色配置 | |
| 背景区域圆角配置 | 商品详情和商品评价内容区域的圆角配置 | |
| 背景边框颜色 | 商品详情和商品评价内容区域的边框颜色配置 | |
| 背景边框宽度 | 商品详情和商品评价内容区域的边框宽度配置 |
4、商品评论内容配置
该部分需在主题——>评论里设置
| 属性名 | 属性说明 | 备注 |
|---|---|---|
| 评论区域主色 | 配置评论部分没配置前的黑色显示的部分，如星星， 用户名等 | ｜ |
| 评价按钮内容配置 | 评价按钮文字内容及字体，字号等配置 | |
| 按钮颜色配置 | 评价按钮背景颜色配置 | |
| 按钮圆角 | 评价按钮圆角配置 | 0-40 |
| 按钮边框宽度 | 评价按钮边框宽度配置 | 0-12 |
| 按钮边框颜色 | 评价按钮边框颜色配置 |
注意事项
1.商品详情分两个模版，默认模版只有商品详情主体部分， 第二个模版有商品概要，商品详情，商品描述和评论三部分。
2.在编辑时展示的是权重最大的商品对应的商品详情。
3.要看具体的配置效果，需在后台把商品信息完善全，比如要看sku的展示，需配置sku, 要看评论，需安装评论插件，编写对应的评论且设置展示