How to Add a Back-to-the-Top Button in Your Shopify Store

Adding a “Back-to-the-Top” button enhances the user experience on your Shopify store, enabling users to quickly return to the top of a page after scrolling down. This simple feature is particularly useful for long product pages or blog posts.

Follow this step-by-step guide to create and include a “Back-to-the-Top” button in your Shopify theme.

Step 1: Create the Back-to-the-Top Snippet

1. Access Your Theme Files
   • From your Shopify admin dashboard, navigate to Online Store > Themes.
   • Find the theme you want to edit.
   • Click the … button and select Edit code from the menu.
2. Add a New Snippet
   • In the Snippets directory, click Add a new snippet.
   • Name your snippet back-to-the-top, and then click Create snippet.
   • Your snippet file will now open in the code editor.
3. Paste the Code Below
   Insert the following code into your newly created snippet:

{% comment %}
  Adjust the vertical offset to change when the button appears.
  The value is measured in pixels.
{% endcomment %}
{% assign vertical_offset_for_trigger = 300 %}

{% comment %}
  Set the button's position from the bottom of the browser.
{% endcomment %}
{% assign position_from_bottom = '6em' %}

<a id="BackToTop" href="#" title="Back to the top" class="back-to-top hide">
  <span>Back to the top</span> <i class="fa fa-arrow-circle-o-up fa-2x"></i>
</a>
{{ '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' | stylesheet_tag }}

<style>
  .back-to-top {
    position: fixed;
    bottom: {{ position_from_bottom }};
    right: 0px;
    text-decoration: none;
    color: #999;
    background-color: #eee;
    font-size: 16px;
    padding: 0.3em;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    z-index: 60000;
  }
  .back-to-top i {
    vertical-align: middle;
  }
  .back-to-top span {
    padding-left: 0.5em;
  }
  .back-to-top:hover {
    text-decoration: none;
    color: #555;
  }
  .hide {
    display: none!important;
  }
</style>

<script>
  (function() {
    function trackScroll() {
      var scrolled = window.pageYOffset;
      var coords = {{ vertical_offset_for_trigger }};

      if (scrolled > coords) {
        goTopBtn.classList.remove('hide');
      }
      if (scrolled < coords) {
        goTopBtn.classList.add('hide');
      }
    }

    function backToTop() {
      if (window.pageYOffset > 0) {
        window.scrollBy(0, -80);
        setTimeout(backToTop, 0);
      }
    }

    var goTopBtn = document.querySelector('.back-to-top');

    window.addEventListener('scroll', trackScroll);
    goTopBtn.addEventListener('click', backToTop);
  })();
</script>

Step 2: Include the Snippet in Your Layout

1. Open the theme.liquid File
   • Navigate to the Layouts directory and open the theme.liquid file.
2. Add the Snippet Code
   • Scroll to the bottom of the theme.liquid file.
   • Right above the closing </body> tag, paste the following code:

{% render 'back-to-the-top' %}

This ensures the “Back-to-the-Top” button appears on every page.

Conclusion

By adding a “Back-to-the-Top” button to your Shopify store, you create a more seamless and user-friendly shopping experience. This simple feature is quick to implement and can significantly improve navigation on your site. Follow the steps above to integrate this useful snippet into your theme and start enhancing your store’s usability today!