Implement a "Back to Top" Button in Shopify

Store Design
, , , ,

Topic summary

A user seeks to add a “Back to Top” button to their Shopify store that appears after scrolling and enables smooth navigation back to the page top.

Proposed Solution:

  • Add HTML button code to theme.liquid file
  • Implement JavaScript to control button visibility based on scroll position and handle smooth scrolling behavior
  • Style the button using CSS in base.css or a custom CSS file

Implementation Steps:

  1. Navigate to Online Store → Themes → Edit code
  2. Insert button markup in theme.liquid
  3. Add JavaScript below the button code to manage scroll detection and click functionality
  4. Apply CSS styling to position the button fixed at bottom-right with hover effects

Key Features:

  • Button remains hidden until user scrolls down
  • Fixed positioning at bottom-right corner
  • Smooth scroll animation when clicked
  • Customizable styling (color, size, border-radius)

Code snippets were provided for HTML structure, JavaScript functionality, and CSS styling, though the actual code content is not visible in the conversation.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
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

1 Like