Back to Top button is an essential feature of any professional high-converting Shopify store website. It helps customer return to the top of the current visiting page in a fast time without scrolling through too many.
In this article, I am going to share the easy video guideline with ready come about ” How to add Back to Top button in Shopify? “
I made this tutorial for new Shopify users who has no coding and technical skills and experience. To start this article you no need any coding skills or an app.
<button class="scrollToTopBtn">☝️</button> <style> /*-------------------- Back to Top Button ---------------------*/ .scrollToTopBtn { background-color: #850f11; border: none; border-radius: 50%; color: white; cursor: pointer; font-size: 30px; line-height: 48px; width: 48px; /* place it at the bottom right corner */ position: fixed; bottom: 30px; right: 30px; /* keep it on top of everything else */ z-index: 100; /* hide with opacity */ opacity: 0; /* also add a translate effect */ transform: translateY(100px); /* and a transition */ transition: all .5s ease } .showBtn { opacity: 1; transform: translateY(0) } </style> <script> <!-- ====== SCROLL TO TOP SCRIPT ====== --> var scrollToTopBtn = document.querySelector(".scrollToTopBtn") var rootElement = document.documentElement function handleScroll() { // Do something on scroll - 0.15 is the percentage the page has to scroll before the button appears // This can be changed - experiment var scrollTotal = rootElement.scrollHeight - rootElement.clientHeight if ((rootElement.scrollTop / scrollTotal ) > 0.15) { // Show button scrollToTopBtn.classList.add("showBtn") } else { // Hide button scrollToTopBtn.classList.remove("showBtn") } } function scrollToTop() { // Scroll to top logic rootElement.scrollTo({ top: 0, behavior: "smooth" }) } scrollToTopBtn.addEventListener("click", scrollToTop) document.addEventListener("scroll", handleScroll) </script> {% render 'back-to-the-top' %} </body>