shopify插入mailto代码_给shopify添加返回顶部按钮代码

一，由于shopify很多主题没有回到顶部的快捷按钮，或者快捷按钮不好看，而且插件实现的回到顶部会拖慢网速，那么你可以考虑如下方法，通过添加写好的代码实现自己添加回到顶部按钮，直接复制如下代码，将其插入theme.liquid文件里面的</head>标签后面即可。
关于找到相应位置路径如下截图所示：

<!--to top start-->
<style>
.box{z-index:999;
position:fixed;
right:10px;
bottom: 70px;
height:50px;
width: 50px;
text-align:center;
padding-top:20px;
background-color:#4d90fe!important;
border-radius: 20%;
overflow: hidden;
}
.box:hover:before{;
top:50%
}
.box:hover .box-in{
visibility: hidden;
}
.box:before{
position: absolute;
top: -50%;
left: 50%;
transform: translate(-50%,-50%);
content:'TOP';
width: 40px;
color:peru;
font-weight:bold;
 
}
.box-in{
visibility: visible;
display:inline-block;
height:20px;
width: 20px;
border: 3px solid black;
border-color: white transparent transparent white;
transform:rotate(45deg);
}
 
h1{font-size:22px!important;
text-transform: capitalize!important;}
 
.title{text-transform: capitalize!important;}
 
h3{text-transform:capitalize!important;}
.collection_title{text-transform:capitalize!important;}
 
</style>
 
<div id="box" class="box">
<div class="box-in"></div>
</div>
<script>
var timer = null;
box.onclick = function(){
cancelAnimationFrame(timer);
//获取当前毫秒数
var startTime = +new Date();
//获取当前页面的滚动高度
var b = document.body.scrollTop || document.documentElement.scrollTop;
var d = 500;
var c = b;
timer = requestAnimationFrame(function func(){
var t = d - Math.max(0,startTime - (+new Date()) + d);
document.documentElement.scrollTop = document.body.scrollTop = t * (-c) / d + b;
timer = requestAnimationFrame(func);
if(t == d){
cancelAnimationFrame(timer);
}
});
}
</script>
 
<!--to top end-->

二，样式如下图所以：鼠标 移动到上面，会变成红色字体TOP，鼠标移开，字体消失，变成白色尖角。

三，关于更改它显示的样式以及内容；

更改内容：修改content:'TOP';里面的TOP，替换成所需内容；
更改背景：修改.box{background-color: #4d90fe!important;}里面的#4d90fe，换成所需背景颜色码；
更改字体颜色：修改.box:before {color: peru;}里面的peru颜色值；
更改按钮的尺寸：修改.box{height:50px;width: 50px;}里面的height和width像素值；
更改离右边边框的距离：修改.box{right:10px;}里面10px，替换成所需像素值；
更改离网页底部的距离：修改.box{bottom:70px;}里面的70px,替换成所需像素值；