Ever been scrolling through a long page and wished you could jump back to the top with just one click? You're not alone! Adding a "Back to Top" button to your Shopify store can make a world of difference for your customers. It’s a small feature that packs a big punch, making navigation smoother and keeping your visitors happy. And the best part? You don't need to be a coding expert to do it.
In this guide, we'll walk you through how to add a "Back to Top" button to your Shopify store with some simple coding. It's quick, it's easy, and your customers will thank you for it! Ready to make your store more user-friendly?
Let’s dive in!
Step 1
From your Shopify admin, go to Online Store > Themes.
Step 2
Click the 3 dots and duplicate your theme. I always say to make any coding changes on a theme duplicate so you can work on the website without affecting the live theme.
Step 3
Find the theme you want to edit, and then click Actions > Edit code
Step 4
In the Snippets directory, click Add a new snippet.
Step 5
Name your snippet as back-to-the-top, then click Create snippet. Your snippet file opens in the code editor.
Then 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>
Then 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' %}
Click Save.
Preview the duplicate theme to check you're happy, and when you are simply hit "publish" and it will replace the current live theme with the updated changes.
You should now have a fully functional "Back to Top" button on your Shopify store, making it easier for your customers to navigate and enjoy their shopping experience. It's a quick and simple way to boost your site's usability, and your visitors will appreciate the added convenience!
If you have any questions or need help, send me a DM on Instagram!