Shopify "Back to Top" button functionality code (Supports all themes | Download code file for free)

Shopify "Back to Top" button functionality code (Supports all themes | Download code file for free)

$10.00 $20.00

Add the "Back to Top" feature to your Shopify website. No plugins required, it's free and compatible with all official themes including Dawn, Sense, and Horizon.

📌 Features:

  • The back button will automatically appear after scrolling down.

  • Clicking will smoothly scroll the page to the top.

  • Responsive design adapts to both PC and mobile devices.

  • Purely front-end implemented, no app installation required.

  • All official free themes are compatible. ✅

🎯 Video Tutorial

Video Showcase

🎁Get the complete code:

< style > .back-to-top :hover {background-color: rgba ( 238 , 238 , 238 , 1 )} .back-to-top {cursor: pointer ;position: fixed !important ;bottom: 268 px ;right: 30 px ;text-decoration: none ;color: #8d8d8d ;background-color: rgba ( 238 , 238 , 238 , 0.6 );font-size: 16 px ;padding: 0 ;z-index: 98 ;width: 47 px ;height: 47 px ;border-radius: 50 % ;display: none ;align-items: center ;justify-content: center ; -webkit-transition : all .3 s ; -moz-transition : all .3 s ; -o-transition : all .3 s ;transition: all .3 s } #scrollToTop .back-to-top svg {width: 17 px ; height: 17 px ; position: relative ; z-index: 99 ; margin: 0 ; -webkit-transition : all .3 s ; -moz-transition : all .3 s ; -o-transition : all .3 s ;transition: all .3 s } .btn--circle-arrow :after {background: #e7e7e7 } .btn :after {border-radius: 50 px ; -webkit-transition : all .3 s ; -moz-transition : all .3 s ; -o-transition : all .3 s ;transition: all .3 s ;height: 0 ;left: 50 % ;top: 50 % ;width: 0 ;content: '' ;position: absolute } .btn :not( [ disabled ]) :hover:after {height: calc ( 100 % +2 px );left: -1 px ;top: -1 px ;width: calc ( 100 % +2 px )}</ style >
< div id="scrollToTop" href=" #" title=" Back to the top" class=" back-to-top" btn btn--circle-arrow " > < svg class=" icon icon--arrow-up " xmlns=" http : //www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 492 492" style="" xml:space="preserve"><path d="M442.627,185.388L265.083,7.844C260.019,2.78,253.263,0,245.915,0c-7.204,0-13.956,2.78-19.02,7.844L49.347,185.388 c-10.488,10.492-10.488,27.568,0,38.052l16.12,16.128c5.064,5. 06,11.82,7.844,19.028,7.844c7.204,0,14.192-2.784,19.252-7.844 l103.808-103.584v329.084c0,14.832,11.616,26.932,26.448,26.932h 22.8c14.832,0,27.624-12.1,27.624-26.932V134.816l104.396,104.752 c5.06,5.06,11.636,7.844,18.844,7.844s13.864-2.784,18.932-7.844l16.072-16 .128C453.163,212.952,453.123,195.88,442.627,185.388z"></path></svg></div>
{{'scroll-to-top.js' | asset_url | script_tag}}

let b = document . getElementById ( "scrollToTop" ); onscroll = () => b . style . display = scrollY > 300 ? "flex" : "none" ; b . onclick = () => scrollTo ({ top : 0 , behavior : "smooth" });

📁 File structure:

shopify-back-to-top-button-code/
├── scroll-to-top.liquid ← Button structure ├── scroll-to-top.js ← Control logic (paste into theme.liquid)

💻 Installation steps (brief explanation):

  1. Add the following code above the ` </body> ` tag in the `theme.liquid` file: {% - render` 'scroll-to-top' - %}

  2. Save and preview; the button will automatically appear as you scroll down.


❓ Frequently Asked Questions (FAQ):

Q: Which themes are supported?
It has been successfully tested on the following themes: Dawn, Sense, Horizon, Craft, Crave, Studio, and Ride.

Q: The button is not clickable?
Please confirm that the file is placed before </body> text.

Q: Is the button obscuring page elements?
You can modify bottom or z-index value of .back-to-top to avoid conflicts with the client component.

📦Source: Shopi8 Team

🏷️Updated: Latest version 2025

🎁 More free resources