Welcome to CodeCrew Infotech

shape shape
Shape Shape Shape Shape

Back To The Top Button In Shopify

Some websites' home page or any other page is too long and no matter where they are on a page and they can find their way back without having to scroll up again. 

Back to the top button is helpful when you are using a long page that needs lots of scrolling by using this button customers easily move to the top of the page.

In this blog, we’ll find a detailed walkthrough on how to add a Back to Top button to our Shopify store using code.

How to Add Back to Top Button using Code

From Shopify admin and follow Online store > themes > Actions > Edit code

In the left sidebar, the snippet folder creates a new snippet( name of the snippet: Back-to-the-top) and paste this below code.

{% comment %}

    Reduce the 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 the 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>


    {{ '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' | stylesheet_tag }}


    .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;




    (function() {

    function trackScroll() {

        var scrolled = window.pageYOffset;

        var coords = {{ vertical_offset_for_trigger }};


        if (scrolled > coords) {



        if (scrolled < coords) {




    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);




After that open the theme.liquid file in the Layout folder and paste the below code before the </body> tag.

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