TUTORIAL 3.0 Sectioned Theme
This feature is ideally for long scrolling webpage, and with a click on this button will bring you back to the top of the current page.
You are required to complete all the steps below or email at eaidter@gmail.com to hire us with minimal cost.
- Duplicate your theme first to keep it as a back-up before trying this advanced coding
- Keyboard shortcut to find specific text line: Place cursor on the code editor screen and hold
CTRL + F
-
From your Shopify admin, go to Online Store > Themes.
-
Find the theme you want to edit, and then click Actions > Edit code.
-
In the Snippets directory, click Add a new snippet and and add the following
- Create a new snippet called
back-to-the-top
Next, click Create snippet and the new created file for
back-to-the-top.liquid
will open in the code editor. - Create a new snippet called
-
Paste the following code into the new 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>
Next, click Save.
-
Under Layouts folder, open the
theme.liquid
file -
Find (CTRL+F)
</body>
or scroll to the bottom of the file.Right above the closing
</body>
tag, paste this code:{% render 'back-to-the-top' %}
In the back-to-the-top
snippet file, locate and make adjustment accordingly.
For the position of your button relative to the bottom of the browser, edit the position_from_bottom value:
{% assign position_from_bottom = '6em' %}
To change how far a customer needs to scroll down to trigger the button appearance, edit the vertical_offset_for_trigger value:
{% assign vertical_offset_for_trigger = 300 %}
The color scheme and sizing can be adjusted under the <style>
tag to fit your theme. Locate them and change accordingly.
Next, click Save.