Add A Back-to-top Button On Shopify Step-by-Step Tutorial – EcomExperts
Shopify Blog

Add A Back-to-top Button On Shopify Step-by-Step Tutorial

Andrew Durot
8 min read

To create a great user page experience for your site visitors, Shopify merchants need to constantly be on the lookout for better ways to improve user experience. One of such ways is by making it easy for customers to return to the top of a page without scrolling for long. 

Many product pages are long, and very often involve a lot of scrolling to return to the top of the page, this is where the Back-to-top button comes in. The sticky back-to-top button is a useful navigation feature that allows visitors to return to the top of the current web page. This button is commonly placed in the lower right-hand corner of the screen, making it "sticky" in a set location so that it is always accessible when the user scrolls down the page.

In this tutorial, you’ll find a detailed guide on how to add the Back-to-top button to your Shopify store, and if you have long pages that require a lot of scrolling, this tutorial is for you. 

Add A  Back-to-top Button To Your Theme.

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit, and then click Actions > Edit code.
  3. In the Snippets directory, click Add a new snippet.
  4. Name your snippet back-to-the-top, then click Create snippet. Your snippet file opens in the code editor.
  5. Paste the following code into your newly created back-to-the-top file:

 

     {% 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> 

 

Click Save.

 

 

Include your snippet  

 

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

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

 

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

 

Click Save.

   


These guide would help you create a better page user experience for your customers by making it a lot easier for them to navigate your product pages. If you found this tutorial helpful, be sure to checkout our other liquid tutorials guaranteed to improve your Shopify store. 

Leave a comment

Guides

Leave a comment