Thêm nút Lên trên đầu trang - Back to top cho Shopify

Bài hướng dẫn Thêm nút Lên trên đầu trang - Back to top cho Shopify

Các bạn vào theo đường dẫn Online Store >> Theme >> "..." >> Edit HTML/CSS >> snippets >> add a new snippet

Bạn đặt tên là back-to-the-top

Rồi các bạn mở file back-to-the-top.liquid lên

Rồi các bạn copy và pase đoạn code sau vào:

{% comment %}   Reduce below value if you need the back to the top button to appear higher up on the page.   That value is in pixels.{% endcomment %}{% assign vertical_offset_for_trigger = 300 %}{% comment %}   Vertical offset from bottom of browser for the position of the button.{% endcomment %}{% assign position_from_bottom = '4em' %}<a href="#" title="Back to top" class="back-to-the-top">  <span>Back to the top</span> <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: 0px;  text-decoration: none;  color: #999;  background-color: #eee;  font-size: 16px;  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>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>

Rồi nhấn save lại 

Giờ các bạn mở file theme theo đường dẫn : Online Store >> Theme >> "..." >> Edit HTML/CSS >> Layout >> theme.liquid

Các bạn nhấn Ctr-F tìm đến thẻ đóng này: </body>

Rồi thêm dòng lệnh này vào trước nó:

{% include 'back-to-the-top' %}

Rồi save lại,vậy là ok thui!