<!-- wp:image {"align":"center","id":188,"width":768,"height":402,"sizeSlug":"large","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="aligncenter size-large is-resized"><img src="https://www.mojoin.com/wp-content/uploads/2020/11/back-to-top-in-shopify-theme-1024x536.jpg" alt="back to top in shopify store" class="wp-image-188" width="768" height="402"/><figcaption>back to top in Shopify store theme</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Today I will show you how to add this feature into your Shopify theme step by step.</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><strong><a href="#scroll-top-injs" title="#scroll-top-injs">Scroll to the top in JavaScript</a></strong></li><li><strong><a href="#wrapped-in-shopify-theme">Wrapped in Shopify snippets</a></strong></li><li><strong><a href="#call-snippet-intheme">Call snippet in Shopify Theme</a></strong></li><li><strong><a href="#conclusions-tips">More Tips</a></strong></li></ul>
<!-- /wp:list -->

<!-- wp:heading -->
<h2 id="scroll-top-injs">Scroll to the top implementation in JavaScript</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Here we will use <a href="https://en.wikipedia.org/wiki/JQuery" title="About JQuery library">jQuery </a>free JavaScript library,its <a href="https://api.jquery.com/scrolltop/" title="jquery scrollTop function">scrollTop()</a>, <a href="https://api.jquery.com/fadeIn/">fadeIn()</a>, <a href="https://api.jquery.com/fadeOut/">fadeOut()</a> and <a href="https://api.jquery.com/animate/">animate()</a> functions.</p>
<!-- /wp:paragraph -->

<!-- wp:enlighter/codeblock -->
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;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;
   })
 });
}
&lt;/script>
</pre>
<!-- /wp:enlighter/codeblock -->

<!-- wp:paragraph -->
<p><strong>Line 2</strong>: make our code called when the whole page has been loaded. including all dependent resources such as CSS files and images.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Line 4-5</strong>: Define two constants to control when the floating button will appear or disappear and fadeIn/fadeOut duration.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Line 6-12</strong> : Control to show or hide the floating button.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Line 14-18 </strong>: Scroll to the TOP of the current page.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 id="wrapped-in-shopify-theme">Wrapped the code in Shopify Snippets</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Add a new snippet named "back-to-top" in your theme snippets.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":206,"width":946,"height":398,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large is-resized"><img src="https://www.mojoin.com/wp-content/uploads/2020/12/add-new-snippet.png" alt="Add New Snippet in Shopify Theme" class="wp-image-206" width="946" height="398"/><figcaption>Add a New Snippet in Shopify Theme</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Copy and Paste the flowing lines into back-to-top.liquid file, save it.</p>
<!-- /wp:paragraph -->

<!-- wp:enlighter/codeblock -->
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">{% 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%' %}
&lt;a href="#" title="Back to the top" class="yx-back-to-top">
 &lt;i class="fa fa-arrow-circle-o-up fa-2x">&lt;/i> 
&lt;/a>
{{ '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' | stylesheet_tag }}
&lt;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;
}
&lt;/style>
&lt;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);
&lt;/script></pre>
<!-- /wp:enlighter/codeblock -->

<!-- wp:paragraph -->
<p>Or you can download this file directly from <a href="https://github.com/michaelyue/shopifytailor/blob/main/back-to-top.liquid">GitHub</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Line 1-5</strong>: comments why we define these two constants, as for Shopify comment syntax please check <a href="https://shopify.github.io/liquid/tags/comment/">here</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Line 8-10</strong>: HTML tags to show the floating button, here we use font-awesome font library.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Line 11</strong>: load font-awesome font library when page loaded.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Line 12-43</strong>: CSS style to control the floating button style and position.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 id="call-snippet-intheme">Call the above snippet in Shopify Theme</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Open your theme <strong>layout/theme.liquid</strong> file, insert the below line:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><em>{% render 'back-to-top' %}</em></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>just at before "&lt;/body>" tag. then save it.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":218,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.mojoin.com/wp-content/uploads/2020/12/call-b2t-snippet-intheme-1024x359.png" alt="call snippet " class="wp-image-218"/><figcaption>call snippet  in Shopify theme</figcaption></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2 id="conclusions-tips">Conclusions</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->