Some websites’ home page or any other page is too long and no matter where they are on a page and they can find their way back without having to scroll up again.
Back to top button is very helpful especially on long pages where lots of scrolling would call for the need of having the back to top button; makes customers navigate to the top page very easily.
In this blog, we’ll find a detailed walkthrough on how to add a Back to Top button to our Shopify store using code.
How to Add Back to Top Button using Code
From Shopify admin and follow Online store > themes > Actions > Edit code
In the left sidebar, the snippet folder creates a new snippet( name of the snippet: Back-to-the-top) and paste this below code.
|
{% comment %} Reduce the 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 the 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> |
After that open the theme.liquid file in the Layout folder and paste the below code before the </body> tag.
| {% render ‘back-to-the-top’ %} |
