返回列表 发新帖

[商详模板] 覆盖详情页官方人气单品替换为自己产品或者内容

[复制链接]

68

主题

68

帖子

129

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
129
发表在  2017-9-14 17:22:34 | 显示全部楼层 | 阅读模式
最终效果如图:
104330l9ee90kq33bbf0c6.gif

很多人都会抱怨,人气单品里面都是其他店铺的产品,直接导致了产品的流失率,到底有没有办法可以解决这一点。

其实这个人气单品模块是可以利用简单的覆盖原理屏蔽掉的。让用户在前端浏览的时候无法出现其他店铺的产品。

说的更简单一点就是自己做一张海报,或者一个轮播,或者做一个HTML自定义,利用定位 偏移, 来覆盖掉官方输出的信息即可。

利用绝对定位(position: absolute;);X轴偏移(margin-top);堆叠(z-index);

主要利用这3条属性来实现我们产品页所有的覆盖效果,

position: absolute:

可能有的人会问,绝对定位怎么写进去呢,产品页是不能写这条属性的。

其实,我们所用的属性并不一定非要自己写进去,并且我们也没发写进去,那么这里告诉大家一个非常简单的方法;

直接调用官方样式中的属性,也就是官方的CSS样式表中已经写好的position: absolute; 我们直接调用过来,输出就好了。


调用了官方的样式之后,会出现多余的样式,那么多余的样式自己覆盖掉就行了。留下我们所需要的属性就行了

(如何覆盖官方写的多余的样式:调用官方的类之后,把我们要覆盖的属性写在行内样式中,就可以覆盖掉,CSS代码 行内样式的优先级是最高的,除了important等以外)

如何查找你店铺产品页中可用的绝对定位CLASS类,如下图:
先打开你的任意一个产品,然后右键审查元素,然后按下CTRL+F,输入position: absolute进行搜索:
具体操作如下:
104417j5pazgo5a8mb5gbf.png
此条属性主要是为来定位我们的内容,达到覆盖官方信息的效果;
将我们的所有最终代码放入到产品关联模块中,放置于相对内容中最顶部,然后调整margin-top值来调整覆盖的位置。

下面我会提供2个代码DEMO用于覆盖人气单品位置;
1,多图轮播,
2,自定义THML模块
(自定义模块就按照你自己的需求进行制作,可以是单张图片、热区、TABLE表格等)
(如果需要更多的效果,可以私聊告诉我,我会抽时间帮大家写好DEMO,提供给大家使用)


最终代码使用方法:
1:将代码中对应的图片、链接、文字信息都修改成你店铺内的信息。
2:然后将所有的代码编辑完成之后,拷贝粘贴到 【商品管理】-【关联版式设置】-【顶部内容】中:

104449gg0ttu5gqddx6mz7.png
3:发布,发布成功之后进入产品页查看效果,然后在针对所见效果来调整margin-top 的值,来达到最终需要的效果;

具体设置的参数值查找如下:

发布之后进入网页找到刚刚发布的内容,在内容中点击右键 审查 找到我们刚刚发布的代码,如果在右侧的样式中调整具体的参数值。选择数值之后,可以使用上下方向键来实时调整,最终确定值之后,然后再讲代码中的数值修改,再次发布即可。

104532hj4b9b3fr0i3yzvp.gif


所有代码回复可见,如果使用中有任何问题,可以加群 群内有人提供帮助,或者找我也行。更多问题可以入群交流
京东装修代码交流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框架:
游客,如果您要查看本帖隐藏内容请回复



轮播框架代码:

游客,如果您要查看本帖隐藏内容请回复

回复

使用道具 举报

0

主题

1

帖子

1

积分

新手上路

Rank: 1

积分
1
发表于 2017-12-22 11:28:40 | 显示全部楼层
支持支持支持支持支持
回复

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

在线客服小黑屋网店秀 ( 鲁ICP备13008304号-5 )

GMT+8, 2018-9-24 13:41 , Processed in 1.077138 second(s), 20 queries .

Copyright ©2018-网店秀 鲁ICP备13008304号-5 版权所有 All Rights Reserved.

网店秀,为您提供店铺装修在线编辑工具,装修模块和设计素材的网站。

快速回复 返回顶部 返回列表
QQ群

网店秀官方交流群立即加入