How To Add BACK to TOP Button in Shopify Store

back to top in shopify store
back to top in Shopify store theme

For a Shopify store with more than 50 products, you always want to put as many products and product promotion information as on the home page or give more product detail information on the product page. But when clients are viewing your page scroll down and down …., they will find it is a little bit noisy if they are going to return to the top again, normally clients need to scroll up and up again. it is wasting user’s time and not convenient for the clients. So definitely it is not friendly for your clients.

If we can add a floating button somewhere on the page, for example at the right bottom corner or at the middle of the screen right edge, whenever clients want to return to the top, they just need to click or tap the button. It will be very convenient for your clients.

Today I will show you how to add this feature into your Shopify theme step by step.

Scroll to the top implementation in JavaScript

Here we will use jQuery free JavaScript library and scrollTop(), fadeIn(), fadeOut() and animate() functions.

<script>
window.onload = function() {
 jQuery(function($) {
   var offset = 300;
   var duration = 500;
   $(window).scroll(function() {
     if ($(this).scrollTop() > offset) {
       $('.yx-back-to-top').fadeIn(duration);
     } 
     else {
       $('.yx-back-to-top').fadeOut(duration);
     }
   });
   $('.yx-back-to-top').unbind('click.smoothscroll').bind('click', function(e) {
     e.preventDefault();
     $('html, body').animate( { scrollTop: 0 }, duration);
     return false;
   })
 });
}
</script>

Line 2: make our code called when the whole page has been loaded. including all dependent resources such as CSS files and images.

Line 4-5: Define two constants to control when the floating button will appear or disappear and fadeIn/fadeOut duration.

Line 6-12 : Control to show or hide the floating button.

Line 14-18 : Scroll to the TOP of the current page.

Wrapped the code in Shopify Snippets

Add a new snippet named “back-to-top” in your theme snippets.

Add New Snippet in Shopify Theme
Add a New Snippet in Shopify Theme

Copy and Paste the flowing lines into back-to-top.liquid file, save it.

{% comment %} 
  vertical_offset -  Control how far scroll down make back to top button appear
  That value is in pixels.
  pos_from_bottom - set button position offset from bottom of browser
{% endcomment %}
{% assign vertical_offset = 300 %}
{% assign pos_from_bottom = '50%' %}
<a href="#" title="Back to the top" class="yx-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: {{ pos_from_bottom }};
  right: 0px;
  text-decoration: none;
  color: #999;
  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;
}
.yx-back-to-top i {
  vertical-align: middle;
}
.yx-back-to-top span {
  padding-left: 0.5em;
}
.yx-back-to-top i + span {
  padding-left: 0;
}
.yx-back-to-top:hover {
  text-decoration: none;
  color: #555;
}
</style>
<script>
 (function($) {
   $(document).ready(function(e){
     var offset = {{ vertical_offset }};
     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;
     })
   });
 })(jQuery);
</script>

Or you can download this file directly from GitHub.

Line 1-5: comments about why we define these two constants, as for Shopify comment syntax please check here.

Line 8-10: HTML tags to show the floating button, here we use font-awesome font library.

Line 11: load font-awesome font library when page loaded as well.

Line 12-43: CSS style to control the floating button style and position.

Call the above snippet in Shopify Theme

Open your theme layout/theme.liquid file, insert the below line:

{% render ‘back-to-top’ %}

just at before “</body>” tag. then save it.

call snippet
call snippet in Shopify theme

Conclusions

In this article, you have learned how to add a floating button in your Shopify theme and click the button to scroll back to the top of your browser. in the codes you can easily adjust the position of the floating button and when the button will appear. As for button style, you can change it to whatever your favorite from font-awesome font library.

If you found it is very hard for you to make it work in your theme, please leave a message at the bottom comment area or contact us, we will try our best to help you out for free.

Please follow and like us:

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *