How to Add a Back to Top Button

Using Code Navigate to Online Store > Themes in your Shopify admin.

1. Find the theme you want to change, then go to Actions > Edit code.
2. Click Add a New Snippet in the Snippets directory.
3. Back up to the top, name your snippet, and then click Create snippet. The code editor displays your snippet file.
4. Copy and paste the following code into your freshly 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>

__________________________________________________________________________

Save the file.

Include your excerpt here.

Open the theme.liquid file in the Layouts folder.

Scroll all the way to the bottom of the file. Copy and paste the following code right above the ending /body> tag:

________________________________

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

________________________________

Save the file.

Synopsis

The Back to stop button enhances the page user experience by helping them to avoid the long wait time and tension of scrolling.

To add the floating button to your Shopify theme, follow this instruction.