How to Add Back to Top Button in Shopify? – Easiest Way

Adding the scroll to top feature in Shopify makes the navigation super easy for shoppers, allowing them to head right back up without too many manual scrolls. 

Here, I will show you a direct way to add back to top button in Shopify. 

Methods to Add Back to Top in Shopify

You can add the Shopify scroll to top button in two ways:

• Use an app where you can use a third-party tool to add the button on respective pages.
• Add a simple code to your Shopify theme file directly, which can be easily customized as needed.

Using an app does come with monthly fees, which you can avoid simply by adding a code to your theme file.

Follow the below steps carefully to add scroll to top button without any additional cost

Manual Method to Add Back to Top Button Shopify

Step 1: Head to Your Shopify Theme File 

From your Shopify admin panel, head to Online Store > Themes.

Click on the three dots next to Customize and click Edit code.

Step 2: Add the Code 

Then, open the theme.liquid file and add the following code before the closing </body> tag:

<!-- Meetanshi Scroll to Top Button Starts-->
<div id="scroll-to-top" style="display:none; position:fixed; bottom:20px; right:20px; z-index:1000;">
  <a href="#top" onclick="scrollToTop(event)">
    <img alt="Meetanshi scroll-to-top button" src="https://blog.meetanshi.com/wp-content/uploads/2025/01/meetanshi-scroll-to-top-icon.png" alt="Scroll to top" style="width:50px; height:50px; display:block;">
  </a>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const scrollToTopButton = document.getElementById("scroll-to-top");

    window.addEventListener("scroll", function () {
      if (window.scrollY > 300) {
        scrollToTopButton.style.display = "block";
      } else {
        scrollToTopButton.style.display = "none";
      }
    });

    // Smooth scroll to top function
    window.scrollToTop = function (event) {
      event.preventDefault();
      window.scrollTo({
        top: 0,
        behavior: "smooth"
      });
    };
  });
</script>
<!-- Meetanshi Scroll to Top Button Ends-->

Like this:

Step 3: Hit Save and Preview

Finish this up by clicking Save.

Congratulations. You’ve successfully added a scroll to top button in Shopify. 🎉 Take a preview of your online store; it will appear as soon as you scroll down the page.

Thus, the customers can quickly go to the top without scrolling manually

That’s how easy it is to add the back to top button in Shopify using a simple code. Now, try it yourself.