BACK TO TOP

Store Design
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!

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!

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; }