How to add back to top button in Shopify

Shopify is one of the most popular platforms for creating online stores, and its free themes like Dawn are loved for their simplicity and performance. However, one common feature missing in most free themes is a Back to Top button.

A Back to Top button is a small floating button that allows users to quickly scroll to the top of a long page. This feature enhances user experience, improves mobile navigation, and even positively impacts engagement metrics like bounce rate. Paid Shopify themes often include this feature, but free themes do not.

In this guide, we will explain step by step how to add a Back to Top button to your Shopify Dawn theme using simple HTML, CSS, and JavaScript. The same approach will work for most of the other free Shopify themes as well, with only minor differences in where to place the code.

Why a Back to Top Button is Important

Imagine a customer scrolling through a long product listing page or a detailed blog post. If they want to navigate back to the top menu or header, they must manually scroll all the way up, which can be frustrating—especially on mobile devices.

• Improves Navigation: A Back to Top button allows users to instantly return to the top.
• Enhances User Experience: Smooth scrolling makes browsing more enjoyable.
• Reduces Bounce Rate: Visitors are less likely to leave if navigation is easy.
• Mobile-Friendly: Long scrolling is common on mobile, and this feature saves effort.

Does Shopify Dawn Have a Back to Top Button?

No, Shopify’s free Dawn theme does not include a Back to Top button by default. This feature is often seen in premium themes because it improves user interaction.

But the good news is that you can add it yourself without installing any third-party app. By adding a small snippet of HTML, CSS, and JavaScript, you can make your Dawn store look more professional.

Step-by-Step Guide: Add Back to Top Button in Shopify Dawn

Step 1: Add the Button HTML

Go to Shopify Admin → Online Store → Themes → Edit code. Open theme.liquid or footer.liquid and paste the following code just before the closing </body> tag:

<!-- Back to Top Button -->
<button
  type="button"
  class="btn btn-danger btn-floating btn-lg"
  id="btn-back-to-top"
>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-arrow-up" viewBox="0 0 16 16">
    <path fill-rule="evenodd" d="M8 12a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 .708.708L7.5 2.707V11.5A.5.5 0 0 0 8 12z"/>
  </svg>
</button>

Here, we use an inline SVG for the arrow icon because Dawn does not include Font Awesome by default.

Step 2: Style the Button with CSS

Open Assets → base.css and add the following CSS to style the button:

#btn-back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  background-color: #e1302b;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  cursor: pointer;
  z-index: 9999;
}

#btn-back-to-top:hover {
  background-color: #c82333;
}

html {
  scroll-behavior: smooth;
}

The scroll-behavior: smooth property ensures smooth scrolling when the button is clicked.

https://cdn.shopify.com/s/files/1/0000/0001/files/back-to-top.png?v=1691234567

<button type="button" id="btn-back-to-top">
  <img src="https://cdn.shopify.com/s/files/1/0000/0001/files/back-to-top.png?v=1691234567" 
       alt="Back to Top" width="50" height="50">
</button>

#btn-back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 9999;
  padding: 0;
}

#btn-back-to-top img {
  width: 50px;
  height: 50px;
}

Step 3: Add JavaScript for Scroll Behavior

Next, open Assets → global.js and add the following JavaScript code:

document.addEventListener("DOMContentLoaded", function () {
  let backtotopbutton = document.getElementById("btn-back-to-top");

  window.addEventListener("scroll", function () {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
      backtotopbutton.style.display = "block";
    } else {
      backtotopbutton.style.display = "none";
    }
  });

  backtotopbutton.addEventListener("click", function () {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
  });
});

This script shows the button only after the user scrolls 20px and scrolls the page back to the top when clicked.

Step 4: Save and Test

Once all changes are saved, refresh your storefront. Scroll down the page and you will see the Back to Top button appear in the bottom right corner. Clicking it will instantly bring you to the top of the page with a smooth effect.

SEO and UX Benefits of Back to Top Button

• Improves overall navigation and reduces user frustration.
• Encourages visitors to explore more content, reducing bounce rates.
• Enhances mobile browsing experience on long product pages.
• Boosts the professional look of your Shopify free theme.

Common Issues and Fixes

• Button not showing: Ensure the ID in your HTML matches the one in JavaScript.
• Font Awesome icon not working: Either load Font Awesome or use an inline SVG.
• Smooth scroll not working: Add html { scroll-behavior: smooth; } to your CSS.

Conclusion

Adding a Back to Top button in Shopify free themes like Dawn is simple and greatly improves user experience. By following the steps above—adding HTML, styling with CSS, and enabling JavaScript—you can implement this feature without using any apps or upgrading to a premium theme.