查看: 2897|回复: 7

如何给网站添加一个自定义图片的 back to top 按钮

[复制链接]

1

主题

2

帖子

32

积分

新手上路

Rank: 1

积分
32
发表于 2018-4-12 12:24:41 | 显示全部楼层 |阅读模式
本帖最后由 MAXMAX 于 2018-4-17 20:35 编辑

原版的样子:

修改后的样子:


shopify 官方教程地址:https://help.shopify.com/themes/ ... -back-to-top-button

  • Online Store > Themes.
  • Actions > Edit code.
  • 点击 Snippets 文件夹.
  • 点击Add a new snippet.
  • 命名为 back-to-the-top.
  • 复制以下内容到 刚新建的文档中:记得替换https://cdn.shopify.com/your-image-url-btm.png为自己的图片地址

  1. {% comment %}
  2.   Reduce below value if you need the back to the top button to appear higher up on the page.
  3.   That value is in pixels.
  4. {% endcomment %}
  5. {% assign vertical_offset_for_trigger = 300 %}
  6. {% comment %}
  7.   Vertical offset from bottom of browser for the position of the button.
  8. {% endcomment %}
  9. {% assign position_from_bottom = '15em' %}
  10. <a href="#" title="Back to the top" class="back-to-top">

  11. <style>
  12. .back-to-top:before {
  13.     content: url(https://cdn.shopify.com/your-image-url-btm.png) !important;  
  14. }
  15. .back-to-top {
  16.   position: fixed;
  17.   bottom: {{position_from_bottom}};
  18.   right: 0px;
  19.   text-decoration: none;
  20.   color: #999;
  21.   background-color: #eee;
  22.   font-size: 16px;
  23.   padding: 0.3em;
  24.   display: none;
  25.   -webkit-border-top-left-radius: 3px;
  26.   -webkit-border-bottom-left-radius: 3px;
  27.   -moz-border-radius-topleft: 3px;
  28.   -moz-border-radius-bottomleft: 3px;
  29.   border-top-left-radius: 3px;
  30.   border-bottom-left-radius: 3px;
  31.   z-index: 60000;
  32. }
  33. .back-to-top i {
  34.   vertical-align: middle;
  35. }
  36. .back-to-top span {
  37.   padding-left: 0.5em;
  38. }
  39. .back-to-top i + span {
  40.   padding-left: 0;
  41. }
  42. .back-to-top:hover {
  43.   text-decoration: none;
  44.   color: #555;
  45. }
  46. </style>
  47. <script>
  48. window.onload = function() {
  49. jQuery(function($) {
  50.    var offset = {{vertical_offset_for_trigger}};
  51.    var duration = 500;
  52.    $(window).scroll(function() {
  53.      if ($(this).scrollTop() > offset) {
  54.        $('.back-to-top').fadeIn(duration);
  55.      }
  56.      else {
  57.        $('.back-to-top').fadeOut(duration);
  58.      }
  59.    });
  60.    $('.back-to-top').unbind('click.smoothscroll').bind('click', function(e) {
  61.      e.preventDefault();
  62.      $('html, body').animate( { scrollTop: 0 }, duration);
  63.      return false;
  64.    })
  65. });
  66. }
  67. </script>
复制代码





  • 点击保存
  • 找到Layouts  文件夹, 打开 theme.liquid.
  • 复制{% include 'back-to-the-top' %} 粘贴到</body> tag前面
  • 点击保存。


如果你不喜欢有背景, 将background-color: #eee; 修改为background-color: transparent;
{% assign position_from_bottom = '4em' %} 修改4em的大小调整按钮离底部的距离, 数字越大按钮越高。









本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

1

主题

50

帖子

143

积分

注册会员

Rank: 2

积分
143
发表于 2018-5-11 00:10:48 | 显示全部楼层
很棒耶,刚好想找这个东西
回复 支持 反对

使用道具 举报

3

主题

13

帖子

125

积分

注册会员

Rank: 2

积分
125
发表于 2018-8-26 14:16:01 | 显示全部楼层
感谢楼主无私分享!
回复 支持 反对

使用道具 举报

1

主题

385

帖子

824

积分

高级会员

Rank: 4

积分
824
发表于 2018-12-9 15:24:59 | 显示全部楼层
谢谢分享,涨知识了
回复 支持 反对

使用道具 举报

0

主题

8

帖子

34

积分

新手上路

Rank: 1

积分
34
QQ
发表于 2019-4-21 14:05:40 | 显示全部楼层
感谢楼主分享
5年独立站运营推广
回复 支持 反对

使用道具 举报

0

主题

1

帖子

6

积分

新手上路

Rank: 1

积分
6
发表于 2019-7-22 15:25:23 | 显示全部楼层
666666666666
回复 支持 反对

使用道具 举报

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

本版积分规则

热门推荐

Shopify联系我们页面的表单如何设置
Shopify联系我们页面的表
最近群里有几个朋友问到了这个同样的问题,如下图所示,联系我们的页面表单是怎么做出
提高转化率的一个小提示
提高转化率的一个小提示
最近测试,在Checkout按钮下面添加了一次些促销信息,转化率稍稍有些提升,但是因为数
如何查看一个Shopify网站的某个功能使用的是什么插件
如何查看一个Shopify网站
之前有一篇文章已经介绍过,使用Commerce Inspector的Chrome插件可以查看到一个Shopif
Commerce Inspector - 快速查询Shopify网站使用的主题和插件
Commerce Inspector - 快
Commerce Inspector是一款可以帮你快速了解你的竞争对手的Shopify网站的一些数据的的
购物按钮下的 购物安全保证图片 怎么添加
购物按钮下的 购物安全保
购物按钮下的 购物安全保证图片 怎么添加
论坛重新开启用户注册功能
论坛重新开启用户注册功能
论坛注册流程 第1步,获取论坛注册的邀请链接搜索微信公众号“WaimaoB2C”或者扫码关
请教如何去掉网站底部的powered by shopify 字句
请教如何去掉网站底部的po
请教如何去掉网站底部的powered by shopify 字句

Archiver|手机版|小黑屋|

  • Copyright   ©2015-2016  Shopify论坛 | WaimaoB2C.cn   Powered by©Discuz!   ( 冀ICP备15011551号-4 )
快速回复 返回顶部 返回列表