Shopify Back to Top Button: All Theme Compatibility Solutions

Adding a "back to top" button to your Shopify website can significantly improve the user browsing experience, especially on pages with longer content, such as the homepage, blog, and product pages.

🧩 Features

• ✅ Smooth scrolling for a superior user experience

• ✅ Supports all official themes (Dawn, Horizon, Sense, etc.)

• ✅ Responsive style, adapts to size and position

• ✅ Uses pure HTML/CSS/JS, no plugins required, no extra loading.

📦 Get the complete code package

We have prepared all the documents for you, including:

• Button HTML Structure

• Style files (supports Dawn, Sense, Horizon, etc.)

• JavaScript control logic

• Quick Installation Instructions (Chinese)

👉Click here to go to the product page to get the complete code package (free download)

🚫 No registration or payment required, permanently free to download!

💡 Frequently Asked Questions (FAQ)

Q: Why is clicking the button not doing anything?
Please check that the script is inserted correctly and before </body> tag.

Q: Is the button obscuring other elements?
You can adjust the button's bottom and right values ​​in CSS, or use media queries for mobile optimization.

Q: Which themes are supported?
We have successfully tested it on Shopify's official themes Dawn, Sense, Craft, Crave, Ride, Studio, and Horizon.

🔗 More free code features:

• Stay tuned

Follow us to unlock more practical Shopify tips in Chinese:

🔗 shopi8.com – Shopify Chinese Code Functionality Zone

 <style>
 .back-to-top {
 cursor: pointer;
 position: fixed !important;
 bottom: 268px;
 right: 30px;
 text-decoration: none;
 color: #8d8d8d;
  background-color: rgba(238, 238, 238, 0.6);
 font-size: 16px;
 padding: 0;
 z-index: 98;
 width: 47px;
 height: 47px;
 border-radius: 50%;
 display: none;
 align-items: center;
 justify-content: center;
 transition: all 0.3s;
 }
 .back-to-top:hover { 
background-color: rgba(238, 238, 238, 1);
 }
 #scrollToTop svg {
 width: 17px;
 height: 17px;
 transition: all 0.3s;
 }
 .btn--circle-arrow:after {
 background: #e7e7e7;
 }
 .btn:after {
 border-radius: 50px;
 transition: all 0.3s;
 height: 0;
 width: 0;
 left: 50%;
 top: 50%;
 content: '';
 position: absolute;
 }
 .btn:not([disabled]):hover:after {
 height: calc(100% + 2px);
 width: calc(100% + 2px);
 left: -1px;
 top: -1px;
 }
 </style>
 <div
 id="scrollToTop"
 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" viewBox="0 0 492 492"> 
<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.388c-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.844l103.808-10 3.584v329.084c0,14.832,11.616,26.932,26.448,26.932h22.8c14.83 2,0,27.624,12.1,27.624-26.932V134.816l104.396,104.752c5.06,5.0 6,11.636,7.844,18.844,7.844s13.864-2.784,18.932-7.844l16.072-1 6.128C453.163,212.952,453.123,195.88,442.627,185.388z"></path>
 </svg>
 </div>
 <script>
 document.addEventListener("DOMContentLoaded", () => {
 const scrollBtn = document.getElementById("scrollToTop");
 window.addEventListener("scroll", () => {
 scrollBtn.style.display = window.scrollY > 300 ? "flex" : "none";
 });
 scrollBtn.addEventListener("click", () => {
 window.scrollTo({ top: 0, behavior: "smooth" });
 });
 });
 </script>