[教程]全部商品页的商品显示列修改
Shopex模板教程
在使用Shopex网店系统的用户都会发现Shopex网店所有的模块是固定,用户只有删除或不使用这些模块,有没有办法根据自己商店的情况或销售物品的特点去定义些新的模块,从而体现自己的网店特色和芸芸众多的网店有所区别?
通过挖掘Shopex网店系统强大功能,结合网店模板设计技巧,使您的网店改头换面。
在模板教程中提到了很多shopex模板特有的专业的名词和一些概念信的东西,这里就不做具体解释,我只作模板修改中的一些技巧性的东西和制作思路。
希望初次使用shopex模板的朋友结合“帮助中心” http://www.shopex.cn/help/一起查看。
第三节全部商品页的商品显示列修改
上次在bbs上看见用户提:官方发布的免费模板中全部商品页的商品显示都是以一列商品的排列显示的,应他要求我现在将其分二列显示。 注意在修改过程中不断的清除缓存文件夹。 第一步
选一套模板为例,我们就看看“Cn00003明年今日”,首先找到全部商品页的框架文件—— goods_search_list.dwt,在里面找到控制商品排列的
功能标签—— {TPL_GOODSLIST,TPL_GOODSSEARCHLIST}从上面的功能标签来看对应的TPL外观文件应该是—TPL_GOODSSEARCHLIST.htm
第二步
打开其外观文件:TPL_GOODSSEARCHLIST.htm
找到如下代码
将其修改为
修改原理:…..
第三步:
找到控制其外观文件的css样式,应该是goodslist.css(对应的位置应该在,模板文件的images里面),打开它,
找到下面的代码:
.GoodsSearchWarp .items {/*商品条目循环项*/
width:95%;
padding:10px;
float:left;
border-bottom:1px dotted #ccc;
}
将其修改为
.GoodsSearchWarp .items {/*商品条目循环项*/
width:45%;
float:left;
margin-right:5px;
margin-top:5px;
}
修改原理:…..
第四步:查看效果
修改前图
修改后的效果
总结:
这是简单的一个实现你们想要的二列显示的制作思路,具体实现二列显示以后,根据不同的模板,对细节还要不断的调整,才能达到你想要的效果,我这就不深入介绍了,
我在这篇教程中给大家留了点功课,没有将修改原理诉告诉大家,希望大家在修改中仔细思考一下为什么这样改?好好揣摩揣摩相信你们一定能找到答案,知道答案的同学也可以在下面讨论一下将修改原理补上。同时可以将您修改好的模板发出来看看,介绍一下简单的修改思路,希望能有很好的深入…….在讨论中共同进步。谢谢…..
在使用Shopex网店系统的用户都会发现Shopex网店所有的模块是固定,用户只有删除或不使用这些模块,有没有办法根据自己商店的情况或销售物品的特点去定义些新的模块,从而体现自己的网店特色和芸芸众多的网店有所区别?
通过挖掘Shopex网店系统强大功能,结合网店模板设计技巧,使您的网店改头换面。
在模板教程中提到了很多shopex模板特有的专业的名词和一些概念信的东西,这里就不做具体解释,我只作模板修改中的一些技巧性的东西和制作思路。
希望初次使用shopex模板的朋友结合“帮助中心” http://www.shopex.cn/help/一起查看。
第三节全部商品页的商品显示列修改
上次在bbs上看见用户提:官方发布的免费模板中全部商品页的商品显示都是以一列商品的排列显示的,应他要求我现在将其分二列显示。 注意在修改过程中不断的清除缓存文件夹。 第一步
选一套模板为例,我们就看看“Cn00003明年今日”,首先找到全部商品页的框架文件—— goods_search_list.dwt,在里面找到控制商品排列的
功能标签—— {TPL_GOODSLIST,TPL_GOODSSEARCHLIST}从上面的功能标签来看对应的TPL外观文件应该是—TPL_GOODSSEARCHLIST.htm
第二步
打开其外观文件:TPL_GOODSSEARCHLIST.htm
找到如下代码
将其修改为
修改原理:…..
第三步:
找到控制其外观文件的css样式,应该是goodslist.css(对应的位置应该在,模板文件的images里面),打开它,
找到下面的代码:
.GoodsSearchWarp .items {/*商品条目循环项*/
width:95%;
padding:10px;
float:left;
border-bottom:1px dotted #ccc;
}
将其修改为
.GoodsSearchWarp .items {/*商品条目循环项*/
width:45%;
float:left;
margin-right:5px;
margin-top:5px;
}
修改原理:…..
第四步:查看效果
![](https://i-blog.csdnimg.cn/blog_migrate/d461eb01484293bf2755cf0176199510.png)
修改前图
![](https://i-blog.csdnimg.cn/blog_migrate/42e7805d8a5f472e717757405093b090.png)
修改后的效果
总结:
这是简单的一个实现你们想要的二列显示的制作思路,具体实现二列显示以后,根据不同的模板,对细节还要不断的调整,才能达到你想要的效果,我这就不深入介绍了,
我在这篇教程中给大家留了点功课,没有将修改原理诉告诉大家,希望大家在修改中仔细思考一下为什么这样改?好好揣摩揣摩相信你们一定能找到答案,知道答案的同学也可以在下面讨论一下将修改原理补上。同时可以将您修改好的模板发出来看看,介绍一下简单的修改思路,希望能有很好的深入…….在讨论中共同进步。谢谢…..