查看: 1876|回复: 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

帖子

115

积分

注册会员

Rank: 2

积分
115
发表于 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
回复 支持 反对

使用道具 举报

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

本版积分规则

热门推荐

请教如何去掉网站底部的powered by shopify 字句
请教如何去掉网站底部的po
请教如何去掉网站底部的powered by shopify 字句
Shopify建站运营推广相关问题征集
Shopify建站运营推广相关
承蒙各位Shopify卖家朋友们的支持和厚爱,在运营WaimaoB2C.com博客和WaimaoB2C.cn论坛
提高转化率的一个小提示
提高转化率的一个小提示
最近测试,在Checkout按钮下面添加了一次些促销信息,转化率稍稍有些提升,但是因为数
购物按钮下的 购物安全保证图片 怎么添加
购物按钮下的 购物安全保
购物按钮下的 购物安全保证图片 怎么添加
Shopify产品页面插入视频方法
Shopify产品页面插入视频
在Shopify网站的产品页面插入视频的两种方法: 这两种方法的前提都是你首先要将视频上
网站不做广告,Google analytics数据分析怎么有部分流量是paid...
网站不做广告,Google ana
如题, 我们的shopify网站目前主要引流方式还是引导一些其他平台的客户过来购买,平时
删除buy on amazon
删除buy on amazon
群主大人,我想删除这个按钮,比较稳妥的做法是什么? 因为之前修改代码忘记备份,产

Archiver|手机版|小黑屋|

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