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 customers 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 not 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>

So thank you for the time to read this article. If you think this guideline is helpful for you then click on the like button on my video and subscribe to my youtube channel.

Also If you need any services relevant to Shopify, WordPress, or Digital Marketing then you can contact me or hire me on Upwork