How To Add Back To Top Button to Scroll From Bottom On Shopify Post author:Ramzan Post published:October 18, 2021 Post category:Shopify Post comments:0 Comments How to Add Back to Top Button by following below steps: 1. Create new snippet by following below instructions. Find the theme you want to edit, and then click Actions > Edit code.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: 2. Paste below code in the snipped back-to-top {% 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"> <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> 3. Include snippet in theme just above the closing tag of body
How to Create a Custom Product Slider in Shopify Home Page Without App | Easy & Recommended Way January 5, 2022