Implement a "Back to Top" Button in Shopify

[noyopag660]

The goal is to create a "Back to Top" button that becomes visible once the user scrolls down a certain distance on a Shopify store page. This button will allow users to easily navigate back to the top of the page with a smooth scrolling effect.

[Hannastinson]

You can create a "Back to Top" button with smooth scrolling by adding a button, styling it to stay fixed at the bottom, and using a simple script to make it scroll back to the top when clicked. Also, make sure the button only appears when the user scrolls down a bit.

Let me know if you'd like more details on any of these steps!

[Huptech-Web · Accepted solution]

Hey @noyopag660 
1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your theme.liquid file

<button id="back-to-top" style="display:none;">Back to Top</button>

 than below of the BTN add this JS 

<script>
  window.onscroll = function() {
    if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
      document.getElementById("back-to-top").style.display = "block";
    } else {
      document.getElementById("back-to-top").style.display = "none";
    }
  };
  document.getElementById('back-to-top').onclick = function() {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };
</script>

 
1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can't find your custom CSS file, open "base.css"
6. Add the following code at the end of the file.

#back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    transition: opacity 0.3s ease;
  }

  #back-to-top:hover {
    background-color: #0056b3;
  }

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the Accepted Solution.
Best regards
K.K