Add a back to top button on long pages
If you have pages that are long and require a lot of scrolling, you can add a Back to the top button to your theme.

Create a back-to-the-top snippet
In the Snippets directory, click Add a new snippet.
Name your snippet
back-to-the-top
, then click Create snippet. Your snippet file opens in the code editor.Paste the following code into your newly created
back-to-the-top
file:{% comment %} Reduce below value if you need the back to the top button to appear higher up on the page. That value is in pixels. {% endcomment %} {% assign vertical_offset_for_trigger = 300 %} {% comment %} Vertical offset from bottom of browser for the position of the button. {% 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; -webkit-border-top-left-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-bottomleft: 3px; 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 i + span { padding-left: 0; } .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>
Click Save.
Include your snippet
In the Layouts folder, open the
theme.liquid
file.Scroll to the bottom of the file. Right above the closing
</body>
tag, paste this code:{% render 'back-to-the-top' %}
Your code should look like this:
Click Save.
Configure the back to the top button (optional)
To customize your back to the top button, click here and look at the first lines of your snippet.
- To change the position of your button relative to the bottom of the browser, edit the
position_from_bottom
value:
{% assign position_from_bottom = '4em' %}
- To change how far down a customer needs to scroll before the button is revealed, edit the
vertical_offset_for_trigger
value:
{% assign vertical_offset_for_trigger = 300 %}
Demo store
Have a look at the demo store.