If you have pages that are long and require a lot of scrolling, you can add a Back to the top button to your theme.

Create a back-to-the-top snippet

1. In the Snippets directory, click Add a new snippet.

2. Name your snippet back-to-the-top, then click Create snippet. Your snippet file opens in the code editor.

3. Paste the following code into your newly created back-to-the-top file:

   Copy

       {% 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 = '6em' %}
   
       <a id="BackToTop" href="#" title="Back to the top" class="back-to-top hide">
       <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;
       -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;
       }
       .hide {
       display: none!important;
       }
       </style>
       <script>
       (function() {
       function trackScroll() {
           var scrolled = window.pageYOffset;
           var coords = {{ vertical_offset_for_trigger }};
   
           if (scrolled > coords) {
           goTopBtn.classList.remove('hide');
           }
           if (scrolled < coords) {
           goTopBtn.classList.add('hide');
           }
       }
   
       function backToTop() {
           if (window.pageYOffset > 0) {
           window.scrollBy(0, -80);
           setTimeout(backToTop, 0);
           }
       }
   
       var goTopBtn = document.querySelector('.back-to-top');
   
       window.addEventListener('scroll', trackScroll);
       goTopBtn.addEventListener('click', backToTop);
       })();
       </script>

4. Click Save.

Include your snippet

1. In the Layouts folder, open the theme.liquid file.

2. Scroll to the bottom of the file. Right above the closing </body> tag, paste this code:

   Copy

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

   Your code should look like this:

   

3. Click Save.

Configure the back to the top button (optional)

To customize your back to the top button, click here and look at the first lines of your snippet.

• To change the position of your button relative to the bottom of the browser, edit the position_from_bottom value:

{% assign position_from_bottom = '4em' %}

• To change how far down a customer needs to scroll before the button is revealed, edit the vertical_offset_for_trigger value:

{% assign vertical_offset_for_trigger = 300 %}

Demo store

Have a look at the demo store.