Shopify themes, liquid, logos, and UX
Solved! Go to the solution
This is an accepted solution.
Hi @Song
Follow this:
add this code in theme.liquid file just before </body>
<a href="#" id="scroll" style="display: none;"><span></span></a>
Add this css in Asset->theme.scss file at bottom:
#scroll { position:fixed; right:10px; bottom:10px; cursor:pointer; width:50px; height:50px; background-color:#3498db; text-indent:-9999px; display:none; -webkit-border-radius:60px; -moz-border-radius:60px; border-radius:60px }
#scroll span { position:absolute; top:50%; left:50%; margin-left:-8px; margin-top:-12px; height:0; width:0; border:8px solid transparent; border-bottom-color:#ffffff; }
#scroll:hover { background-color:#e74c3c; opacity:1;filter:"alpha(opacity=100)"; -ms-filter:"alpha(opacity=100)"; }
Add this Js code in Asset->theme.js file at bottom:
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('#scroll').fadeIn();
} else {
$('#scroll').fadeOut();
}
});
$('#scroll').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
});
This is an accepted solution.
May be doc removed by that's why.
This is an accepted solution.
Hi @Song
Follow this:
add this code in theme.liquid file just before </body>
<a href="#" id="scroll" style="display: none;"><span></span></a>
Add this css in Asset->theme.scss file at bottom:
#scroll { position:fixed; right:10px; bottom:10px; cursor:pointer; width:50px; height:50px; background-color:#3498db; text-indent:-9999px; display:none; -webkit-border-radius:60px; -moz-border-radius:60px; border-radius:60px }
#scroll span { position:absolute; top:50%; left:50%; margin-left:-8px; margin-top:-12px; height:0; width:0; border:8px solid transparent; border-bottom-color:#ffffff; }
#scroll:hover { background-color:#e74c3c; opacity:1;filter:"alpha(opacity=100)"; -ms-filter:"alpha(opacity=100)"; }
Add this Js code in Asset->theme.js file at bottom:
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('#scroll').fadeIn();
} else {
$('#scroll').fadeOut();
}
});
$('#scroll').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});
});
Thank you very much for your reply, but why does the link method not work? Where is the problem?
https://shopify.dev/tutorials/customize-theme-add-back-to-top-button
This is an accepted solution.
May be doc removed by that's why.
OK, Your method works perfectly, thanks
Hi all.
I have the same problem like @Song . I updated to 17.7 and several things don't work anymore like this.
So i added
{% render 'back-to-the-top' %}
before the
</body>
in theme.liquid
and the code
{% 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 = '4em' %}
<a href="#" title="inizio pagina" class="back-to-top">
<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>
.fa {
color: #fff;
}
.back-to-top {
position: fixed;
bottom: {{ position_from_bottom }};
right: 0px;
text-decoration: none;
color: #fff;
background-color: #4d1717;
font-size: 16px;
padding: 0.3em;
display: none;
-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;
}
</style>
<script>
window.onload = function() {
jQuery(function($) {
var offset = {{ vertical_offset_for_trigger }};
var duration = 500;
$(window).scroll(function() {
if ($(this).scrollTop() > offset) {
$('.back-to-top').fadeIn(duration);
}
else {
$('.back-to-top').fadeOut(duration);
}
});
$('.back-to-top').unbind('click.smoothscroll').bind('click', function(e) {
e.preventDefault();
$('html, body').animate( { scrollTop: 0 }, duration);
return false;
})
});
}
</script>
in snippet
back-to-the-top.liquid
No way
Somebody can help?
Thanks in advance
Maybe also if somebody knows about the tabs in product description do not work anymore propperly (was working fine until V17.7DEBUT) https://community.shopify.com/c/Shopify-Design/Adding-tabs-on-product-page-simple-entry/td-p/430363/...
Can you please show the "back to product" code for the Studio theme?
Jasoliya,I have done everything, as you have said, but it doesn't on my Shopify site.
Send your store url
It's resolved, thanks!
Hi. I added these codes to each file but don't seem to gain a back to top button in footer. I'm working in a Copy of Debut Theme to make sure I don't mess anything up. When it says just before </body> does this mean the inserted code should be left of and on the same line as </body> or should I insert the code onto the line above </body> ?
Thanks for anyone's help!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024