How To Make Back To Top Button for Shopify Store

Are you looking to add a Back to Top button in your Shopify store using HTML, CSS, JavaScript, JSON, and Liquid language? Your search ends there. Just follow our provided instructions to make modifications to your Shopify theme and you will have back to top button working fine on your store. Here’s a step-by-step guide on how to do it:

1. Access your Shopify admin panel and go to “Online Store > Themes”.
2. Locate the theme you’re currently using and click on “Actions > Edit Code”.
3. In the “Sections” directory, create a section with the name “back-to-top” and paste below code inside this section.

<style>
  
/* Back to top with progress */
@-webkit-keyframes border-transform{0%,100%{border-radius:63% 37% 54% 46% / 55% 48% 52% 45%}14%{border-radius:40% 60% 54% 46% / 49% 60% 40% 51%}28%{border-radius:54% 46% 38% 62% / 49% 70% 30% 51%}42%{border-radius:61% 39% 55% 45% / 61% 38% 62% 39%}56%{border-radius:61% 39% 67% 33% / 70% 50% 50% 30%}70%{border-radius:50% 50% 34% 66% / 56% 68% 32% 44%}84%{border-radius:46% 54% 50% 50% / 35% 61% 39% 65%}}
.back-to-top{background:#fff;position:fixed;right:25px;bottom:25px;height:46px;width:46px;cursor:pointer;display:block;border-radius:99em;box-shadow:inset 0 0 0 2px rgb(0 0 0 / 10%);z-index:10000;opacity:0;visibility:hidden;transform:translateY(-15px);transition:all .3s linear}
.back-to-top.active-progress{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top::after{position:absolute;font-family:'Fontawesome';content:'\f106';text-align:center;line-height:44px;font-size:26px;color:rgba(0,0,0,0.3);left:0;top:0;height:46px;width:46px;cursor:pointer;display:block;z-index:1;transition:all .3s linear}
.back-to-top:hover::after{opacity:0}
.back-to-top::before{position:absolute;font-family:'Fontawesome';content:'\f106';text-align:center;line-height:44px;font-size:26px;opacity:0;background:black;-webkit-background-clip:text;-webkit-text-fill-color:transparent;left:0;top:0;height:46px;width:46px;cursor:pointer;display:block;z-index:2;transition:all .3s linear}
.back-to-top:hover::before{opacity:1}
.back-to-top svg path{fill:none}
.back-to-top svg.progress-circle path{stroke:rgba(0,0,0,0.2);stroke-width:4;box-sizing:border-box;transition:all .3s linear}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
{% if section.settings.back_to_top %}
<div class='back-to-top'>
   <svg class='progress-circle svg-content' height='100%' viewBox='-1 -1 102 102' width='100%'>
      <path d='M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98'/>
   </svg>
</div>
        {% endif %}


{% schema %}
  {
    "name": "Back To Top",
    "settings": [
      {
        "type":"checkbox",
        "id":"back_to_top",
        "label":"Enable/Disable Back To Top",
        "default":true
      }
    ]
  }
{% endschema %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script>
  // back to top with progress
!function($){"use strict";$(document).ready(function(){var a=document.querySelector(".back-to-top path"),b=a.getTotalLength();a.style.transition=a.style.WebkitTransition="none",a.style.strokeDasharray=b+" "+b,a.style.strokeDashoffset=b,a.getBoundingClientRect(),a.style.transition=a.style.WebkitTransition="stroke-dashoffset 10ms linear";var c=function(){var c=$(window).scrollTop(),d=$(document).height()-$(window).height();a.style.strokeDashoffset=b-c*b/d};c(),$(window).scroll(c),jQuery(window).on("scroll",function(){jQuery(this).scrollTop()>50?jQuery(".back-to-top").addClass("active-progress"):jQuery(".back-to-top").removeClass("active-progress")}),jQuery(".back-to-top").on("click",function(a){return a.preventDefault(),jQuery("html, body").animate({scrollTop:0},550),!1})})}(jQuery);
</script>

4. Then go to the “Layout” directory, and click on the “theme.liquid” file.
5. Now scroll down until you find “</body>” closing tag and then Just above the closing tag, add the following code {% section ‘back-to-top’ %} and save the file
6. Now you can close the code editor and go to the theme “Customizer” and you will find the Back To Top section there you can enable or disable the “Back To Top” button