How can I code a 'back to top' button for my homepage footer?

Store Design

Topic summary

A user seeks to implement a fixed ‘back to top’ button in their homepage footer using the Studio theme, specifically wanting a non-floating solution.

Solution provided:

  • Edit sections/footer.liquid file and add HTML anchor link before closing </footer> tag
  • Add CSS styling through theme customization panel to create fixed positioning (bottom-right corner)
  • CSS includes hover effects and basic styling (black background, white text)

Implementation details:

  • Button positioned fixed at bottom: 20px, right: 20px
  • Uses href="#top" to scroll to page top
  • Customizable colors and padding through CSS

Current status:
Original poster confirmed they will test the solution. A separate user later asked about implementing the same feature in the Emerge theme, which remains unanswered.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Hi,> > I’m looking to add a ‘back to top’ fixed button in the footer of my home page (not a floating one from some apps).> > I’ve seen other stores have this feature and I want to have it also. The theme I’m using is Studio.> > Can anyone help with the coding?> > Many thanks!

1 Like
2

Hello there,

To add a “Back to Top” fixed button in the footer of your home page in the Studio theme, you can follow these steps:

1.In your Shopify admin, go to “Online Store” and then click on “Themes”.
2.Find your active theme (Studio) and click on the “Actions” button, then select “Edit code”.
3.In the list of theme files, locate and click on “sections/footer.liquid” to open the file.
4.Scroll to the bottom of the file and add the following HTML code just before the closing tag:

Back to Top

Now, the “Back to Top” link will be added to the footer of your home page. However, you still need to add the necessary CSS styles to position the button and give it a fixed appearance.

To do this, follow these additional steps:

1.In the theme editor, click on “Customize” to open the theme customization panel.
2.Click on “Additional CSS” or “Advanced CSS” (depending on the customization options provided by your theme).
3.Add the following CSS code:

.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #000;
  color: #fff;
  padding: 10px 20px;
  text-decoration: none;
}

.back-to-top:hover {
  background-color: #333;
}

4.Save the changes.

1 Like
3

Thank you so much. I’ll try it now :slightly_smiling_face:

1 Like
4

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.
If helpful then please Like and Accept Solution.

5

Does anyone know how to ad ad to top button in Emerge theme?