zibll子比主题v8.2更新的商城系统,满足各种类型商商城网站,支持发布任意商品,包括所有实物商品,自动发货的虚拟商品和手动发货的虚拟商品,那么同时,不同类型的商品对详情页的UI布局可能也有不同的需求。因此主题也适配了多种效果,满足几乎所有类型的商品显示。
基础配置
我们先说商品详情页的配置功能,这个很简单,一张图就够了:
进入后台-主题设置-商城商品-商品详情页:
![图片[1]-商城商品详情页配置及内容布局教程[V8.2新功能]-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2025/09/20250927131427879-image-104.png?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_1300,h_913)
内容区域布局配置
重点我们说的就是内容区域的布局配置,这直接影响到商品详情显示的UI效果,必须要根据自己商品的情况合理设置,才能达到最好的效果。
配置方法
首选我们看一下,需要配置的几个重点参数和功能:
- 商品详情而布局:全屏、适应内容宽度、适应内容宽度+侧边栏
- 商品详情背景盒子:显示、隐藏
- 古腾堡块:无缝图块
![图片[2]-商城商品详情页配置及内容布局教程[V8.2新功能]-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2025/09/20250927132531316-image-105.png)
配置示例
那么我们根据常见的不同商品类型,举几个例子来展示一下这几种功能配置后的布局效果
1.最常见的实物商品,例如手机、服饰、家电等,目前淘宝京东拼多多等商城最常见的做法就是商品详情介绍全部都是图片拼接,并且全屏展示,效果最佳。
那么我么这样配置:
![图片[3]-商城商品详情页配置及内容布局教程[V8.2新功能]-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2025/09/20250927135419993-iShot_2025-09-27_13.53.48-scaled.jpg)
2.有时候我们的商品介绍并不是全是图片填满,可能就是常规的图文融合,因为一般也只有知名产品、或者大公司才能为自己的产品做全图介绍,那么像这种图片文字都有的详情介绍,使用全屏显示效果就不好看了。那么我们这样配置:
![图片[4]-商城商品详情页配置及内容布局教程[V8.2新功能]-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2025/09/20250927141133138-iShot_2025-09-27_14.11.18-scaled.jpg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_1300,h_2544)
3.很多站长可能不会销售比较知名的品牌产品,例如技术服务、自动发卡等,没有专业的图片介绍,同时还可能需要显示丰富的内容,那么这时候我们可以开启侧边栏(注意:侧边栏不会在移动端显示),整体效果如下:
![图片[5]-商城商品详情页配置及内容布局教程[V8.2新功能]-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2025/09/20250927143246202-iShot_2025-09-27_14.32.07.jpg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_1300,h_1658)
模块化布局
同时,商品详情页也是支持zibll模块化布局的,你可以在详情页的侧边栏、底部等位置添加任意模块(上面截图的侧边栏内容就是通过模块添加的),如果您还未了解过模块化布局,请查看以下教程:
更多TAB栏目
有时候,有些特殊商品我们需要添加更多的内容用于丰富商品介绍,例如手机一般会额外显示参数配置、售后细则等,那么我们可以添加更多TAB栏目,丰富详情页的说明。
效果示例:
![图片[6]-商城商品详情页配置及内容布局教程[V8.2新功能]-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2025/09/20250927145201152-image-108.png?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_1300,h_986)
添加方式:
![图片[7]-商城商品详情页配置及内容布局教程[V8.2新功能]-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2025/09/20250927144953970-image-107.png?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_1300,h_949)
配置继承
不用担心是不是要每次都配置一下,zibll子比主题支持配置继承功能,让配置极其简单又高度自由化,详情请查看以下教程:
ok,教程结束,合理的运用各项配置,就能让您的商城网站优雅漂亮!
- 最新
- 最热
只看作者