Back to Top Button For Debut Theme

Solved
Song
New Member
3 0 0
I want to add a "Back to Top" button to my shop, so I followed the tutorial step by step in this link: https://shopify.dev/tutorials/customize-theme-add-back-to-top -button In the previous version of DEBUT themes, the Back to Top button works perfectly, but when I update to the latest DEBUT (VERSION 17.5.0), the button cannot be displayed on the front page. In fact, when I use the same settings in the latest Brookly theme, the button works perfectly. I feel very confused. I don't know what has changed in the latest DEBUT (VERSION 17.5.0) theme, causing the button to not work properly. Can anyone help me? Maybe you don't use the method provided in the link above. If you can tell me a new way to add a "Back to Top" button to the store, that would be better.
0 Likes
Jasoliya
Shopify Expert
4120 569 997

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; 
    }); 
});

 

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Song
New Member
3 0 0

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 

0 Likes
Jasoliya
Shopify Expert
4120 569 997

This is an accepted solution.

May be doc removed by that's why. 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Song
New Member
3 0 0

OK, Your method works perfectly, thanks

0 Likes
kub
Explorer
77 2 24

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/...

 

0 Likes
Christie_c01
New Member
2 0 0

 I have done everything, as you have said, but it doesn't on my Shopify site.

0 Likes
Jasoliya
Shopify Expert
4120 569 997

Send your store url 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Christie_c01
New Member
2 0 0

It's resolved, thanks!

0 Likes