Shopify优化用户体验的一个小细节功能

    我们大多数店铺的页面一般内容比较多,尤其是首页和在手机端展示的页面,所以很多付费主题会有自带一个回到顶部的功能。当用户页面滑到最下面的时候,点击回到顶部按钮,可以直接回到页面顶部导航栏处,优化用户体验。

    对于这个功能,官方也给出了一个示例,大家可以按照下面的操作,给自己的店铺也加上这个小功能。最终完成的效果图如下:

    

01

创建Snippets文件

    点击Online Store -> Themes -> Actions -> Edit Code -> Snippets,点击Add new snippet,创建back-to-top.liquid文件。


02

增加文件代码

    

    将下面的代码复制黏贴到刚刚创建好的文件中。

{% assign vertical_offset_for_trigger = 300 %}

{% assign position_from_bottom = ‘2em’ %}

<a href=”#” title=”Back to the top” class=”back-to-top”>

  <i class=”fa fa-arrow-circle-o-up fa-2x”></i> 

</a>

{{ ‘//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css’ | stylesheet_tag }}

<style>

.back-to-top {

  position: fixed;

  bottom: {{ position_from_bottom }};

  right: 6px;

  text-decoration: none;

  color: #999;

  font-size: 20px;

  padding: 0.3em;

  display: none;

  -webkit-border-top-left-radius: 3px;

  -webkit-border-bottom-left-radius: 3px;

  -moz-border-radius-topleft: 3px;

  -moz-border-radius-bottomleft: 3px;

  border-top-left-radius: 3px;

  border-bottom-left-radius: 3px;

  z-index: 60000;

}

.back-to-top i {

  vertical-align: middle;

}

.back-to-top span {

  padding-left: 0.5em;

}

.back-to-top i + span {

  padding-left: 0;

}

.back-to-top:hover {

  text-decoration: none;

  color: #555;

}

</style>

<script>

window.onload = function() {

 jQuery(function($) {

   var offset = {{ vertical_offset_for_trigger }};

   var duration = 500;

   $(window).scroll(function() {

     if ($(this).scrollTop() > offset) {

       $(‘.back-to-top’).fadeIn(duration);

     } 

     else {

       $(‘.back-to-top’).fadeOut(duration);

     }

   });

   $(‘.back-to-top’).unbind(‘click.smoothscroll’).bind(‘click’, function(e) {

     e.preventDefault();

     $(‘html, body’).animate( { scrollTop: 0 }, duration);

     return false;

   })

 });

}

</script>

    第一行中的300代表当页面往下滑动的距离达到300px时,才会出现回到顶部按钮。如果想调整这个距离,可以调整数字,不需要带后面的单位

    第二行中的2em指按钮与屏幕底部的距离。如果想调整这个距离,可以修改数字即可,数字后面需要带上em.


03

引入snippet文件

    在Layout中点击theme.liquid,在页面底部</body>上面一行增加 {% include ‘back-to-top’ %},如下图:

    根据上面的步骤添加完毕之后点击保存,刷新前台页面,往下滑动鼠标就能看到这个按钮了,点击之后就能回到顶部。

    

    小编的公众号从第一篇文章,到今天差不多刚好是半年的时间。非常感谢大家在这半年的时间里面对小编以及SFS的支持,我们也一直秉承给客户最好的Shopify技术服务的理念。除了通过文字的传达,我们也想与大家来一场线下的面对面的更深入的交流。

    因此,我们将于3.28日(本周四)下午一点半在深圳举办SFS第一期Shopify实战卖家线下沙龙,现场邀请了多位大咖分享实战经验,期待您的参与。本次沙龙活动免费制,如果需要参加会后卖家私享交流聚餐可以购买VIP票种

报名链接:https://www.hdb.com/party/7ntsn.html

点击文章底部阅读原文即可立即报名。

    

    本篇文章就分享到这里了。如果对文中所涉及内容有疑问处,可联系小编QQ : 2790641050。欢迎加入免费Shopify技术交流qq群:632205694,如有疑问,也可在群中与小编实时交流。    

    如果觉得小编的文章对你有价值,动动你的手指,帮忙关注并转发,谢谢!

    

    

   除非注明,文章均为 SFS技术服务 原创,转载请注明来源,谢谢! 

    SFS为国内首家专注于Shopify技术服务的供应商,因为专注,所以专业


    我们的网站:https://app.shopifyfs.com

    商务合作: bd@sfsup.com


往期精彩回顾

如何精细化管理Shopify的客户信息(文末彩蛋)

增强Shopify产品属性的定制类App推荐

Shopify店铺完全免费的Track Order页面编写教程,小白都会!!!

扒一扒那些使用过的折扣App,教你快速跳过那些深坑



▼更多精彩推荐,请关注我们▼
专业的技术服务





本篇文章来源于微信公众号: shopify技术服务

发表评论

关闭菜单