Implement a "Back to Top" Button in Shopify

Store Design
, , , ,
1

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.

2

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!

3

Hey @noyopag660

  1. Go to your Online Store
  2. Click on “Themes”
  3. Select “Edit code”
  4. Open your theme.liquid file

than below of the BTN add this JS
  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