BACK TO TOP

Store Design

Topic summary

A user seeks to add a fixed “Back to Top” button in their Dawn theme footer, preferring it over floating buttons that obscure products on mobile devices.

Initial Solutions Offered:

  • Two community members provided code snippets for footer.liquid, including HTML markup and CSS styling
  • One offered to customize styling if given a preview link

Implementation Challenge:

  • The original poster found the footer.liquid approach didn’t work as expected
  • The button wasn’t positioning correctly in the footer section

Working Solution:
The user successfully implemented a custom solution by:

  • Adding a CUSTOM LIQUID block within the footer section (not directly in footer.liquid)
  • Using position: inherit instead of position: absolute for proper visibility
  • Creating a styled circular button (50px × 50px) with:
    • Black border (2px)
    • Centered alignment
    • Top arrow emoji
    • Garamond font

Status: Resolved - The user found a working implementation that places a fixed button just before the footer.

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

Hi,

I am trying to add a fixed “Back to top” button in the footer of my home page (not a floating one like many apps I have tried).
I have seen that other stores have this feature and I would like to add it too because the floating one covers products mostly on smartphones. I use the DAWN theme and I saw that a couple of years ago a solution was given for the STUDIO theme but it is not compatible.

Can someone help me with the coding?

Thanks a lot!

1 Like
2

Hey add this code in your footer.liquid

Back to top

if you can share your preview link I can style it according your need!

1 Like
3

Hi @ADRIA34 ,

Please go to Actions > Edit code > sections > footer.liquid file and add code:


    Go to top
4

Hi, I tried your solution but as it is it must not be inserted in “footer.liquid” but must be placed in a “liquid.custom” in the footer because otherwise the BACK TO TOP block is not placed in the footer. Also “position” must be set different from “absolute” to make it visible. Thanks anyway because I took inspiration from your code to do this that I put in the liquid.code of the liquid.custom:

:top_arrow:

a.add-to-top { border-radius: 00px; border: 0px solid red; padding: 0px 5%; color: black; font-family: 'Garamond'; position: inherit; bottom: 0px; display: flex; justify-content: center; text-decoration: none; font-size: 25px; }

What do you think?

Greetings

5

Hi @ADRIA34 ,

You can try this, it will add button show button in footer and scroll to top smoothly

6

I have found this solution to put a fixed BACK TO TOP button just before the footer. I have inserted a CUSTOM LIQUID on the FOOTER section including this code CSS:

:top_arrow:

a.add-to-top { border-radius: 33px; border: 2px solid black; padding: 0px 0px; color: black; font-family: 'Garamond'; position: inherit; bottom: 20px; display: flex; justify-content: center; text-decoration: none; font-size: 25px; width:50px; height:50px; margin: 0px auto 0px auto; }