How to add Back to Top button in Shopify? - eCommerce Thesis

How to add Back to Top button in Shopify?

Posted on by Kaif

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>