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

admin

最终效果如图：


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

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

说的更简单一点就是自己做一张海报，或者一个轮播，或者做一个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框架： 游客，如果您要查看本帖隐藏内容请回复 轮播框架代码： 游客，如果您要查看本帖隐藏内容请回复

阳光宝宝旗

支持支持支持支持支持