普通登录
交流
BBS
装修工具
酷设计模板
京东禁词查询
有偿推广
装修手册
搜索
热搜:
京东装修教程
店铺模板
装修工具
PC店铺模板
手机店铺模板
详情页模板
PC活动模板
手机活动模板
网店秀
»
交流
›
京东店铺模板
›
基础教程
›
覆盖详情页官方人气单品替换为自己产品或者内容 ...
返回列表
[商详模板]
覆盖详情页官方人气单品替换为自己产品或者内容
[复制链接]
admin
当前在线
积分
287
admin
71
主题
71
帖子
287
积分
管理员
积分
287
发消息
发表在 2017-9-14 17:22:34
|
显示全部楼层
|
阅读模式
最终效果如图:
很多人都会抱怨,人气单品里面都是其他店铺的产品,直接导致了产品的流失率,到底有没有办法可以解决这一点。
其实这个人气单品模块是可以利用简单的覆盖原理屏蔽掉的。让用户在前端浏览的时候无法出现其他店铺的产品。
说的更简单一点就是自己做一张海报,或者一个轮播,或者做一个HTML自定义,利用定位 偏移, 来覆盖掉官方输出的信息即可。
利用绝对定位(position: absolute;);X轴偏移(margin-top);堆叠(z-index);
主要利用这3条属性来实现我们产品页所有的覆盖效果,
position: absolute:
可能有的人会问,绝对定位怎么写进去呢,产品页是不能写这条属性的。
其实,我们所用的属性并不一定非要自己写进去,并且我们也没发写进去,那么这里告诉大家一个非常简单的方法;
直接调用官方样式中的属性
,也就是官方的CSS样式表中已经写好的position: absolute; 我们直接调用过来,输出就好了。
调用了官方的样式之后,会出现多余的样式,那么多余的样式自己覆盖掉就行了。留下我们所需要的属性就行了
(如何覆盖官方写的多余的样式:调用官方的类之后,把我们要覆盖的属性写在行内样式中,就可以覆盖掉,CSS代码 行内样式的优先级是最高的,除了important等以外)
如何查找你店铺产品页中可用的绝对定位CLASS类,如下图:
先打开你的任意一个产品,然后右键审查元素,然后按下CTRL+F,输入position: absolute进行搜索:
具体操作如下:
此条属性主要是为来定位我们的内容,达到覆盖官方信息的效果;
将我们的所有最终代码放入到产品关联模块中,放置于相对内容中最顶部,然后调整margin-top值来调整覆盖的位置。
下面我会提供2个代码DEMO用于覆盖人气单品位置;
1,多图轮播,
2,自定义THML模块
(自定义模块就按照你自己的需求进行制作,可以是
单张图片、热区、TABLE表格
等)
(如果需要更多的效果,可以私聊告诉我,我会抽时间帮大家写好DEMO,提供给大家使用)
最终代码使用方法:
1:将代码中对应的图片、链接、文字信息都修改成你店铺内的信息。
2:然后将所有的代码编辑完成之后,拷贝粘贴到
【商品管理】-【关联版式设置】-【顶部内容】
中:
3:发布,发布成功之后进入产品页查看效果,然后在针对所见效果来调整margin-top 的值,来达到最终需要的效果;
具体设置的参数值查找如下:
发布之后进入网页找到刚刚发布的内容,在内容中点击右键 审查 找到我们刚刚发布的代码,如果在右侧的样式中调整具体的参数值。选择数值之后,可以使用上下方向键来实时调整,最终确定值之后,然后再讲代码中的数值修改,再次发布即可。
所有代码回复可见,如果使用中有任何问题,可以加群 群内有人提供帮助,或者找我也行。更多问题可以入群交流
京东装修代码交流QQ群:
321639195
最终效果如图:
很多人都会抱怨,人气单品里面都是其他店铺的产品,直接导致了产品的流失率,到底有没有办法可以解决这一点。
其实这个人气单品模块是可以利用简单的覆盖原理屏蔽掉的。让用户在前端浏览的时候无法出现其他店铺的产品。
说的更简单一点就是自己做一张海报,或者一个轮播,或者做一个HTML自定义,利用定位 偏移, 来覆盖掉官方输出的信息即可。
利用绝对定位(position: absolute;);X轴偏移(margin-top);堆叠(z-index);
主要利用这3条属性来实现我们产品页所有的覆盖效果,
position: absolute:
可能有的人会问,绝对定位怎么写进去呢,产品页是不能写这条属性的。
其实,我们所用的属性并不一定非要自己写进去,并且我们也没发写进去,那么这里告诉大家一个非常简单的方法;
直接调用官方样式中的属性
,也就是官方的CSS样式表中已经写好的position: absolute; 我们直接调用过来,输出就好了。
调用了官方的样式之后,会出现多余的样式,那么多余的样式自己覆盖掉就行了。留下我们所需要的属性就行了
(如何覆盖官方写的多余的样式:调用官方的类之后,把我们要覆盖的属性写在行内样式中,就可以覆盖掉,CSS代码 行内样式的优先级是最高的,除了important等以外)
如何查找你店铺产品页中可用的绝对定位CLASS类,如下图:
先打开你的任意一个产品,然后右键审查元素,然后按下CTRL+F,输入position: absolute进行搜索:
具体操作如下:
此条属性主要是为来定位我们的内容,达到覆盖官方信息的效果;
将我们的所有最终代码放入到产品关联模块中,放置于相对内容中最顶部,然后调整margin-top值来调整覆盖的位置。
下面我会提供2个代码DEMO用于覆盖人气单品位置;
1,多图轮播,
2,自定义THML模块
(自定义模块就按照你自己的需求进行制作,可以是
单张图片、热区、TABLE表格
等)
(如果需要更多的效果,可以私聊告诉我,我会抽时间帮大家写好DEMO,提供给大家使用)
最终代码使用方法:
1:将代码中对应的图片、链接、文字信息都修改成你店铺内的信息。
2:然后将所有的代码编辑完成之后,拷贝粘贴到
【商品管理】-【关联版式设置】-【顶部内容】
中:
3:发布,发布成功之后进入产品页查看效果,然后在针对所见效果来调整margin-top 的值,来达到最终需要的效果;
具体设置的参数值查找如下:
发布之后进入网页找到刚刚发布的内容,在内容中点击右键 审查 找到我们刚刚发布的代码,如果在右侧的样式中调整具体的参数值。选择数值之后,可以使用上下方向键来实时调整,最终确定值之后,然后再讲代码中的数值修改,再次发布即可。
所有代码回复可见,如果使用中有任何问题,可以加群 群内有人提供帮助,或者找我也行。更多问题可以入群交流
[color=rgb(68, 68, 68) !important]
京东装修
代码交流QQ群:
484059713
————————————————————————————————————————
HTML框架:
游客,如果您要查看本帖隐藏内容请
回复
轮播框架代码:
游客,如果您要查看本帖隐藏内容请
回复
回复
使用道具
举报
阳光宝宝旗
当前离线
积分
1
阳光宝宝旗
0
主题
1
帖子
1
积分
新手上路
新手上路, 积分 1, 距离下一级还需 49 积分
新手上路, 积分 1, 距离下一级还需 49 积分
积分
1
发消息
发表于 2017-12-22 11:28:40
|
显示全部楼层
支持支持支持支持支持
回复
使用道具
举报
下一页 »
返回列表
发表回复
高级模式
B
Color
Image
Link
Quote
Code
Smilies
您需要登录后才可以回帖
登录
|
立即注册
本版积分规则
发表回复
回帖后跳转到最后一页
快速回复
返回顶部
返回列表